Design each page to use the same basic layout, colors, and
stylistic elements, but give the design enough flexibility
to handle varying page content.
You're building a Web site with several pages, or a UI with multiple
windows -- in other words, almost any complex software.
You want it to "hang together" and look like one thing, deliberately
designed; it should be easy to use and navigate.
When a UI uses consistent color, font, and layout, and when titles
and navigational aids -- signposts -- are in the same place every
time, users know where they are and where to find things. They
don't have to figure out a new layout each time they switch context
from one page or window to another.
Have you ever seen a book in which the page numbers and headings were
in a different place on each page?
A strong visual framework, repeated on each page, helps the page
content stand out more. That which is constant fades into the
background of the user's awareness; that which changes is noticed.
Furthermore, adding character to the design of the visual framework
helps with the branding of your Web site or product -- the
pages become recognizable as yours.
Draw up an overall look-and-feel for each page or dialog in the
thing you'ew building. Home pages and main windows are "special"
and are usually laid out a little differently from subsidiary
pages, but they should still share certain characteristics with
the rest of the artifact. For example:
- Color: backgrounds, text colors, and accent colors
- Fonts: for titles, subtitles, ordinary text, minor text
- Writing style and grammar: titles, names, content,
short descriptions, any long blocks of text, anything that uses
All other pages or windows should also share the following, as
- "You are here" signposts: titles, logos, breadcrumb trails,
and Card Stack indexes such
as tabs or link columns
- Navigational devices: sets of standard links, OK/Cancel buttons,
back buttons, "quit" or "exit" buttons, and navigational patterns such as
Sequence Map, and Breadcrumbs.
- Techniques used to define
- Spacing and alignment: page margins, line spacing, the gaps
between labels and their associated controls, and text and label
- Overall layout grid: the placement of things on the page,
in columns and/or rows, taking into account the margins and
spacing issues listed above.
If you're familiar with graphic design concepts, you may recognize some
of these as comprising a layout grid. A layout grid is a structural
template for a set of pages or layouts. Each individual page is
different, but all pages use specified margins and align their contents
along invisible gridlines. A good Visual Framework does indeed include
a layout grid, but it also includes other aspects of look-and-feel,
such as colors, visual details, and writing style.
Implementation of a visual framework should force you to separate
stylistic aspects of the UI from the content. This isn't a bad
thing. If you define the framework in only one place -- such as a
CSS stylesheet or a Java class -- it lets you change the framework
independently from the content, which means you can tweak it and get
it right more easily. (It's also good software engineering practice.)
From Excel for Windows
The Windows and Mac OS look-and-feels help to implement a visual
framework, since colors, fonts, and controls are fairly standard.
But you need to add the higher-level structure, like the layout
grid and language. These Excel screenshots both come from the same
dialog -- Page Setup -- and they illustrate the concept well. All
these characteristics are consistent from page to page: location of
action buttons in the upper and lower right; margin size, indenting,
and vertical distance between text fields; extension of text fields
to the right edge; the use of labeled separators (such as "Print
titles" and "Orientation") to delimit
Titled Sections; and capitalization and grammar.
Web page designers know how to apply this concept well. Google's pages are
simple and unfussy, but very, very recognizable. All signposts are clear and
consistent -- the logo, the page title and subtitle ("Image Search" and "Groups"),
and the other links -- and the all-important search field is always in the