Improving a design step by step, Part 1

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 12?

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.

About Me

I'm Sacha Greif, a web designer freelancing out of Paris, France. You can check out my portfolio, and of course you should follow me on Twitter.

16 Responses to “Improving a design step by step, Part 1”

  • Improving a design step by step, Part 2 | ThemeDesigner.net

    [...] 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 [...]

    9 Jun 1:34 pm
    Reply
  • Tookangweb

    this is very cool step by step tutorial, thanks for share

    7 Jul 7:29 am
    Reply
  • Max Luzuriaga

    Great tutorial! It’s great that the concepts here can be applied to so many other designs aside from this one!

    20 Jul 8:14 pm
    Reply
  • Chris Ronk

    This was an interesting tutorial. I never considered using a grid before. I just manually lined things up. This makes it so much easier.

    Now on to part two.

    22 Jul 2:39 am
    Reply
  • Maria Manoela Porto

    really cool tips that even experienced wedesigners should have in mind!

    7 Aug 4:59 am
    Reply
  • Improving a design step by step, Part 2 | Attack Of Design

    [...] 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 [...]

    25 Feb 1:40 pm
    Reply
  • Sina

    Thank you for this tutorial. I think this kind of step by step tutorial on how to improve the design of a page is extremely useful for people who are learning. As a programmer I understood all the steps. It’s like watching a good designer at work. I wish there was more tutorials like this.

    Thank.

    26 Feb 1:13 am
    Reply
  • PP – CSS Grids | iamacyborg

    [...] this article has convinced me that I need to go back, and clean everything up so that all elements within [...]

    26 Feb 3:55 pm
    Reply
  • Ralph

    Thank you a lot of your helpful tutorial.

    7 Mar 7:46 am
    Reply
  • How to Find the Right Designer | Attack Of Design

    [...] Improving a design step by step, Part 1 [...]

    7 Jun 4:37 pm
    Reply
    • Zineb

      WordPress.com Redesign Jeff has brought to my atttneion that folks at Automattic are testing a redesign of the WordPress.com front page.Those arriving at WordPress.com front page are either from other blogs hosted on WordPress.com or search engines, and most of them are int

      5 Dec 11:26 am
  • Local Community Website - Please Review- Thank You - SitePoint Forums

    [...] of Beautiful Design isn't a bad place to start. Take a lot at this two part blog entry as well: Improving a design step by step, Part 1 | Attack Of Design There are quite a few principles explored in there through an easy example. __________________ [...]

    11 Jun 1:43 pm
    Reply
  • Neil

    I love this tutorial, its just what a design beginner like me needs to get me on the right track. It talks about all the theoretical concepts and standards and ideals, but also shows on a sample project how they visually make a difference. It would have been perfect though, if you could have linked us to the actual HTML and CSS, not just pictures, so that if someone was, say, unfamiliar with how to apply a specific shadow or bevel, he could have a look at your CSS.

    26 Jun 12:50 pm
    Reply
  • jual rpp kurikulum 2013

    It’s appropriate time to make some plans for the future and it’s time to be happy. I’ve read this submit and if I may just I want to recommend you some fascinating things or advice. Maybe you could write subsequent articles relating to this article. I want to read more things approximately it!

    12 Jun 2:16 pm
    Reply
  • Puertas Blindadas torrejon de ardoz

    I got this web page from my friend who told me about this website and
    now this time I am browsing this site and reading very informative content at this time.

    23 Sep 12:21 am
    Reply

Leave a Reply

This field is required

This field is required