.webp)
What is a Design System?
"A design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications."
- Will Fanguy (InVision)
As the quote above mentions, design systems are a collection of components and standards that guide them. When done correctly, they become an important part of any brand.
If you build an app or website following your own design system, there's a better chance users will associate the design with your company. For example, below is an example of typography/color schemes for Airbnb's design system. If Airbnb deviated from their system anywhere in the app, it would look "off," and users would feel it.
The Benefits of Design Systems
Faster Iteration
If you have a design system in place, you won't have to make huge design decisions as you create more designs and features. You'll already have a library of components, free fonts, colors, font sizes, etc/ to choose from, saving you time and letting you focus your effort on high-level design decisions.
Seamless Collaboration
If you are working on a team, having a design system in place helps make collaboration more seamless since everyone on your team has a common language and guidelines to work off of. No more having to go in and correct people to fit the "feel" of your app. On top of that, if you invest in a logo maker and get an attractive visual of your brand, it will stick in the looker's memory for a long time.
Design becomes part of your brand
If you have a good design library that you consistently follow throughout your website and apps then it becomes part of your brand. When people see a Google product, they can tell by things like colors and buttons that it is a Google product. If done right, your users will better remember and recognize your brand. By investing in brand design, logo generator and logo animators, layouts, and styles, you ultimately invest in building brand recognition.
Examples of Good Design Systems
MailChimp
Mailchimp has a great design system that is publicly viewable (https://ux.mailchimp.com/patterns/color). It outlines their brand colors, typography and even gives you the code for each of their components (buttons, input fields, etc.).
Uber
Uber has their own design system called BaseWeb. It's a collection of web components that anybody can utilize. They even allow you to edit the library to fit different color themes that your own brand might have. Check it out here: https://baseweb.design/components/button/.
Shopify - Polaris
Shopify's design system, https://polaris.shopify.com/, is publicly available and even has a React library so you can integrate their design system into your own apps. Granted, the reason that they and many other companies release these systems are so that if you choose to create apps/plugins around their platform they can fit the look and feel that they are going for.
Why You Need a Design System
Design systems help you standardize your building blocks around a set of guidelines, helping you iterate faster, collaborate more seamlessly and even start establishing a brand identity around your design.
Companies like Airbnb, Shopify and Uber all have their own designs systems to help guide their product development and even have publicly available versions so that people developing for their ecosystems can follow along.
If you are serious about design and have the resources, investing in a design system is a great step to take! Feel free to reach out to resources@aloa.co if you need help getting started.
