Join Chris Nodder for an in-depth discussion in this video Communicating user experience standards, part of UX Foundations: Style Guides and Design Systems.
- Style guides and design systems are two ways of communicating the standards that you set for visual treatment, written content and the user experience behavior of your products, your website and your printed literature. Their aim is to be the single point of reference for how things should look, behave and sound. A good style guide and design system will prevent inconsistent user experience within a product and across products in an organization. Typically the style guide describes the content and branding aspects and the design system describes the architecture and layout of your digital products.
The style guide says how you should communicate. The design system says how that should look in your apps and on your site. So they go hand-in-hand. Together they provide the single source of truth about how information should be laid out on pages, the way it should look and behave and the tone it should have. But why would you want to do this? There are many reasons. For a start, it presents a unified and clearly branded experience to your customers so that they can easily distinguish your products from other people's.
And so that once they've learned how your apps work, they can take that understanding to other products you create without experiencing any inconsistencies. There are also many benefits inside your organization. Having the style guide and design system makes life easier for developers, designers, content producers and external partners. It communicates design concepts in a way that minimizes the work everyone has to do to make them real. Most design systems at least include code snippets the developers can copy and paste into their work.
Some even integrate with design, prototyping and development tools to build the interface structure in an almost automatic way. One useful way to think about the relationship between the two documents is that the style guide is the summary of all the information in the design system. The style guide is used by people who will be creating content but won't be coding new parts of the platform. The design system uses the same underlying rules as the style guide and expands them to the level where people can create new interfaces based on those rules.
- What is a style guide?
- What are design systems?
- Style guide basics
- Style guide components
- Defining your audience and your voice
- Writing a style guide
- Design system basics
- Creating a design system
- Getting people to adopt a design system and style guide