As the design and development teams of an organization grow, there are increasingly more elements that need to be managed, shared, and communicated across teams. These shared resources help ensure work is efficient and consistent across platforms.
Style guides, pattern libraries, and design systems
Style guides have long been used by graphic designers as a way to create and maintain a cohesive visual style. A style guide may include:
Brand colors
Fonts
Logo
Guidelines on usage
Usage guidelines are important with logo design so you know how - and how not - to use the logo. This way you can theoretically share the logo with anyone else and they'll use it correctly. Slack shares theirs online.
Similarly, pattern libraries and UI kits provide user interface components to help lead to more consistent elements like buttons, navigation, and standard features used across projects. The goal of pattern libraries is to break down elements into reusable building blocks. (There's no need to reinvent the wheel each time!). Like style guides, pattern libraries help speed up the design process and foster consistency across work. They're beneficial when new team members come onboard. New employees don’t have to be trained on how to do something, as it should be clear through these resources.
As the field of UX has developed, the concept of design systems has emerged. Design systems unify teams around a common visual language by providing a collection of reusable design components and standards, which include typography, color, icons, and more. It takes style guides a step forward, providing more use and context cases.
Design systems allow teams to create a consistent, cohesive user experience across pages and interfaces. Teams save time by working towards standards that link designers and developers as well as ensure a global vision, look, and style for a product.
Many companies will build a website devoted to these resources, including anything from design elements to code, accessibility standards, and even research approaches. Every workplace has a different way of adapting design systems, so it's interesting to be inspired by what others are doing.
These design systems can help designers and developers navigate the visual and code language of a product. They help provide standards across a product from spacing between buttons, to the HEX color codes used in the branding and look of a product. Making changes becomes much easier and more consistent. As you can see, there's no one correct approach, and design systems are something we can expect to see continually refined and developed. Chances are, if you check these links six months from now, you'll probably discover some new additions or updates.
Let's recap!
Design systems, style guides, and pattern libraries are ways that teams can maintain standards in order to work faster, and have more consistent output.
Many companies choose to share their design systems publicly as a way of teaching and inspiring others.
Design systems are also a way to capture the spirit and communicate the personality of a brand through the elements that make it up.
