980px

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:

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.

    http://peol.github.com/960gridder/

  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…

    http://hashgrid.com/

  4. Earl says:

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

    http://sixrevisions.com/web_design/a-brief-look-at-grid-based-layouts-in-web-design/

  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.

Trackbacks:

Leave a Comment:

Don't forget to get your Globally Recognized Avatar.

css.php