How to create a Style Guide with ease

Style Guide! what are they?
Style guides are important artifacts that are the byproducts of a well planned design work. They are made in order to provide a consistent User Experience throughout the application. In most of the cases they serve as a guide book for designers. It can be advocated that a single software/application can lead to a varying degree of User Experience by applying two different style guides for the same software. Here I will provide a view on how to create an effective style guide. Style guide creation is a good practice, we have heard this slogan many times. Now let us try to create one of these.

Style Guide Shouts about
In most cases a style guide turns to be a word file that illustrates the following aspects of a website/web application pages.

1. Real estate content area distribution
2. Types of pages
3. Branding guidelines
4. Error messages
5. Images used
6. Colors
7. Typography
8. Page Elements description
9. Other( Page Behaviors etc i.e. change of page color on overlays etc)

The style guide is used as a reference by design teams as a torch to provide a consistent user experience to its users. It guides them in knowing what typography to use, what are the sizes of icons, how the pagination should look etc.
Now let me illustrate each section in brief with simple examples which will provide a thought through to come up with style guides when you are designing the new applications.

Style Guide walk through – are you ready
Provide a small description about the style guide showing its relation to the software/web application. It will have a small description saying this style guide is of “XYZ web site” communicating its design elements, navigation, color combinations, branding etc. It will be used as a guide to design/modify the application etc. Now work on each section with a crisp brief as shown below.

Real estate content area distribution: In this section illustrate the real estate area utilization scheme. Show how the page area is divided into different sections as header, footer, global navigation, secondary navigation, add areas ETC.

An illustration is shown below (It is an example)

Types of pages: This section encompasses different types of pages the application has. In general most of the web applications have these 4 types of pages
1. Home/Landing page
2. Main Section specific pages
3. Sub section specific pages
4. Task/Transaction related pages Branding guidelines: Each organization has its own branding guidelines that should be followed. These can be the company logos, the action buttons, the color combinations, the taglines etc. The branding will have the below important elements(Its up to the designer if he want to focus more on each element in the branding guidelines, well its a good practice to know each element with respect to branding essentails of the company)

1. Logo usage

2. Tag line

3. Imagery

4. Color

5. Language The company logo is always displayed on the top left corner in 30 X 40 pixels.

Tag Line example
a) Underneath the Evo text, when the Evo text is used alone.

b) Spaced alone, provided that the Evo house icon and/or text appear
on the same page.

Imagery example
Include the images that are approved by the stakeholders for different sections. It will have different banners, product images etc.

Error messages
Include the error message notification pattern. The color combinations used to inform the user the different types of errors. It also includes the place where the error message is displayed.

Error message example

Colors: In this section include all the colors that are used in the web site/ applications etc with their hex values.
Typography
Include the different types of fonts used for different sections of the web site. It includes the typography used for main section, the content, the header, buttons, footer section etc. It should provide even the colors of the mouse hovered texts.

Page Elements Description
Describe the elements that combine together to form a page. A page element can be the icons used, the tables used, the instructional messages, the approved images etc.
Icons used example Table design
Write the specifications about the table design. This will have illustrations on the color of table and the typography used in the tables.
Table example
Table color
The table line: # d7e7ef
Column header color: #464646
Table filled color: #ffffff

Table typography
Header text: Arial , 14 #ffffff
Hyperlink text: Arial, 12 #95c0d5
Inactive links: Arial, 12 #999999

Others: In this section you can illustrate how the page behaves when an overlay is displayed. The color of the overlay etc. You can include those sections that may not fit in the above main areas.

Once I want to highlight that the style of style guides may vary from designers to designers however their essance is covered above. Hope this helps to tweak some thoughts to come up with an effective style guide.