Sam Kapila explores what to consider when building an online style guide, and looks at three sites that do it well.
2015 seemed like the year of style guides. While it's awesome to see more and more websites sharing their design guidelines online, there are a few points to consider when creating your own style guide.
First, support your design elements with clear instructions. There are a number of web design style guide examples out there that include all the elements of a design system, but with little to no information about when and why to use them. When it comes to writing dos and don'ts, captions and labels, communicate as if you're leaving the team, but want the system to live on. Share the goals of the system and its elements, and your expectations of what the outcomes should be. Be consistent with voice and tone.
Second, consider the evolution of the design. Include patterns that may not exist now but might in the future. Considering how patterns will evolve helps a design system stay in place longer. Starbucks' older style guide may not include a lot of supporting content, but it does use sample layouts within its grid system that weren't used regularly in the previous version of the site.
Finally, take advantage of the interactive style guide. Build out elements that support multi-device design and the various states of those elements (like hovers on buttons), then design the style guide to reflect those patterns and interactions. When a style guide can show how elements change when a user interacts with them, it adds an extra layer of depth to the experience.
CodePen's guide has multiple button states, a responsive grid that follows its grid system, and goes deep into form validation styling.
Get top Black Friday deals sent straight to your inbox: Sign up now!
We curate the best offers on creative kit and give our expert recommendations to save you time this Black Friday. Upgrade your setup for less with Creative Bloq.
Frontify, a service that helps generate style guides, uses its own product to build its style guide. The result is well-organised, and goes into incredible detail.
Sam Kapila is a designer living in Texas and an instructor at The Iron Yard, an international, immersive coding school. This article originally appeared in issue 277 of net magazine.
