sccc.premiumdw.com

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

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:

• 10 Rock Solid Website Layout Examples | Design Shack
• Essential Tips for Designing an Effective Homepage | SixRevisions
• Multi-Device Layout Patterns | LukeW

Traditional Wireframes

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:

• Rehabilitation Institute of Washington Wireframes | Premium Design Works
• The Right Way to Wireframe | YouTube
• Quickstart on Prototyping with Wireframes | EightShapes
• 35 Excellent Wireframing Resources | Smashing Magazine
• Ultimate Guide to Website Wireframing | Six Revisions
• Wireframes for the HCDE Department Website | Mike Sinkula
• Wireframes for Jet City Improv | Premium Design Works
• 3 Illustrator Wireframes for Your Next Responsive Web Design Project | Matt D. Smith

Using the Grid

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

See Also:

• Grids: an invisible foundation | Ideabook
• A Brief Look at Grid-Based Layouts in Web Design | Six Revisions
• Grid and Column Designs | Web Designer Wall
• Fluid 960 Grid System | Design Influences
• 960px Grid System | 960.gs
• Templates and Sketch Books for Wireframing | GeekChix
• A new global visual language for the BBC’s digital services | BBC Internet Blog
• Illustrator 974px Grid System (12) | The Grid System
• The Simpler CSS Grid | Web Designer Wall
• 960px Column Grid Layouts | Portia Plante
• How to wireframe two web layouts in Illustrator using 960.gs | The Next Web
• Grids | Mozilla Developer Network

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

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