Creating Continuity With a Style Guide

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)

image of a basic colour palette and an extended colour palette including tonal variations
Extended Colour Palette – found at: Digital Color Theory

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: