The Web Design Process Part 3: Layout

So you met with your client and discovered everything there is to know about them, then you went away and worked out your information architecture. Now all you have to do is take your exploratory work and design your interface.

It’s important to remember that design is about communication. As a designer, it’s your job to create something which is aesthetically pleasing, usable, accessible and provides useful and interesting content. The design should work as a channel between the user and the information they’re trying to find and should not be an impediment. We’ve all seen web sites that look stunning but require a PhD to find your way around, or web sites that have great information which is so badly presented that the site is just painful to use.

So this step is the one where you actually start to do some “designy” work. And where do you do that design work? Photoshop? Illustrator? Fireworks? Gimp? Nope. None of the above. At least not if you want to get some ideas out quickly. A blank sheet of paper and a pencil lets you focus on the design without having to worry too much about the technology behind it. Realistically, you could sketch out many more ideas on paper in ten minutes than you could layout on the computer in the same time. A cheap notebook or a ream of photocopy paper is all you need, don’t worry about having a moleskine (unless you really want one) or other fancy notebook.

Based on your information architecture which you’ve worked out in the last step of the process, sketch out the areas needed on your web page. Where will you place the logo, the navigation, main content, side bars? How large will they be in relation to each other?

Wireframe

Wireframe sketch by Mike Rohde

There are now what can be considered bread and butter web layouts which we have gotten used to using and seeing. Most web sites have the following sections:

1. Containing Block

Every web page has a container. Often the container is set up using a div tag with centered alignment so that no matter what resolution the user’s monitor is, the content of the web site always sits in the middle of the screen. The container holds all the elements on the page and stops them from drifting beyond the bounds of the browser window and off into empty space. You can set the width of this container to be fluid, meaning it expands to fill the width of browser window; or fixed, so that the content is the same width no matter what size the window is.

2. Logo

Web site branding should include the company logo and colors that exist across the company’s existing forms of marketing, such as business cards and brochures. If there is no existing logo, then you may be required to create a design for this too. Logo design is a big task in itself. Usually the logo appearing on a web site is also a link back to the home page of the site.

3. Navigation Bar

The navigation system for a site should be easy to use and easy to find. Regular web users expect to see the navigation at the top of the page.

4. Main Content

Keep the main content as a focal point on the page because that’s what your web visitors are looking for. If they don’t find it quickly they will leave and not come back.

5. Sidebars

Sidebars provide an area for extra or sub-navigation. If your site is very simple you may not need to put a sidebar in your layout. As a site becomes more complex, sidebars are useful for providing links that bring visitors deeper into your site. On blogs, you’ll frequently see sidebars with Recent Posts, Archives, Recent Comments which can help your visitors easily explore your site. If you’re putting advertising on your site, the sidebars often contain ad blocks.

6. Footer

Located at the bottom of the page, the footer usually contains copyright, contact, and legal information, as well as a few links to the main sections of the site. Footers have become more elaborate over time and designers have become very imaginative with background graphics. By separating the end content from the bottom of the browser window, the footer should indicate to users that they’re at the bottom of the page.

Wireframe2

Image by Mike Rohde

These are the main blocks that tend to appear on web sites today. You might like to create a layout that uses all or some of these blocks. By sketching out your layout in pencil you can avoid problems that may arise when you take the computer.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • PCSpectra

    Awesome. I’ve done that wireframe sketch for years, so it’s nice to know that is how actual designers do it too. :)

    Mine don’t look anywhere near as pretty as that, in fact I am pretty sure I am the only one that can interpret what is being said. :P

  • james24

    I am liking this series alot.

    One tool that really helps me mockup is fireworks. I cant draw for toffee so using their tools really helps me

    This site rocks!!

  • dave

    Thanks for the articles – brilliant idea and very informative!!!

  • http://www.WebhostingLamp.com webhostinglamp

    One tool that really helps me mockup is fireworks. I cant draw for toffee so using their tools really helps me

  • Andy B

    Hi jennifer, i think you’ve missed a step before IA. What about user research? Personas? Scenarios and identifying User tasks? This information is indispensable when justifying design decisions to whimsical clients.