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.

Slides:



Advertisements
Similar presentations
The Web Wizards Guide to HTML Chapter Six Tables.
Advertisements

Web Design Principles 5th Edition
Section 6.1 Write Web text Use a mission statement Generate and organize content ideas Section 6.2 Use page dimension guidelines Determine content placement.
6 Developing Content and Layout Section 6.1 Generate and organize content ideas Write and organize Web text Section 6.2 Identify page dimension guidelines.
Principles of Web Design 5th Edition
LAYOUT OF PAGE ELEMENTS September 28 th, PATTERNS Common ways to use the Layout Elements of Visual Hierarchy, Visual Flow, Grouping and Alignment,
Chapter Concepts Discuss Fonts Understand Fonts
Chapter 2 Web Site Design Principles Principles of Web Design, Third Edition.
Multimedia and the World Wide Web HCI 201 Lecture Notes #4B.
Chapter 2 Web Site Design Principles Principles of Web Design, 4 th Edition.
Objectives Gain knowledge of mathematical ratios and proportional systems Learn about the use of the grid.
MULTIMEDIA FOUNDATIONS Core Concepts for Digital Design By Vic Costello Chapter 5 : Multimedia Page Design (accessible as an e-book through the VU library)
Overall Design Standards
Chapter 8 Document Design 2 Page Layout
Chapter Objectives Discuss the relationship between page length, content placement, and usability Complete Step 4: Specify the website’s navigation system.
Web Design, 4 th Edition 4 Planning a Successful Web Site: Part 2.
HS 115 Unit Four Seminar Amber Krasny, MBA, CPC, CMRS.
Chapter 4 Adding Images. Chapter 4 Lessons Introduction 1.Insert and align images 2.Enhance an image and use alternate text 3.Insert a background image.
Chapter 2 Web Site Design Principles
Web Site Design Principles
Word Processing Definitions Indent to move text horizontally away from the left or right margin, setting it apart from surrounding text.
© 2012 The McGraw-Hill Companies, Inc. All rights reserved. word 2010 Chapter 3 Formatting Documents.
Chapter 2 Web Site Design Principles Principles of Web Design, 4 th Edition.
Click on the link to answer questions 1-8. View the examples of each element to help you understand each principle. You will have to scroll down to find.
Click on the link to answer questions 1-8. View the examples of each element to help you understand each principle. You will have to scroll down to find.
Chapter 4 Working with Frames. Align and distribute objects on a page Stack and layer objects Work with graphics frames Work with text frames Chapter.
© 2011 Delmar, Cengage Learning Chapter 4 Working with Frames.
Posters, Magazines, Websites
Positioning Objects with CSS and Tables
Using the PowerPoint templates. USING THE POWERPOINT TEMPLATES Contents Title Pages Customising title pages Adding slides Content options Adding and adjusting.
Click on the link to answer questions 1-8. View the examples of each element to help you understand each principle. You will have to scroll down to find.
MANAGING TEXT FLOW Lesson 5. OBJECTIVES SOFTWARE ORIENTATION The Page Layout tab contains groups of commands that will produce a formatted document’s.
Overall Design Standards
Chapter 2 Web Site Design Principles
Microsoft Office 2007-Illustrated Introductory, Windows Vista Edition
Overall Design Standards
Overall Design Standards
Overall Design Standards
Microsoft Office 2007-Illustrated
Overall Design Standards
Overall Design Standards
Microsoft Office 2007-Illustrated Introductory, Windows Vista Edition
Name Project Title Project summary Project Objectives
Unit 2 Terms Word Processing.
Overall Design Standards
Basic Principles of Layout
Layout Terms Visual Hierarchy
Fixed Positioning.
11/18/2018 5:19 PM © Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN.
Overall Design Standards
Overall Design Standards
CS3220 Web and Internet Programming Page Layout with CSS
Overall Design Standards
Layout Terms Visual Hierarchy
Overall Design Standards
Overall Design Standards
Overall Design Standards
Overall Design Standards
Overall Design Standards
Overall Design Standards
Overall Design Standards
Overall Design Standards
Overall design standards
Overall design standards
Overall design standards
Overall design standards
Overall design standards
Overall design standards
Overall design standards
Overall design standards
Presentation transcript:

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.