navigation home navigation navigation contact navigation navigation faq navigation
style guide for the web

| style guide of your web site

when properly kept it shows the past and present of your corporate brand development on the Internet and provides guidelines for all participants of a web project, be it the designer, the programmer or the marketing department ordering banners or podcasts.


What is a style guide?

The style guide houses all relevant standards, requirements, and recommendations surrounding your brand. It covers the tone of voice, the visual presentation and all implementation aspects, specifications, attributes and elements, summed up and necessary to present a brand consistently throughout all media.

It is a complex, detailed document that attempts to meet the needs of a range of users. It has different main chapters such as the stationery, the corporate web site, the advertisement material ( brochures, flyers, billboards, story boards etc.).

The style guide is a living document and needs to be updated when changes such as re-branding, adding new sections to the corporate web site, using media channels that have never been used before, take place. It is a complete guide to understand your brand, its implementation and how to communicate it.

Why does a web site needs a style guide?

The brand identity and brand essence is documented in the style guide. A strong brand has a definite personality and it is on this personality that customers base their opinions and eventual relationship. In order for your brand to build a strong online brand, the personality traits and attributes on which the brand is built must be documented so that developers, graphic artists and marketing and communications specialists understand and comprehend why they have to comply to these standards and why they have to use for example specific color codes or imagery and how the structure of the pages is built by code and stylesheet.

The logo as example

We are often approached by students to give them an example of the logo in a style guide. This is however confidential information and for internal use only and is not distributed..
The logo position, its size, the background color are documented. The exact pixel size of the margins, surrounding the logo and the file format in which it has to be saved, before it will be ready to be embedded into a page. The quality of some logos deteriorate when saved as a .gif file. If this is not clearly stated the graphic designer will probably save the file as a gif file, when a transparent background is required and not as 24 bit .png file, which in this example should be the standard file format.

All this is clearly stated in the style guide, it saves time during development of new graphics and images and clearly describes the positioning of the brand elements on a web page. The size and compression values of images are documented when optimization takes place for the Web. Quality of the presentation of the online brand therefore stays constant and is guarded when using and following up a style guide.

The importance for maintenance

Maintaining a web site requires that the consistent look of the site and its templates will not be disturbed when implementing new text and images or when pages are added. Forms should be displayed as required with the correct font size and colors, margins and padding. On the Internet we can witness lots of web sites that show that there are no rules applied what so ever to keep consistency. The style guide delivered with a web site project will tell the developers exactly the hexadecimal color codes that need to be used, the font size and font-family. All details are recorded and can be found in this guide, either present in digital or printed form. For maintenance purposes or when a new web site is designed and built, we can draw lots of information from it such as used font and applied styles and to which sections only. Therefore, do not make a header Italic when this is ruled out in the style guide.

Updating a style guide

There comes a day when a question arises which cannot be answered by the style guide and a new section is added. This would describe how the new situation should be handled properly. This is also the reason why we refer to the style guide as a living document. As long as the web site exists, the style guide will grow. The Internet progresses with such a speed that upgrading web sites to the latest versions of scripting languages and adding new functionality takes place in regular cycles. The realization that a web site is in that sense never finished but an ongoing process of updating and completing it, is often not realized by the web site owners. In fact all web sites older than 2 years are in need of a thorough re-design and an upgrade to the latest versions of scripting languages.