What is a style guide ?

A style guide provides the means of documenting basic rules or features that will allow you to ensure consistency in your visual output. It makes your website look and read consistently, translating to a better user experience, higher usability and ultimately fulfils a website’s goals more effectively.

Why would I need one ?

Style Guides

  • Promote consistency
  • Promote modular thinking
  • Add clarity to the parts and pieces that make up your website
  • Increase efficiency when editing a website

What's so special about this one ?

It relies its output on the current skin and theme of your XWiki installation, reflecting styles used all over the website, in one place, so that it would be easier to follow any changes and see their impact without visiting the areas where they would have been rendered.
When it will be completed, content creation as per the layout you envisioned will be as easy as copy, paste and customize.
You have the chance to explore ideas, notice bugs and expand it beyond its current purpose to suit your organization's needs.

What can I find inside ?

Usually you have a good idea of the elements for your design. Whether they are subconscious decisions, branding stipulations or corporate guidelines they all form part of your visual style guide for your website.

This will include the:

  • font styles - normal, bold, italic, etc.
  • colour, size and font for your headings, links, blocks of content
  • the images used for your bullet point lists
  • the size of the images in your site and any associated border around them
  • order lists
  • custom formatting of certain content blocks
  • videos, presentations etc.

Usecase Scenarios

  • Guide for creation of new content by newcomers, according to organization guidelines
  • Common refference for web branding purposes
  • Replacement for Sandbox space
  • Testing and preview ground for your custom skin & theme
Created by Ionut Maxim on 2014/06/13 15:11

Get Connected