Recently I worked on a web-design project for a content writing firm, Word Quotient. The site is pretty simple, minimalistic style with priority to content. They have a library section there to share their essays and other writings, so it’s going to be frequently updated by future editors. In that case, to make the website stay beautiful & minimal the project demands an interface guideline document. This will help maintaining the brand consistency and interface language.

Here are the important elements which I think are essential to be defined in an interface guideline document.

Layout and Structure.

Layout details such as main frame width, column divisions and precise measurements for fixed width elements (if any) like navigation, header, content area etc. If possible, a logical reason for dividing columns and grid should be provided so future editors can grab the importance of maintaining that structure.

Typography Styles

Web-design is 95% typography, typographic details like typeface, size, color, line-height, word-spacing should be clearly defined for body, paragraph, primary, sub headings and other elements. This helps in maintaining the content hierarchy.

Link Styles

This can be integrated into typography, but if the site uses image or image plus text links, a description of underlining, highlight or other styling patterns is always helpful for further development.

Color Palette

Apart from images, the information about color in design elements and typography should be defined as standards to be used throughout the interface. The appropriate hex and RGB color values are must.

Image Size and styles

In case, the site uses an image header, thumbnails or promotional ad content, image sizes should be defined as standards to be used everywhere in interface. That might also include the image-borders, rollover effects (if any) and color style – black & white, monochrome and so on.
If images use captions, a small description of their typography details and alignment also need to be standardized.

Interface patterns

This will include the linking of internal pages, when and how to use breadcrumbs and guidelines for all other interactive action elements.

Files & Directories

To avoid the clutter in directories a standardize folder and file naming should be defined at the start of project, especially in case of content rich sites.

The proper documentation of project and guidelines really helps the clients and future editors to keep the interface functional and beautiful. If you think of some more elements which should get a place in an interface design guideline document, go forward drop it as a comment with your name.

Related posts:

1. 15+ Must have Web Resources for Designers

Related posts brought to you by Yet Another Related Posts Plugin.