Chapter 5MultimediaPage Design

Organizing Content on a Page The visual layout of each menu is

the product of multimedia page design:

Video

Graphics

Text

Animation

Audio

…all come together to add to the richness of the multimedia experience.

Gutenberg Diagram Illustrates the general

pattern the eyes follow as they scan visual information within a page.

F-LayoutThe F-layout is one of the most common page layouts on the Web.

•The reader’s gaze is directed though the page in a pattern that resembles the letter F.

•The Library of Congress homepage pictured here features the classic F-layout design.

Z-Layout

• The Z-layout is a variation of the Gutenberg Diagram.

• The Smithsonian homepage pictured here guides the user’s eyes through the page along a Z-shaped path.

Visual HierarchyVisual hierarchy refers to the perceived ordering of content within a page by the reader.

HeadingsHTML includes six levels of headings with default sizes that get progressively smaller from first to last.

Headings establish visual hierarchy Headings are often

custom designedas a part of the overall theme of a page layout.

Golden Ratio Golden Ratio is a

mathematical construct that has been widely used for determining the proportions of a visual space.

The spiral form of a nautilus shell closely conforms to Phi, the golden number.

Where to Start?

For a designer, the first step is to subdivide the vast unitary space of a blank page into smaller editable regions that can be individually arranged and populated with content.

The Grid SystemDesign of a new web page often begins with simple sketches like this one showing how the screen space will be broken apart into various content regions.

Uniform Subspaces Grid paper can be used to

break up the design space into uniform subspaces.

Typographic Grid

• Columns

• Rows

• Margins

• Modules

• Spatial Zones

Common Grid StructuresBy varying the gridstructure, a designspace can besubdivided in an infinitenumber of ways.

• Single-column

• Two-column

• Three-column

• Modular

Newspaper LayoutObserve how headingsand a modular gridwork together to breakup the presentationof visual informationin this mockup of atraditional newspaperlayout.

Inline vs. Floating

• An inline photograph (left) pushes the text downward, resulting in an undesirable page layout with too much white space.

• A more pleasing visual layout (right) is achieved when the photograph is “floated,” forcing the text to wrap around it on the opposite side.

Tables

A simple table with two columns and three rows.

Tables

Tables

CSS Box Model

CSS Box Model was created to give web designers greater control over the presentation of visual elements in a page.

Page TemplatesA web page template included with Adobe Fireworks CS5.

Page TemplatesThe template (below) is transformed by replacing the placeholder contents (images and text) with original assets designed for the project.

WordPress.comWordPress.com is a popular blogging tool and web-based content management system (CMS). Users can choose a pagelayout design from over 150 templates in the themes library.