WEB200 » Content Layout for the Web

“Without good, relevant and organized content, everything on your website will merely be a placeholder.”

Web Redesign: Workflow that Works 2.0, by Kelly Gato & Emily Cotler

Where’s My Content?

Yes… this is a question that you will be asking your Clients. But, this is also a question that you should be asking yourself when you are beginning the layout stage of your website project.


Dictionary Version 2.0.3 (51.5) by Apple Inc.

In my opinion, website design is largely if not all about the organization and presentation of content. Therefore, a considerable amount of time needs to go into designing the content layout of the website before the visual design stage should begin.

Arranging Content into a Meaningful Order

Transcending CSS: The Fine Art of Web Design - p. 153, fig. 2.27

Transcending CSS: The Fine Art of Web Design – p. 153, fig. 2.27

Pulling your elements together into a logical order is a must. Most website pages can be broken down into several basic elements:

  1. Branding
  2. Navigation
  3. Main Content
  4. Supplementary Content
  5. Site Information

See Also:

Traditional Wireframes

Transcending CSS: The Fine Art of Web Design - p. 109, fig. 2.2

Transcending CSS: The Fine Art of Web Design – p. 109, fig. 2.

The process of designing the content layout of the website is done via Wireframes for each and every page. Traditional Wireframes are black-and-white diagrams that illustrate blocks of content, navigation and functionality of a website design.

Wireframes have been used as a tool to communicate content and structure of a page’s design without the distractions of color and imagery. They are also broadly understood by both Clients and Web Professionals.  Wireframes are generally used to help a web designer work quickly through a series of layout iterations before the visual design is implemented:

See Also:

Using the Grid

Transcending CSS: The Fine Art of Web Design - p. 184, fig. 3.1

Transcending CSS: The Fine Art of Web Design – p. 184, fig. 3.1

Grids are a combination of vertical columns, horizontal fields, and white space gutters. Designers have often thought that working inside a grid can be restrictive rather than a creative process. Untrue.

Using grids will:

  • serve as a guide to designers to follow when placing objects on a page
  • provide structure and add rhythm to a design
  • will help a designer to create a composition that is easier for a user/reader to scan
  • present information in a way that is more neatly organized and easier to follow
Mike's 960 Wireframe Example

Mike’s 960 Wireframe Example

See Also:

With my grid in place, I can start sketching out where I want all of my content to go:

Content Layout White Board Drawing, by Mike Sinkula

Content Layout White Board Drawing, by Mike Sinkula

Putting it All Together…

You: Great Mike… thanks for all of these screenshots and such from that book I cant afford! And… wow… don’t you look like a geek in that photo! But… what the hell do I do in order to turn in that Wireframes assignment?!?!

Me: Funny you should ask. I have an example we can look at. This  should help put it into perspective for you:

View: Creating a Website Wireframe in Illustrator | Premium Design Works

This portion of the Premium Design Works website is written by Mike Sinkula for the Web Design & Development students at Seattle Central College and the Human Centered Design & Engineering students at the University of Washington.


  1. Lenny Peters says:

    Super rocking bookmark tool to download from 960.gs, I use the bookmark all the time.


  2. Kris Luminar says:

    I just stumbled on this site and thought it might be a good resource for making mockups: http://balsamiq.com/ . I’ve been playing around with their web demo and it looks really fun and useful.

  3. Sean Walling says:

    There a ton of great resources out there for grid layouts.
    I find this one particularly helpful as you can add it to a page’s markup and then by pressing ‘G’, you can display it on your actual page to see how things are lining up.

    I find it pretty helpful, hopefully your students will as well…


  4. Earl says:

    Here’s a good article on using grid-based layouts. Also contains some good links to help you design your grids.


  5. Mark Scheidell says:

    Here’s the link to the Blueprint website. Their tools are based on the Fluid 960 Grid System. It includes a number of CSS files to enhance the initial typography, etc.

    It appears to be a free tool.

    As anyone else tried it? Would like some feedback on whether it’s worth spending time trying it.


Leave a Comment:

Don't forget to get your Globally Recognized Avatar.