Website Design Style Guide

Last year, I produced a short tutorial video on how to prepare Photoshop (PSD) files for web production. It’s a quick overview of the process I use to properly set up and organize template files so that Newfangled’s developers can use them to apply the visual design to the site architecture. One of the template types mentioned in the video is a style guide; a very useful “cheat sheet” containing text styles, colors, notations and key design elements that comprise the majority of a site’s design. Since posting the video, I’ve recevied requests to provide an example file that our agency partners (or anyone) could download and use as a reference for creating their own style guide.

Style guides are useful for web designers in developing a site’s look and feel and creating a “language” of design elements and text styles to be used throughout the site and provide a consistent user experience. A style guide is also an important reference for developers as they are building the site and setting up its visual architecture.

There are two files available for download (links at the bottom of this post). One is a layered Photoshop file that is identical to the kind I typically provide our developers. It’s fairly large (6.8MB) and requries Photoshop CS3 or better to view and explore. The second file is a set of screen shots in PDF format of the Photoshop layout. It’s a smaller file size but doesn’t contain any artwork layers. However, it does show some of the hover states and interactive components.

What you’ll find in the Style Guide

This particular style guide example is based on a client site we completed earlier in the year. It doesn’t represent any specific page from the site, but it does contain 75-80% of the design elements found across the entire site, such as:

1) Design elements and content styles grouped in layers, including hover states and interactive features (layers marked in orange) and alternate design elements (layers marked in green)

2) Photoshop “sticky notes” that explain the functionality of different components

3) Notations (in magenta) that define font styles. You may not have these specific fonts installed on your computer, in which case you’ll see an alert message when you open the file. You can simply ignore the alert. The fonts will display correctly unless you attempt to edit the text layers (you’ll be prompted to select a replacement font). Highlighting any of the text with the type tool will reveal the original fonts in Photoshop’s character palette.

I recommend you check out the companion video for some insight on how this style guide is organized, as well as how to create and prep Photoshop template files for web production.

If you have any questions or comments please let me know.

Update: As of September 2014, the layered Photoshop file is no longer available. However, feel free to download the PDF (below).

Style Guide PDF File (1.5MB)