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


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


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.


Content Order


“Front Loading”


Selective Display


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.


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


Consistency


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.


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.


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.


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

Gestalt Design Principles


Page Frameworks

Fixed-width Page Flexible or Fluid-width Pages


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.


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

7 wsg page-design

Education