Perfect design
Good design systems can help you create digital products efficiently and consistently. But great design systems will support and empower your team's creativity at the same time.
Being a relatively new concept, there is no one true way to implement design systems yet, but many major companies have started creating systems for their teams and are already reaping the benefits.
Learn everything you need to get up and running with Design systems in our free course!
Table of contents
What is a design system?
A design system is a tool. We can think of it as a set of reusable components that are guided by a set of standards. You can then use this set to create any number of applications.
Now, because this collection is guided by standards, designers and developers will have an easier time building your products.
Designers don't have to guess every time they need to design a new component or a new page, they can simply refer to this system. Developers don't have to create components from scratch every time. Everyone involved in the project can refer to a centralized map of components, ideas, and guidelines. The design system ensures that any new products you develop are in line with your brand identity.
Style Guide vs. Design System
Is a design system equivalent to a style library, a schematic file, or a style guide? The answer is no.
A design system is all those and more. As Emmet Connolly, Director of Product Design at Intercom explains:... Most design systems are really just pattern libraries, a big box of UI Lego pieces that can be assembled in near-infinite ways. All the pieces may be consistent but that doesn't mean the combined results will be. Your product is more than just a pile of reusable UI elements. It has structure and meaning. It's not a generic web page, it's the embodiment of a system of concepts.
A design system is a collection of assets and a set of standards and documents that accompany that collection.
A style library is a collection of components and instructions for using them. A style guide is a collection of instructions for styles of drawings, typefaces, colors, images, etc.
In a design system, you'll find examples of how to use each component or graphical style along with accessibility information, best practices, and guidelines. This is the difference between a style guide or style library and a full design system.
Free Course: Introduction to Design Systems
In this free short course, you'll get an introduction to what design systems are, learn about the benefits, see some examples, and also learn the first steps to creating one. By the end, you'll have all the information you need to create a design system for yourself or your team.
Expressive Design Systems
in Expressive design systems Yesenia Perez-Cruz shows you how to build useful, dependable systems that not only maintain consistency across your products, but are also flexible to accommodate inspiration and experimentation. Learn how to communicate your brand, collaborate across teams-and do much more than standardize components.
WordPress design
In this course, you'll learn the basics of WordPress theme design, but with a twist. We will approach the process from a "design system" perspective.
Instead of designing the theme page page by page and button by button, we'll start by defining some basic parameters: Colors, typography, spacing, and scaling. Based on that, we'll design basic and advanced styles and document them along the way.
As a demonstration of how to use the design system, we will then design a full page: Index. By following this process, you'll then be able to design your own pages in a consistent and efficient manner!
Atomic design
Atomic Design is a book by Brad Frost that details everything that goes into creating and maintaining robust design systems, allowing you to roll out higher quality, more consistent user interfaces faster than ever before.
This book introduces a methodology for thinking about our user interfaces as thoughtful hierarchies, discusses the qualities of effective pattern libraries, and presents techniques to transform your team's design and development workflow.
Design System Examples
Many large companies create design systems to allow their teams to collaborate and create apps and experiences efficiently. Let's check out some design system examples!
Polaris Shopify
and Polaris System Design It was created by Shopify to help them work together to build a great experience for all of Shopify's merchants.
As you can see, the Shopify design system isn't just pattern libraries and style guides, it also includes information about the content, such as voice, tone, naming, and vocabulary. And for each component you'll find examples of how to use it, accessibility information, best practices, and guidelines.
Materials from Google
Material is a design system created by Google to help teams build high-quality digital experiences. It's powered by open-source code, and was created as a way to standardize their product line across platforms.
They created a visual language that ties everything together. They've included a style guide, components, icons, accessibility guidelines, and even tutorials designed to help developers implement the material. They go into extensive detail about each component. How do you use it? What are the best practices?
Government of the United Kingdom
GOV.UK is one of the best examples of consistent and effective design. And GOV.UK system design is the foundation and the main reason for its success.
This design system example shows anyone working on a GOV.UK service how to make it compatible with GOV.UK. It was created to help designers and developers avoid duplicating work and build on research done by other teams.
It's also an excellent example of how to use styles and go beyond creating a style guide or component library. And GOV.UK Library Patterns It covers everything from asking users for addresses, to when and how to ask users about gender or details, including gender on how to avoid using pronouns and why you shouldn't use addresses to guess gender.
