Creating a website designing style guide

A primary objective of any website design is to make sure that it looks different yet chesive. A lot of money is spent by corporates on a definitive style. For example amazon has a certain look and feel to its websites. The entire website user experience is circled around predefined colors and patterns. These patterns not only help in creating a recall value but they are also beneficial for a great user experience. This is important for the regular users. People start to remember the icons, the website url routes etc. IT is important to create a web design style guide to achieve the said objectives.

So what is a style Guide or Website Designing Documentation ?

Well it’s a collection of predefined elements, graphics and rules to be followed by designers and developers to create a consistent and cohesive experience.

Why it matters ?

Simple because its gives a seamless user experience. After all all the websites are built to ensure easy user experience. If a user hops on to a different font size every time, it creates a disconnect in his mind and he begins to disassociate with the brand identity. Also from a third person perspective, it is important. Whenever there is new development on a website, the developer should have a definite guide on styling the elements.

How to create a website designing style guide ?

1. Existing guidelines and Inputs

The first thing to lookout are the values the brand represents. May be their vision and mission will give you an idea how to start the process. For example a brand that sells organic vegetables and fruits would like a more earthen look and feel on the website. If possible, it is important that an HTML document be created with different elements to that it can be reused.

2. Typography

Font style is the most important communicator between you and your website. Not only font faces, you need to define the hierarchy like how the H1, H2, H3 should look like. Also copy text should also be accounted for weight and color.

3. Colors

Colors create an image in the mind of the end consumer / customer. Think of fruity a popular beverage. I bet you see that yellow color right now. Again you need to set both primary color guide and secondary color guide to bring out your user interface. Also primary colors should be dominant than secondary colors.

4. Text

By text I mean the tone of the text. For example, a brand that sells creative assets online such as envato, a 404 error copy could be something like ‘you have ventured too far out in the desert’ could be more punchy and creative. If the tone has to be more corporate it could simply say ‘No results found, contact us for any help’.

5. Icons

A picture is worth a thousand words is such an apt description of an icon. Icons give your visitors an instant context about whats going on. When using icons, think of the audience, history, brand identity, logo outline etc.

6. Images

Again, we need to see what the brand represents. For a recent project we used mountain images, for the brand wanted to represent SHIMLA city and how they built an entire corporate mammoth by utilizing the manpower from Shimla. They also wanted to highlight how they are able to bring employment into the city with their initiatives. Think of the emotion or connection the brand wants to portray.

7. Form Elements

Forms are one of the most important parts where the user interacts with your website. For example login/logout, cart quantity, contact us form etc. Make sure the colors are start when communicating and error and the message is mellow when communicating a successful interaction.

8. Buttons

Buttons are another way to represent brand value. Primary colors can be used in buttons. Care must be taken to ensure the button borders, colors align with the brand values.

9. Spacing

Space between different elements also contribute towards the over all design. Websites of famous luxurious brands have lots of negative spaces to bring out a premium feel of the websites. Correct spacing between elements can make your website look more professional.

10. Common Mistakes

You can define the donts here. They are like the common things that should not be done by designers. For example never rotate the icons, never add extra elements to existing brand assets.

Lastly I would say style and consistency are the key to get things right. Make sure different parts of the design fit together correctly. Also try to be as wide as possible. There can be hundred different scenarios where a guide would help.