Style Guide Template
Recently a discussion on the STC Usability and UX discussion group allowed me to share my thoughts on Style Guides. Below is an excerpt from my post to the list on that subject.
———————————————-
Every style guide is different – below is a list of contents that I prefer to use when beginning a web site style guide. With every style guide I find that I need to include different levels of detail and many times the end product does not match what is below. When a lot of technology or standards need to documented I put them into an Appendix or a completely separate document.
Brevity and usefulness is key. Make supporting documents that can be easily referenced for colors, fonts, etc. – that will help to encourage adoption by your team. Test the documentation with developers, project managers, etc. to make sure you have created something they will use.
I have seen beautifully done 10 page style guides. Don’t provide a book – just give them what they need. Work with a designer if possible to make it as attractive as the work you are documenting.
———————————————-
Style Guide Contents
1. Introduction (1 page or less)
- Project Description
- Document Purpose
- Overview of Design Direction
- Definitions
2. Standards and Guidelines (refer to other documents as needed)
- Site Wide Guidelines
- Document Guidelines
- Application Guidelines & Requirements
3. Site Structure and Organization (keep structure separate from design when possible)
- Page Structure
- Page Titles
- Heading Tags, Keywords, etc.
4. Page Layout and Templates (specify for: Home Page and Landing Pages; Non-Landing Page; Error Pages; Header; Left/Right Column; and Footer)
- Width and Length
- Areas for text vs. words
- Areas for Site Elements
5. Standard Site Element Specifications
- Header
- Main Navigation
- Left/Right Column
- Footer
6. Site Design and Appearance (more likely to be changed than the previous items)
- Standard Style Sheets
- Color
- Text Specifications
- Application Look & Feel Guidelines
7. Content
- Abbreviations and Acronyms
- Links
- Home Page Content
- Multimedia
8. Modification History
9. Appendix A: Additional Resources
10. Appendix B: Accessibility Resources
TV Calibration Screen