How to Prepare a Style Guide for your Website

The Necessity of a Style Guide

A style guide is a document that prescribes the 'style' or standard format for your website. It lays down common guidelines for formatting texts and images, use of color and fonts, logo variations that can be used, etc. The general idea here is to:

1. Create consistency across your website

2. Creating guidelines that can serve future partners taking over from you

In big (and some small) design companies, a website cannot be created without a style guide to back it up. It’s a communication document that levels out the expectations of all those involved in the project. It’s also a way of making sure there are no surprises in the end. Even if you're not working in a team, a style guide can make your life easier. It is a crucial step towards creating a successful professional website. It’s the touchstone in the process that will keep you focused and help you achieve a more cohesive design.

The Wix editor offers endless possibilities, making for an exciting and refreshing design process. But watch out! This wealth of design possibilities can just as well throw you off track. A style guide will always help you steer back into the right direction thus saving you a lot of time. By creating a style guide you are effectively establishing rules that will make the design process more efficient and help the final website achieve its purpose.

How to Prepare a Style Guide

Before approaching the editor grab a pencil and paper and construct your guidelines. Web guidelines keep everything consistent, from button styles to navigation structure.

Points to Consider When Preparing a Style Guide

1. Prepare a color sheet- what are the tones you would like to use in your design, and what is the color scheme of your website? A black and white concept with brightly colored text? Solid black background with neon colored elements? Lay out the colors together, when stuck or lost. It can be very handy to refer to your pre-planned guide.


2. What fonts will you be using? Usually no more then three are needed. Find combinations of fonts that work for you. Decide what font you'll be using for titles, sub-titles, headings and main text. Will you be using Bold or Italics for titles?


3. Think about the grid and layout of the website. This determines where elements will be placed. Prepare some generic templates that you can use when designing. A good grid is the key to a good website and will ensure consistency.


4. Have a look at your navigation structure and organization of relevant materials. Map out the information you want to display on your website - this is where you name the menu options. Menu options may include headings such as home, about, contact, gallery, portfolio (perhaps with sub categories), links, comments. Will you be using an intro page? Or use more then one language? This is the map of your website, it will ensure that your web site has an appropriate structure and will help you lay out all the materials you need to prepare.


5. Prepare the text you'll be using. Think of key words you need to highlight. Gathering all the text at this stage including contact info and picture captions will be a huge time saver when you get to building your website.


6. What images will be displayed? Are they ready to upload or are compression and editing needed? Decide which image goes under what tab and if captions are needed. How are the images going to be displayed? Perhaps with a consistent frame around them? If you have a gallery of some sort, plan out the image categories.7. Consider your use of graphic elements. This is where you decide whether and where to incorporate them, and how and where your logo will be integrated.



You may find it helpful to have the editor open and play around with different options. Make sure to transfer your decisions to the style guide, so you will always be able to refer to it once you start building your website.

The best thing about a style guide is that it's transferable- it can be applied to all your publications. The effort you put into the style guide will definitely pay off when you'll see you can apply it to any other form of communication you use: email marketing, blogs, business cards - your company now has a strong unified style.

Remember the document you produce is not set in stone, you can always make changes and update it!