7 wsg page-design

© 2004 Ken Baldauf, All rights reserved.

Page Design

CGS2826 Web DesignProgram in Interdisciplinary ComputingFlorida State University

From Web Style Guide, Chapter 7: Page Design

© 2010 Ken Baldauf, All rights reserved.

Design creates visual logic and seeks an optimal balance between visual sensation and graphic information.

© 2010 Ken Baldauf, All rights reserved.

Adaptive Design

Design creates visual logic and seeks an optimal balance between visual sensation and graphic information.

Style sheets can adapt the HTML document for use in different contexts.

© 2010 Ken Baldauf, All rights reserved.

Content Order

© 2010 Ken Baldauf, All rights reserved.

“Front Loading”

© 2010 Ken Baldauf, All rights reserved.

Selective Display

© 2010 Ken Baldauf, All rights reserved.

Text Alternatives

Alternate text comes in many forms. A descriptive caption is an alternative means to convey information contained in an image. Many sites use text links in the footer of the page to provide a text-only alternative to image-based links. You can provide alternate text in the code of the page: for example, using the “alt” attribute of the <img> tag to provide alternate text for images. Audio and video presentations are often presented with captions and a text transcript.

© 2010 Ken Baldauf, All rights reserved.

Visual Design

The primary purposes of graphic design are to:

•Create a clear visual hierarchy of contrast, so you can see at a glance what is important and what is peripheral•Define functional regions of the page•Group page elements that are related, so that you can see structure in the content

CrowdedPages

© 2010 Ken Baldauf, All rights reserved.

Consistency

© 2010 Ken Baldauf, All rights reserved.

Contrast

A page of solid text will repel the casual reader with a mass of undifferentiated gray, without obvious cues to the structure of your information. A page dominated by poorly designed or overly bold graphics or typography will also distract or repel users seeking substantive content.

© 2010 Ken Baldauf, All rights reserved.

© 2010 Ken Baldauf, All rights reserved.

© 2010 Ken Baldauf, All rights reserved.

Test your designs on a number of devices and laptops and in a variety of conditions, especially if you are using subtle colors to define important page functions or content. In general it’s best to use a more robust, high-contrast typography color scheme.

Overuse of graphic emphasis leads to a “clown’s pants” effect in which everything is equally garish and nothing is emphasized.

© 2010 Ken Baldauf, All rights reserved.

the ground field around page elements is as active and important a part of the design as any figure element on the page. Filling all the white space on a page is like removing all the oxygen from a room—an efficient use of space perhaps, but decidedly difficult to inhabit.

© 2010 Ken Baldauf, All rights reserved.

Centuries of designing documents for readers have taught the world useful lessons in how humans read and absorb information.

Gestalt Design Principles

© 2010 Ken Baldauf, All rights reserved.

© 2010 Ken Baldauf, All rights reserved.

© 2010 Ken Baldauf, All rights reserved.

Page Frameworks

Fixed-width Page Flexible or Fluid-width Pages

© 2010 Ken Baldauf, All rights reserved.

At normal reading distances the arc of the visual field covered by the macula is only a few inches wide—about the width of a well-designed column of text, or about twelve words per line.

Readers can adapt line length in fluid layouts by narrowing the browser window.

© 2010 Ken Baldauf, All rights reserved.

Page Length

Long web pages require the user to remember too much information that scrolls off the screen; users easily lose their sense of context when the navigational buttons or major links are not visible