Content layout and wireframes

“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.

content defined

Arranging content into a meaningful pattern

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

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

Resources for thinking about content

Traditional wireframes

The process of designing the content layout of the website is done via wireframes for every page. Traditional wireframes begin as black-and-white diagrams that illustrate blocks of content, navigation and functionality.

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.

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

Resources for thinking about wireframes

Resources for building wireframes

Using a grid

Grids are a combination of vertical columns, horizontal fields, and white space gutters.

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
Transcending CSS: The Fine Art of Web Design – p. 184, fig. 3.1

Resources for designing with grids

Mike’s 960 Wireframe Example