How to Create a User Interface Style Guide

I frequently peruse for tidbits of inspiration. There are so many more beautiful, competent site designs than there used to be.  Setting aside a nice design and well thought out code, there is a common thread to be found that ties all of them together. They are all new.

Along with site design that is lean and beautiful come a few frustrations, however. Many designers find that after publishing an elegant user interface, they return to their client’s site a few months later only to find it cluttered up with gaudy graphics and inappropriate colors.

One of the ways to keep this phenomenon under control is by providing good documentation. User interface documentation provides guidance on how to maintain the design and update the user interface while keeping it clean and beautiful.

Create a User Interface Style Guide to Set Up Standards

Design and Brand Standards in a “Style Guide”

A “style guide” is a document used to communicate standards for branding, color, typography, and the arrangement of white space. The User Interface Style Guide can be the developer’s way of helping to keep the user interface consistent as it updated over time.

Good design is always straightforward, intuitive and informative. While giving detailed information, it also needs to be clearly understood and no more verbose than necessary. When formulating a “style guide” document, consider the following.

Composition and Layout
Your site is likely to have pages that are a variation on a theme. Define what these variations are and how they are to be used throughout the web site. Show wireframes to illustrate these variations.

The User Interface Style Guide is a good place to spell out the typeface standards for the site design. Generous use of illustrations would be appropriate to help everyone involved understand the use of placement of text, fonts, font sizes ad colors. Be sure to include the standards to be applied to promotional graphics. It is always good site design to spell out alternate typefaces for users that may not have the font that has been declared in your design.

Generally speaking, good web site design portrays a consistent flow for the users to experience. This includes¬† image sizes. Therefore, it is important to define the standard image sizes to be used throughout the web site. It is very important to the aesthetics of a pleasant web experience to keep a reign on promotional banner graphics. Spell out what images are appropriate, how they should be aligned and how captions should appear. This is an area that effects the “mood” of you web pages so be sure to indicate what type of images may be used and who approves them. Icons, although small, play an important roll in your sites branding and navigation. Be sure to make all the needed specifications for these as well.

Color Palette
After spending hours designing a good color palette for your site, it is important that everyone who affects the site’s content respect it. Illustrate the color pallet of your web design so there is no doubt how you want it applied thought the user interface. Using exact color codes along with swatches of the colors and their appropriate locations will help avoid confusion. Screen shots are a great way to get the idea across.

Guidelines for the Brand
Aside from color, images and typography, other factors affect the brand (and other branding elements). Did you specify the appropriate white space surrounding the logo? What about what happens when the background color changes? Specifications for these elements of the user interface design should really not be left to chance. Be sure to spell out guidelines on where on the page the logo should consistently appear.

Keeping Track of Development Standards
Working as a team can be a great experience. Personally I love to be influenced by the best practices of expert site designers and specialists. The unique qualities that each of us have, make collaborating on a project synergistic. With individuality comes differences in style. A style sheet is an excellent way to coordinate the efforts of the development team. Clarify how (X)HTML, CSS and Javascript should be used as the user interface is developed. Help each team member appreciate which standards should be used, what DOCTYPE to use. Very important, often overlooked issues include naming conventions and file directory structure. Well thought out naming conventions can prevent a lot of confusion and save a lot of time if adhered to.

With a clearly documented user interface design, the look and feel you worked so hard to design has a much better chance of surviving. So try using a User Interface Style Guide for a consistent long lasting design.

Leave a Reply

Your email address will not be published. Required fields are marked *