How I Design
In many ways, I don't consider myself a designer. I don't have any formal training. I don't have a strong grasp of colour theory. However, I do tend to look at design in a very structured and methodical way that I believe lends itself well to web design.
Focus on what is important
My approach is actually quite simple: focus on what is important. That may seem like a 'duh' statement and in many ways it is.
The first step for me is to determine what elements I need in the design. This isn't just the big stuff like logo, content and sidebar. It's much more granular than that. What's the primary navigation, what's secondary (tertiary, etc)? Search boxes, external links, forms, copyright info. Whatever I think might be on the page gets added to the page. (Things like Page Description Diagrams can be useful on larger or more complex projects.)
Once I know what needs to be on the page, I can start breaking it down by importance. To make something feel more important, it should be more noticable. There are a number of ways to do this:
- Make it bigger. It's hard to miss if it just takes up more room on the page.
- Make it closer to the top of the page. If it's below the fold, it's more likely to get missed. Keep the important stuff above the fold.
- Make it a different colour. If everything is grey and you make one thing neon red, it's going to get noticed.
- Use a different font. Fonts can create a certain visual cadence and using something different can help bring attention to something. For example, using a serif font for headers when body text is sans serif.
- Give it breathing room. Often, pages can get cramped with information overload. Adding whitespace around an element can help it stand out.
I'm sure there are others (feel free to share). It's important to consider what you think is important for the user, though, and not necessarily for yourself or for the stakeholders. For large or complex projects, use cases and personas can be useful in determining what is important.
Grids and Wireframes
With the elements on the page, I define a grid that I think will work well with the amount of content I have. It's normally a 3 or 4 column grid. The current design of this site, for example, works off a 3 column grid where each column is 250 pixels wide with 20 pixels of margin on either side. I almost always have the content column span two columns (because it's important!).
Then I drag the elements into approximate places in the grid. More important stuff at the top, less important stuff at the bottom. Sidebars are useful for having "extraneous" information more readily available but it's important to contrast it from the content area so that it doesn't compete for attention. Make the text smaller, make the line heights smaller or use a contrasting background. If all your content is the same size, same color, and with the same line height then things look boring and everything just blends together making the site hard to read.
It's at this point that I've got a basic wireframe of how the page will ultimately be laid out. (This might be a good time to send something for the client to review to make sure you didn't miss anything that should be on the page or to explain to the client why you think something should be left out.)
Adding the Polish
Once I have the wireframe all set to go and approved, I apply the "pretty pixels". You know, slap some reflections on there and some gradients and I'm all set! (Ha, just kidding...please don't hurt me.)
At this point, my knowledge tends to go towards "what looks good" and tends to run more off gut instinct. For a more educated approach, check out Mike Rundle's article on Vitamin of the four rules of site design: C.R.A.P: Contrast, Repetition, Alignment and Proximity.
If you've got any great tips or links on design theory, be sure to leave a comment.