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

Visual Framework



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.


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 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.)


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