This Cyber Monday Envato Tuts+ courses will be reduced to just $3. Don't miss out.
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?
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:
- Website layouts and interface design
- Text and image formatting
- Company name and logo displays
- Color palettes
- Code creation
What Do Style Guides Define?
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:
- Mission statement
- Promise to customers / clients / users
- Personality, voice and tone
Branding & Design
Conveying the "identity" to the public through elements such as:
- Color palette
- Logo design
- Overall style
How interfacing with people should occur via:
- User interface experience
- Principles that ensure user focused design
- Visitor flow through sites
Best practices concerning:
- Code formatting and methodologies
- Text / language and image formatting
- Logo usage guidelines
How are Style Guides Applied?
Some of the most common ways Style Guides are implemented include:
- Style tiles
- Pattern libraries
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!