The Visual Style Guide

Following up on my earlier post about the UX Team, I'm currently collaborating with a graphic designer at work to put together a visual style guide for my web-based application.  It's intended to be a reference for our developers, showing how all of the visual elements work together and supporting consistency throughout the application. A visual style guide often includes specifications (with examples) for the use of logos, typography, color, layout, and navigation.


It has been a while since I sampled the internet for examples of this type of documentation, so I spent some time this morning googling around and found the following resources:

• Yale Visual Identity: This is a classic example of a visual standard that typically comes from a marketing department and specifies how to use a logo, color and typography in printed products and online to best communicate a particular brand.
• SAP Interaction Design Guide: A comprehensive guide that includes logo, typography, layout, navigation and much more.  The guide seems a bit dated, but is an excellent example of the type of content that you'd like to see in a full featured style guide.
• BBC Global Experience Language: An extensive reference similar to the SAP guide above.  This guide also specifies a particular layout grid and examples of how the various visual elements layout on the grid.  Interestingly, I find the printed version to be much easier to use.
• New School Web Style Guide: A good example of a much smaller, but still useful visual style reference.  You could produce something like this quickly and then iterate on it as needed.
• UX Guidelines for Metro: Metro is a design language created by Microsoft used in Windows Phone and Windows 8.  The project I'm currently working on uses Microsoft Silverlight (but not Metro), so I'm interested in looking to see how this might apply.