Chapter 5 Multimedia Page 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-Layout The 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 Hierarchy Visual hierarchy refers to the perceived ordering of content within a page by the reader.

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

Headings establish visual hierarchy Headings are often custom designed as 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 System Design 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 Structures By varying the grid structure, a design space can be subdivided in an infinite number of ways. Single-column Two-column Three-column Modular

Newspaper Layout Observe how headings and a modular grid work together to break up the presentation of visual information in this mockup of a traditional newspaper layout.

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

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

Page Templates A web page template included with Adobe Fireworks CS5.

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

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