topbg

Posts Tagged ‘CSS’

Q&A with GrandmasterB – HTML/CSS Layout

Wednesday, May 27th, 2009

Q&A with GrandmasterB

From time to time, I get questions about how I start designing websites, and how I build custom WordPress themes for my clients. I’ve spent the better part of the last year trying to streamline the process of designing and launching a blog theme. The problem that I have is I tend to get a little carried away with trying to be perfect. Like most designers I start out with the basic tools…pencil and paper. I draw out the layout and figure out the basic positioning of all of the necessary elements before I even think about putting anything down in Photoshop. That drawing stays with me until the very end of the project, and sometimes even after just for reference.

How Does GrandmasterB Layout a Site for WordPress?

Recently, Forest from The Random Forest and Frugal Zeitgeist hit me up on Google Chat to ask me how I build a Wordpress theme and how I go from Photoshop layout to coding everything for Wordpress. Well, I know that I’m not the only designer/developer that works this way, but I build a simple HTML/CSS file that will serve as a template for the coding of the WordPress theme. In my opinion, there’s no reason to mess with all of the WordPress options and variables unless you have already solidified the design in it’s simplest form. I break down the design into the most simplest elements first:

(more…)

26 Creative Approaches to Header Design

Monday, February 9th, 2009

Following in the footsteps of my recent 26 Creative Approaches to Footer Design post; I thought that it would be cool to post twenty-six creative header designs. Creative header designs are quickly becoming a growing trend in website design. The header is still the default area for placing logos and navigation, but the manner in which they are being placed is a different technique altogether. Some of the sites that I found included all types of different design elements, information and one even included an audio player.

The thing that sets all of these designs apart from most, is that they all use a great deal of CSS to pull off the multiple layers of images. Take Pixel Criminals for example (#16 on the list), the header alone consists of four or five different images layered together and the main image is over 500K…that’s insane! Many of the designs included in the list of twenty-six creative header designs have a desktop theme, giving the feeling of the site being a workspace. They are really unique designs and feature items like sticky notes for navigation, paper clips, coffee mugs and other workspace essentials. One of the designs has implemented Flash to simulate a steamy cup of Java…BRILLIANT!

If you’re a website designer like myself, or just a fan of creative website design; I’m sure you’ll enjoy my list of creative header designs…ENJOY!

26 Creative Approaches to Header Design

Koko Digital

KOKO Digital

Revolution Driving Tuition

Revolution Driving Tuition

(more…)

My Web Development Tools (Part Two)

Sunday, March 23rd, 2008

I’m back for the conclusion of my post from yesterday (My Web Development Tools). Part two will focus mainly on my browser of choice…FIREFOX! I know that Firefox is probably not new to most of my readers, but I have installed a great set of add-ons that will make any web developers life easier. By the way don’t forget that Firefox Version 3 is now available in Beta4. If you’d like to check it out it can be found here.

Firefox Icon
Tool Number Four: Firefox 2

I LOVE FIREFOX! There, now that that’s out of the way I can concentrate on giving you details as to why I use Firefox to develop sites. I use Firefox for two main reasons. I code every site and test as I go with Firefox. The main reason is that the fine folks at Microsoft have discontinued Internet Explorer for Mac; which quite honestly is fine with me. I do have a standby Windows machine dedicated to testing once I am sure everything looks fine in Firefox. The other reason I prefer to do all of my work with Firefox is the great add-ons that you can download from the mozilla site. That’s the beauty of using an open source browser; the community of developers come up with some of the coolest add-ons to make your internet experience more enjoyable.My favorite add-on for Firefox is the Web Developer Toolbar by Chris Pederick.
(more…)

My Web Development Tools (Part One)

Saturday, March 22nd, 2008

I have been asked many times what are the best tools (programs) to use when designing and developing websites, or what do you use when you develop a site. For me it all starts with the most simplest of tools…pencil and paper. What you say? This clown uses a pencil and paper to design websites? I find that by drawing out ideas first helps me to find a direction for the design. This approach really isn’t any different than how an author approaches writing a novel or a sculptor creates a masterpiece out of bronze or marble. Only after I have a good idea of where I want to go with the design do I sit down in front of my computer (Mac of course!) and get busy with Photoshop.
(more…)

topbg
Your Ad Here