The Second Edition is out!
Visit designinginterfaces.com to read excerpts and learn more.

Visual Framework


From http://zipcar.com

What:

Design each page to use the same basic layout, colors, and stylistic elements, but give the design enough flexibility to handle varying page content.

Use when:

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.

Why:

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.

How:

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 language

All other pages or windows should also share the following, as appropriate.

  • "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 Global Navigation, Sequence Map, and Breadcrumbs.
  • Techniques used to define Titled Sections
  • Spacing and alignment: page margins, line spacing, the gaps between labels and their associated controls, and text and label justification
  • 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.)

Examples:


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.


From http://google.com

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 same place!