"A style guide is a comprehensive 'living document' that keeps track of all the repeating elements for a project, from branding rules down to the amount of bevelling for call-to-action buttons. They should also impart rules and suggest practices including do's and don'ts. They're also a great place to define the design philosophy for a company."
- Visual consistency – As explained in Web UI Design Practices, style guides help you create a cohesive design that reflects a common visual language. Elements like color palettes, typefaces, animations, and navigation menus all contribute towards a unified user experience.
- Context – Great style guides account for explaining the reasoning behind design decisions. For example, in addition to explaining the technical details for pages with scrolling navigation and those with tab navigation, you should also explain that scrolling are used for storytelling, while tabs are used for product displays.
- Collaboration – Having a set reference manual for each member of the team will ensure that everyone’s on the same page. Collaboration is easier, with less repeated questions and back-and-forth emailing.
- Singular vocabulary — Another collaborative trait is streamlining communication through a singular vocabulary (i.e., defining what a “widget” or a “module” might be). Nailing down proper naming conventions can spare a lot of unnecessary miscommunication.
- Code standardization – Front-end style guides help standardize the (X)HTML, CSS, or Javascript, so designers and developers can see if a new design deviates from established standards. They also help you discover if existing markup easily expanded.
- Consolidation – Designers only need to look one place to reference all components, as opposed to losing time sifting through different notes and questioning which documents say what.
- New employee orientation – Rather than repeatedly teaching new hires the standards, you can send them a style guide for reference as they ramp up. With the style guide as an anchoring document, follow-up conversations will be more meaningful.
- Helps with design decisions — Don’t overlook that the process of making the style guide can draw your attention to some crucial design decisions that you may have otherwise forgotten.
Examples of successful style guides:
It systematically lists out black-and-white details with the corresponding HTML coding, it outlines all the information you need.
Lonely Planet
 |
| Lonely Planet style guide |
No comments:
Post a Comment