Excerpts from the O'Reilly book,
public discussion, and new patterns.
Buy the book

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!