fizbits web design style guide

What is the purpose of a style guide?

When you are in the process of developing the brand identity for your business, it can be helpful to gather all your design guidelines and principles into one document, called a style guide. This blog will provide some style guide examples and discuss what is the purpose of a style guide for your business.

Firstly, a style guide can help you to present a consistent and coherent visual identity to your publics. Having a consistent ‘identity’ or ‘brand’ will help to differentiate you in the marketplace and from your competitors.

These concepts might be translated into language for your brand. You might want to develop three to five design principles that underpin your design identity. For example, Spotify came up with the acronym TUNE for their design principles (tone, usable, necessary, emotive). These principles guide each and every design decision that the various designers make. Another example is AirBnB, whose design principles are “unified” “universal” “iconic” and “conversational”.

This can be helpful because it connects the fundamental values of your company to decisions in design day to day so that the design of your interfaces or materials reflects the core value of your products or services. It is tricky though! To translate words into a visual identity!

Elements of a style guide

The difficulty in transforming words into pictures is another reason why it would be helpful to get a style guide developed for your brand or business. It will give you clear guidelines on what your identity ‘looks like’. A palette of colours, typography and graphics can really help when you want to develop or design marketing materials. Consistency is key. Especially in branding exercises, when you want your potential customers to associate your brand with the product category.

Typography

It is important for your designer to determine the typography of your website and to stipulate the style of each of the header tags and body text.

This is an example of the typography part of a style guide:Style guide with typography and colours

Colour palette

Your colour scheme will probably have a dominant colour. It should have no more than three shades. However, you may need secondary or tertiary colours in your colour scheme. Don’t forget to include neutral shades such as grey, black and white to highlight your primary colours.

For a more complex colour palette, check out Airbnb’s style guide:airbnb style guide with colour palette

Photography

You want to choose and use photography that has a certain style and direction and stick to the same kinds of imagery for your website. You might find that your branded product imagery sets the tone for the rest of your style guide.

set the tone of your website imagery - green, grey and blue grafitti with lemon bush in front for Fizbits

Voice

When representing your brand on social media or another public place, including on your website, it can be useful to think about what kind of ‘voice’ you want to use. For example, a corporate website would not use colloquial English or make a joke, whereas a younger, more trendy brand may indeed use these forms of language.

Other style guide elements

Other elements that you or your designer can define in your style guide are forms, spacing, icons and buttons. You might find it useful to have a do’s and don’t graphic to give to your employees or to reference when you are designing marketing materials to give you examples. For an example of a great style guide see the Spotify style guide here.

logo usage don'ts for a style guide

I think that the process of developing a style guide with your designer and getting clear about the desired style of your interfaces and materials can really help you to develop your brand personality. If developed effectively and used consistently, it will also enhance design harmony across your materials.

Example of style guide by Fizbits Web

Here is an example of a style guide that Fizbits created for the business My Soul Gardening.

My Soul Gardening - brand identity

It becomes easy to see what is the purpose of a style guide for your business when you look at this complete picture. It will help the designers and developers to use a consistent visual identity in all their touch points. And this articulation of their brand identity will help to provide a consistent and coherent personality of the brand.

No Comments

Post A Comment