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.
Although it’s often said that art is subjective, you cannot argue that when it comes to web design, there’s a few key principles that you should always keep in mind. Ensuring your work respects the principles of contrast, unity, hierarchy, etc. can dramatically improve the result. In order to demonstrate this, I will show you how to make a homepage layout better step by step.
Step 0: the beginning
This is what we’re starting out with. It’s pretty uninspiring, and quite ugly to be honest. The first thing that jumps out is that the layout lacks structure. As you can see in the image below, the tagline is not aligned with the logo, and the blog block is not aligned to either one of them. You’ll also notice that every margin has a different value.
This goes against the design principle of unity. Using different values for spacing prevents your design from coming together as a whole. The layout looks unbalanced, and every part seems disconnected.
Step 1: Build a grid
One of the biggest improvements you can make to any layout is adding a grid. The reason it must comes first is that the grid is the underlying structure on which your design is built. The grid is to us designers what the blueprint is to an architect: it tells you where things go and makes sure that the finished product won’t crumble down.
I have also adjusted the vertical spacing (show in green) between the featured project and the borders of the main zone. Regular vertical spacing helps improve the rhythm of your design.
Everybody has their own techniques for laying out grids, but I like to use a small photoshop plugin called Gridmaker, which creates the grid for you. I also always use a 12 columns, 940 pixels wide grid, unless the project has special requirements. Since it’s not the case here, we can use the standard grid. But maybe you prefer a 16 columns or even 24 columns grid, and that’s fine too.
Why use a 12-column grid if we only have three columns on the homepage? The reason is that we’re already thinking ahead to the next pages of our site. Since 12 is divisible by 1, 2, 3, 4, 6 and 12, the 12 columns give us a lot of flexibility in case we want another layout in a different section. For example, with a 3 column grid there would be now way of having two equal width blocks without modifying the grid. But with a 12-column grid, we can simply have two 6-column blocks.
Step 2: Pick the right fonts
The next few steps will involve a lot of typography, so we might as well pick fonts now so we now what we’re working with. So it’s time to fire up your favorite web browser, go to dafont.com , and pick 4 or 5 cool fonts. Use one for the logo, one for the tagline, another for the body copy… No! Wait! This is exactly what you should not do.
We’re only going to pick two fonts, one of which is going to be a web-safe font. For the body, we’re going to use that web-safe font. You can specify a fancier alternative in your css later, but you should always design for the majority of your users, so for now keep Arial or Verdana.
The other font is going to be used for the logo, tagline, and headings. Whatever font you pick, make sure its license lets you embed it with Cufon or @font-face. Personally I like Vegur a lot, not only because it’s a beautiful free font, but also because it comes as a family. Meaning you also get extra-light, light, medium, and bold alternatives as well as the standard normal version. This can be extremely useful when you have to style heading elements from h1 to h6.
And here’s the result:
Last but not least, remember that the main goal is not to pick a font that’s beautiful, but a font that’s appropriate. So no matter how gorgeous and detailed that medieval font is, don’t use it for, say, a hosting company’s pricing table.
Step 3: Add some white space
The third most common problem with web layouts is the lack of breathing room, or white space. Since the internet started out by using the same conventions as the printed world, the standard font size for the web is often thought to be 12px. But as this excellent article from Information Architects points out, you’re further away from your computer screen than you would be from a book. So 12px on a screen is effectively smaller than 12pt on a book. If the text is small, the space surrounding it naturally shrinks (because huge areas of white space look strange) and you end up with a cramped, unreadable layout.
On the other hand, if you use a grid you can set gutters (margins) between columns, which will automatically make your layout more readable. With more space between columns, bigger font sizes don’t look so awkward anymore, and you can switch from 12px to 14px or even 16px. This is also a good time to add some leading, i.e. vertical space between lines of text. A good rule of thumb is that your leading should be about 1.5 times your font size (in CSS, that would be
line-height:1.5em;). So for 12px, I would use a 18px leading, and for 24px it would be a 36px leading.
Note that this step sometimes require you to break out of the grid, and you shouldn’t be afraid to do so if needed. For example, I decided to increase the vertical spacing around the featured project carousel. So instead of using 20px of vertical padding, I’ll have 40px.
It’s a bad habit to want to cram as much content as possible above the fold so that people don’t need to scroll. Remember that there is only so much one can take in. It’s better to present a few elements clearly than a mass of jumbled content, because at least people will remember them.
Read on to part 2, where we’ll work on giving the design a stronger hierarchy, and a nicer color palette.