UI Patterns and Techniques

Visual Framework

From http://macromedia.com
Use when:	You're building a Web site with several pages, or a UI with several windows -- in other words, almost always. You want it to "hang together" and look like one thing, deliberately designed; you want it to 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. 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, if you add enough character to the design of the visual framework, this 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're 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. Color: backgrounds, text colors, accent color, etc. 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, Card Stack indexes such as tabs or link columns. Navigational devices: sets of standard links, OK/Cancel buttons, back buttons, "quit" or "exit" buttons, Toplevel Navigation. Techniques used to define Titled Sections. Spacing and alignment: page margins, line spacing, the gaps between labels and their associated controls, 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. Implementation of a visual framework should make you separate stylistic aspects of the UI from the content. This isn't a bad thing. If you define the framework in only one place -- a CSS stylesheet, a Java class, etc. -- it lets you change the framework independently from the content, which means you can tweak it and get it right more easily.
Examples:
From http://google.com Web page designers know how to do this well. Google's pages are simple and unfussy, but very, very recognizable. All the signposts are clear and consistent -- the logo, the page title ("Image Search," "Groups"), the tabs, the other links -- and the all-important search field is always in the same place! Note also the use of Color-Coded Divisions to distinguish one section from another.
From Excel for Windows The Windows look-and-feel (or Mac OS) helps to implement a visual framework, since colors, fonts, and controls are fairly standard. These Excel screenshots come from the same dialog, but they illustrate the concept well -- note the consistent location of action buttons in the upper right, the margins and alignment, and the use of label/separator pairs to delimit Titled Sections.