How to create StyleGuide for websites?

Creating a styleguide for a website?This situation can come in any UX project so let me help you how to become prepared for the same.A styleguide is the GEETA that is used by developers & visual designers to design webpages.Generally a styleguide will have the below sections.

1. Stylesheets: Explain all the CSS that will be used in developing the website.If possible provide the file location of the stylesheets or even the files in the stylesheet document in the appendix if possible.

2. Logos: Include all the logos that will be used in the website.Provide the actual dimensions in pixels.The position of the logos should be specified in detail.If any writing is done on the logo specify the color of the text in Hex.Last but not least provide the logos file location & the format in which it need to be used i.e gif,png,jpeg etc.

3. Color to use: The color to be used in the website should be specified in Hex, with a shade card view.The colors used for Text,Layout,Body,navigational links,column lines etc should be presented seperately.

4. Templates to use:In case pre defiend tempaltes are present to be used for home page, login page, information page etc... provide template file locations also.

  1. 5. Home page presentation: Include the mission of the home page in short with the complete look & feel of the page.The look & feel will specify resolution in which the page can be best viewed.The page background has to be specified here.Home page- how it looks when the page is resized is also important.

6. Individual page style needs: Divide each page into prominent elements & sections first.Now describe each element with all the look & feel requirements.This section will be the most important as it is very specific to diffrent sections on the page.Include the style, width, images used & color of each elements.

7. Extra elements in the website: Focus on the additional elements present with the description of the elements.

8. Images & VSD: Feel free to include images & VSD in the above sections to make the styleguide descriptive & helpful for the development team.

In this way we can easily prepare a styleguide for a website, the same can be also done for software system however with complete focus on the software elements.

If you need any help & clarifications please mail me:

Read more about User Experience on my other write ups:
Post a Comment