A style guide is a commitment by a company or brand to a consistent visual and written language. A style guide ensures that a project has a consistent use of colours, fonts, images, logo treatment, language and other stylistic elements that should ensure a project with a convincing style, feel and look.
Why a Style Guide?
If you are not accustomed to communication design you might ask ‘why create a style guide?’ Well, there are many reasons that speak for a style guide. It is an excellent communication tool within the project team or with the client. It will ensure consistency in style between different individuals, so if there is a change in staff it should not affect the style. It is a commitment to pinpointing the style necessary to create a visual language that appeals to the target audience.
Software for Style Guides
Recommended Software
You can create a style guide in a large variety of software and this list is not complete. I highly recommend to use a software program that was built for preint, communication, digital or graphic design, such as:
- Adobe InDesign
- Adobe Photoshop
- Adobe Illustrator
You could as well use Adobe Dreamweaver, Fireworks, Flash or similar packages. Corel Draw or PaintShop are good options. You could also use Keynote (Mac only) or Microsoft PowerPoint and most other basic word processing software, e.g. MS Word.
Cloud-based Software
Frontify features a free cloud-based style guide creator that allows you to invite visitors, able to view, but not to change aspects. The good thing about this style guide creator is its simplicity. You just need to confirm colours, fonts, etc and Frontify will do the rest for you.
Pixlr is a free online editor of a high calibre. It allows you to create a style guide from scratch, but you need to create everything and define the layout. It is also available on tablet for free (Android and iOS). Click the first link (name) to get directly to the online editor or click below to go to the Pixlr site.
Examples Below
Konigi has a broad selection of style guides that are very high end.
Find examples of UI Style Guides at Script Tutorials
Try the UX Bookmark has another extensive list of style guides.
Still not sure if you need one?
Read Do You Need a Style Guide on Designshack to evaluate what a style guide would do for you.
Provide an Extended Colour Palette, that should include hex colour codes and/or RGB codes for Web and digital projects. If your project applies to print a well, you will need to include a CMYK code.
Hex code: #000000
RGB code: RGB (0,0,0)
CMYK code: CMYK (0,0,0,0)
Federico's Reader 