Lesson #6: Design and Layout, Part One
(click here for a printable version of this page)

Vocabulary

  • Design Elements: a major section of a document's layout.
  • Columns: the vertical components of a design element.
  • Header: the top element of a document's layout.
  • Footer: the bottom element of a document's layout.
  • Body: the material found below the header and above the footer.

Process Flow

  • Define document's content.
  • Assess audience's needs.
  • Shape layout and design to meet audience needs and expectations

Background

  • Effective print and web documents normally are based on three to five design elements.
  • Avoid designs that require horizontal scrolling.
  • Divide long documents into shorter sections to minimize vertical scrolling.
  • Be consistent in your design.
  • Keep designs simple.
  • Web development is design by approximation; what you see on your screen might not be the same as what your viewers see on theirs.

Step One: Understanding Design Elements

You can determine the number of design elements in any document by stepping back and counting the number of times that you pause as you quickly scan it. For example, the gateway page of Writenet has three major design elements:

The first element is the left column that contains Writenet's major navigation buttons; the second is the welcome graphic. The third element is the list of featured links. In general, documents based on three to five major design elements are easy to read.

The example below is based on five major design elements. A header and footer bracket a three-column body. This layout frequently is referred to as a two-three design.

Normally, documents based on greater than five design elements tend to be very confusing and difficult to navigate.

Step Two: Flexibility of the Two-Three Layout

The two-three layout offers developers great flexibility and a range of presentation options. Standard headers and footers should be consistent and used throughout an entire site. Standard navigation links or buttons should be located exclusively in the header, footer, or the left-most column of the document's body.

The three-column body of this format, however, can be modified in a number of ways to offer visual interest, while still remaining broadly consistent. Additionally, the three-column body can be adapted to meet a variety of content presentation needs.

Below is a schematic of a standard two-three layout:

As long as the headers and footers are kept consistent throughout the entire site, the three body columns can be adapted to meet specific content and presentation needs. For instance, in the example below, Columns B and C are combined to form a larger area for content:

In the example above, Column A can be use for navigation links, while the combined Column B and C offers expanded area for content.

In the final example below, all three body columns have been combined to provide the maximum area possible for expanded content:

This layout would be useful to display large graphics or charts.  Please note that if you decide to combine the three body columns at any place in your site, navigation links or buttons should be located in the footer throughout the entire site.

Summary

The purpose of this lesson is to get you thinking about how document layout should be shaped by the content that you wish to convey. Keep in mind that you can use the three body columns in a number of ways, provided that your headers and footers are consistent throughout the entire site.

The next lesson will explore how tables can be used to achieve the design options outlined above.

 

back