NOTE: Now that I’m part of the Smashing Network, I thought I’d feature some of this blog’s older content for the new readers.
Here is part 2 of my step by step tutorial on design basics. In the first part, we looked at the grid and basic typography. In this section, we’ll tackle one of a designer’s main tasks: giving a layout meaning and hierarchy.
Here’s what we have so far:
Step 4: Create a strong hierarchy
By hierarchy, I mean the relative importance of each of your layout’s elements. Besides color contrast, another way of establishing a strong hierarchy is using font size. Notice how every header on our page is 18 pt, and how the tagline and the logo are the same size? This means that the viewer won’t know which one is more important, which in turn means he’ll have to think more to make a decision. And as Steve Krug tells us, making a user think increases the chance they’ll get frustrated and leave your site.
Another thing that’s lacking is a clear call to action. The call to action is something that tells the user what to do next, and ideally there should only be one per page. Usually we think of call to actions as buttons, but it can also be a link, a video, or anything else that can be interacted with. In this case, a “view my portfolio” button will do just fine.
I’ve also split the tagline in two, because longer sentences are less likely to be read and have less impact than shorter ones. Even if the user doesn’t read the second half, there’s at least a good chance that they will read the first part of the message.
Always try to anticipate the path that the user’s attention will take. Eye-tracking studies show that a user’s eye makes an F shape when scanning a page, which is why it’s common to put the logo in the top left corner. But you can deviate from the rule as long as you preserve a logical path through the layout.
Step 5: Establish consistency
This is the other side of the coin. Making one element stand out from the rest implies that the other elements will blend in. If everything stands out, then nothing stands out! So how do you achieve that? The answer is by being consistent in your design choices. Notice how the “Testimonials” block uses Arial, whereas the rest of the site uses Verdana? And why are some of the links blue, while some are green?
It’s always a good idea to go through your design once it’s done, and check that all spacing, colors, fonts, shadows, border width,etc. are consistent with one another. Even small details like rounded corner radiuses are important. People might not notice them consciously, but if they’re inconsistent it will harm the overall quality of your design. And if you’re working with a developer this will also save him some headaches as he won’t have to wonder why your link’s color is #39a2e9 in the header, #43a7eb in the content, and #2497e5 in the footer.
6. Improve the color palette
Our current colors have several problems. First, they are not especially nice in themselves. I know this is entirely subjective and depends on context, but it’s usually much easier to start out with strong saturated colors than desaturated, weak ones. Desaturated colors can work in a grunge or subdued design, but they are not suitable for a modern, “web 2.0″ look (I know, this is not 2004 anymore…but bear with me). Since in this case this is the look we’re going for, we need to pick bolder, stronger colors.
The second problem is that the colors simply don’t match. Although some sites are so well designed that they seem like they would look good in any color, in most cases the color palette can make or break a design. So how do you pick the right colors ? I personally don’t like color generators too much, because they give you mathematically generated colors, and you have no guarantee that they will look good to the human eye.
On the other hand, palettes from sites like Kuler or Colourlovers are created by fellow human beings, so there’s a pretty good chance they’ll look good (and you can even sort them by popularity to make sure you’re picking a winner). You can also extract colors from a picture, which has the advantage that you can pick a photo relevant to your subject matter to make sure the colors match your design even better.
The third problem is that the colors are not appropriate. Every color has strong associations, and you should be very careful about what your colors communicate, especially if you’re designing for a client. For example, the most commonly used color for corporate clients is blue. It’s not a coincidence that blue is also the number one result when you ask people what their favorite color is. In this case, we’re designing a corporate, professional portfolio but we picked dark green and muddy pink-beige as our main colors, which just doesn’t work.
Finally, the fourth problem is that there are just too many colors. The logo is yellow, the top bar is green, the banner is beige, and don’t forget that the links are blue. There’s no definite rule about the number of colors you should use, but just know that each color you add has to match all the ones that are already there. So unless you want to spend hours looking for the perfect color scheme, it’s a strong incentive to keep the total number of colors down.
In our case I’ve used a color palette called Linknull from Kuler. There’s one main color (blue) and one contrasting color (magenta). Both are strong colors, and the blue has the advantage that you can put either white or black text on it, and it’s still readable. Also, I can use the same blue for the links which means I don’t need to introduce one more color.
Step 7: Increase contrast
If you picked the right colors in the last step, your design’s contrast will already be enhanced. Just remember that whatever element you want to put forward has to stick out from the rest of the page. It seems simple, but the challenge is finding the right balance. Too little contrast and nothing will stand out. Too much contrast, and the user will always be distracted and unable to focus.
The other reason contrast is important is simply for readability. You need sufficient contrast between the text and background, otherwise people will have to squint to read your site. And unless you’re an selling reading glasses, you want to avoid that.
In our case, the magenta logo is not very readable on that dark background, so I’ll use blue instead.
I suggest reading this excellent article about contrast to learn more about the subject.
8. Apply the finishing touches
The layout is looking much better, but it still feels a little flat. This is the fun part, this is when the whole “Web 2.0″ look comes in. Gradients ! Shadows ! Bevels ! But wait, don’t go crazy just yet. There’s a few things you need to know first.
- Gradients look best when they remain subtle. So you can have a gradient between dark blue and medium blue, or medium and light, but not dark blue and light blue, and especially not dark red and light green.
- The default shadow setting in photoshop is much too strong. Usually you want to tone it down to about 30-50% opacity and 1-2 pixels distance.
- A 1-pixel bevel is very effective at giving things a 3-D look and is much nicer than photoshop’s default bevel. In fact, don’t even use the photoshop bevel, use inner shadow with 1px distance and 100% choke instead.
- Remember that all those effects are meant to simulate the real world by giving the illusion of 3D. So whenever you apply them,your light source has to be consistent. You don’t want to have some shadows pointing right and other pointing left.
- Speaking of light sources, glows are a nice subtle way to highlight elements. Just use a very large (300-400px) soft brush, paint a single white dot on a separate layer, and adjust the opacity (or you can set the layer blending mode to “soft light” for an even more subtle effect).
You’ll note that I also switched around the positions of the “About Me” and “From the Blog” blocks. In this case it makes more sense to tell people about you first, because they’ll have more incentive to read your blog once they feel like they know you a little.
So there you have it! The design isn’t that interesting, but at least it respects all the basic principles of web design: it’s clean, readable, and will probably accomplish its goal. Let’s take one last look at the original to see just how far we’ve come…
Extra credit: check out the Hacker News thread about this tutorial to see some different perspectives on using a grid and other design questions.