This week the Tuts+Web Design team is bringing you an in depth series of pieces on the wide world of Style Guides and all the moving parts that go along with them.
The term “Style Guide” is very broad and can encompass several different areas, potentially covering everything from company branding, to interface design, to coding methodologies and more.
To get the ball rolling on our Style Guide week we’re going to simplify things a little bit. Let’s start with the most fundamental question: what is a Style Guide?
In a nutshell, a Style Guide is a set of standards that apply to the creation of text or design based assets for an organization, a publication, or a field.(1) It is a comprehensive reference of DOs and DON’Ts which ensure content is produced in a consistent manner, in keeping with the goals of that organization, publication or field.
The types of assets Style Guides can relate to vary widely, and outside of web design can cover everything from print material to apparel. However within the world of web design Style Guides are most commonly constructed to determine how we work with:
Every Style Guide is unique and you’ll see different things defined in each one, however the content will generally fall into the following four categories.
Who is behind the content? Identity forms the basis of branding and can include:
Conveying the “identity” to the public through elements such as:
How interfacing with people should occur via:
Best practices concerning:
Some of the most common ways Style Guides are implemented include:
Oftentimes these elements make their way into Style Guides for the sake of keeping things in one place, and sometimes the terms listed above are even used interchangeably with “Style Guide”. However, while some crossover is generally considered acceptable, strictly speaking a Style Guide is all about defining rules and principles and their actual execution is a secondary stage.
Stay tuned this week to learn how to create and execute your own Style Guides, to help you put out a clearly defined and consistent public face for both yourself and your clients!