Visual Design


Objective
  • Organize the elements of the page, giving each the proper level of emphasis, in a way that makes the navigation of the website as easy as possible.
Overview
  • Any design element that interferes with ease of navigation should be removed.
Emphasis
  • Guiding the eyes to the most important elements.
  • Place the greatest emphasis on the content (featured content in particular), second-most on the navigation, and third-most on the logo.  The logo, navigation, and content--respectively--should be placed so that the eye naturally follows them in that order, when first viewing the page.  Because they also increase in emphasis in that order, it makes it easier for the eyes to continue in that direction (like walking downhill or swimming downstream).
Empty space
  • Separate the major page elements--header, side bars, footer, content, and featured content--from one another using empty space, so the eyes can easily identify and group them.
  • Rectangular headers should appear at the very top of the page (no empty space above them; no top margin for the html page).
  • Use empty space above shaped headers.
  • By definition, open headers always have empty space above them.
Balance
  • Use a small amount of light color or dark color for the positive space and let the rest of the page be dark or light, respectively, for the negative space.
Layout
Fixed
  • The width of the content does not change.
Fluid
  • The width of the content changes if the size of the browser window or screen resolution changes.
Usage
  • Most websites use a fixed layout.
  • Relatively few websites use a fluid layout.
Alignment (for fixed layout)
Left
  • The content is horizontally-aligned to the left edge of the browser window.
Center
  • The content is horizontally-centered in the browser window.
  • The horizontal location of the content changes if the size of the browser window or screen resolution changes.
  • For center-aligned pages, if the content of some pages is very short (occupying less than one browser window in height), the content will suffer from horizontal jiggle as the user browses from page to page.  This is due to the lack of a vertical scroll bar in the browser window for the short pages.  To avoid this problem, use an outermost table of 100% height, containing one row of 100% height, and another row of n pixels, so that every page has a vertical scroll bar.
Usage
  • Most websites use left alignment (at least, prior to Web 2.0)
  • Center alignment is common for Web 2.0
Width
  • Most websites are designed so that the content fits within an 800-pixel-wide browser window.
Header
Rectangular
  • The entire header area is filled with a unique background color or pattern.
  • Rectangular headers are well suited for left-aligned pages.
  • Horizontal menu bars are well suited for pages with rectangular headers.
Shaped
  • A portion of the header area, one that curves around the header elements, is filled with a unique background color or pattern.
  • Shaped headers are not well suited for fluid layout.
  • Shaped headers are well suited for center-aligned pages.
Open
  • The entire header area has the same background color or pattern as the surrounding page elements.
  • Open headers are well suited for left-aligned pages.
  • Tab bars are well suited for pages with open headers.
Usage
  • Almost all headers are either rectangular or open.
Text
  • Don't use the full width of the page (or a large percentage of it) for displaying paragraphs of text, as the text lines would become ridiculously long at high screen resolutions.
  • Very-long lines of text hinder usability by causing the text to be more difficult to read; it takes greater effort to read a long line of text from beginning to end, and to locate the beginning of the next line.
  • Limit the display of the text to n-pixels in width.
Articles
Elements (listed in order)
  • Date: small font
  • Title: large font
  • Subtitle: bold
  • Author: small font
  • Text
Content boxes
  • For primary content, clear left and right borders need to be visually established, either by an actual border (or screen border), or by placing boxed elements on one or both sides.
  • Favor using actual borders for side content.
Title bar
  • Generally, title bars are inappropriate for primary content but effective for featured content or side content--helping to distinguish them from the primary content.
  • For content with a title bar, it's helpful to use color(s) from the content for the title bar, reversing the usage of the foreground or background color.
  • For content with a title bar and a border, optionally use the same color for the border as for the background of the title bar.