![Page 1: 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](https://reader033.vdocuments.mx/reader033/viewer/2022042703/56649ed55503460f94be56f1/html5/thumbnails/1.jpg)
Chapter 5MultimediaPage Design
![Page 2: 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](https://reader033.vdocuments.mx/reader033/viewer/2022042703/56649ed55503460f94be56f1/html5/thumbnails/2.jpg)
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.
![Page 3: 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](https://reader033.vdocuments.mx/reader033/viewer/2022042703/56649ed55503460f94be56f1/html5/thumbnails/3.jpg)
Gutenberg Diagram Illustrates the general
pattern the eyes follow as they scan visual information within a page.
![Page 4: 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](https://reader033.vdocuments.mx/reader033/viewer/2022042703/56649ed55503460f94be56f1/html5/thumbnails/4.jpg)
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.
![Page 5: 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](https://reader033.vdocuments.mx/reader033/viewer/2022042703/56649ed55503460f94be56f1/html5/thumbnails/5.jpg)
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.
![Page 6: 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](https://reader033.vdocuments.mx/reader033/viewer/2022042703/56649ed55503460f94be56f1/html5/thumbnails/6.jpg)
Visual HierarchyVisual hierarchy refers to the perceived ordering of content within a page by the reader.
![Page 7: 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](https://reader033.vdocuments.mx/reader033/viewer/2022042703/56649ed55503460f94be56f1/html5/thumbnails/7.jpg)
HeadingsHTML includes six levels of headings with default sizes that get progressively smaller from first to last.
![Page 8: 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](https://reader033.vdocuments.mx/reader033/viewer/2022042703/56649ed55503460f94be56f1/html5/thumbnails/8.jpg)
Headings establish visual hierarchy Headings are often
custom designedas a part of the overall theme of a page layout.
![Page 9: 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](https://reader033.vdocuments.mx/reader033/viewer/2022042703/56649ed55503460f94be56f1/html5/thumbnails/9.jpg)
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.
![Page 10: 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](https://reader033.vdocuments.mx/reader033/viewer/2022042703/56649ed55503460f94be56f1/html5/thumbnails/10.jpg)
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.
![Page 11: 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](https://reader033.vdocuments.mx/reader033/viewer/2022042703/56649ed55503460f94be56f1/html5/thumbnails/11.jpg)
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.
![Page 12: 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](https://reader033.vdocuments.mx/reader033/viewer/2022042703/56649ed55503460f94be56f1/html5/thumbnails/12.jpg)
Uniform Subspaces Grid paper can be used to
break up the design space into uniform subspaces.
![Page 13: 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](https://reader033.vdocuments.mx/reader033/viewer/2022042703/56649ed55503460f94be56f1/html5/thumbnails/13.jpg)
Typographic Grid
• Columns
• Rows
• Margins
• Modules
• Spatial Zones
![Page 14: 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](https://reader033.vdocuments.mx/reader033/viewer/2022042703/56649ed55503460f94be56f1/html5/thumbnails/14.jpg)
Common Grid StructuresBy varying the gridstructure, a designspace can besubdivided in an infinitenumber of ways.
• Single-column
• Two-column
• Three-column
• Modular
![Page 15: 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](https://reader033.vdocuments.mx/reader033/viewer/2022042703/56649ed55503460f94be56f1/html5/thumbnails/15.jpg)
Newspaper LayoutObserve how headingsand a modular gridwork together to breakup the presentationof visual informationin this mockup of atraditional newspaperlayout.
![Page 16: 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](https://reader033.vdocuments.mx/reader033/viewer/2022042703/56649ed55503460f94be56f1/html5/thumbnails/16.jpg)
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.
![Page 17: 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](https://reader033.vdocuments.mx/reader033/viewer/2022042703/56649ed55503460f94be56f1/html5/thumbnails/17.jpg)
Tables
A simple table with two columns and three rows.
![Page 18: 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](https://reader033.vdocuments.mx/reader033/viewer/2022042703/56649ed55503460f94be56f1/html5/thumbnails/18.jpg)
Tables
![Page 19: 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](https://reader033.vdocuments.mx/reader033/viewer/2022042703/56649ed55503460f94be56f1/html5/thumbnails/19.jpg)
Tables
![Page 20: 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](https://reader033.vdocuments.mx/reader033/viewer/2022042703/56649ed55503460f94be56f1/html5/thumbnails/20.jpg)
CSS Box Model
CSS Box Model was created to give web designers greater control over the presentation of visual elements in a page.
![Page 21: 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](https://reader033.vdocuments.mx/reader033/viewer/2022042703/56649ed55503460f94be56f1/html5/thumbnails/21.jpg)
Page TemplatesA web page template included with Adobe Fireworks CS5.
![Page 22: 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](https://reader033.vdocuments.mx/reader033/viewer/2022042703/56649ed55503460f94be56f1/html5/thumbnails/22.jpg)
Page TemplatesThe template (below) is transformed by replacing the placeholder contents (images and text) with original assets designed for the project.
![Page 23: 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](https://reader033.vdocuments.mx/reader033/viewer/2022042703/56649ed55503460f94be56f1/html5/thumbnails/23.jpg)
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.