Why You Need a Design System

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.

Airbnb design system

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, 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.

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.

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.).

Mailchimp design system

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/.

Uber design system

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.

Shopify Polaris design system

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.

No items found.

Ready to learn more?

Running a business is hard,
Software development shouldn't be ✌️

or call  (615) 505 4255