What is a Design System? Is this a new thing?
Simply put, if your company has a website, an app, and a set of products which involve components like buttons, icons, controls (and so on), and are all related to the same brand…congratulations! You have a Design System in place! It might not be fully standardized or complete, but you definitely have one.
A Design System is a guide or a collection of components which follow a set of rules on how to use them and serves as the source of truth of your product. These elements or components can include fields, buttons, navigation controls, icons, texts, colors and can be as extensive as you feel is necessary to provide the best guide for your product.
Why every company should care about improving their Design Systems
These guides or collections are important for many reasons, depending who uses them, who sees them and who creates them. For consumer-facing products, a Design System is important to maintain consistency across elements and platforms, so users have a clear understanding of how everything works and what behaviors to expect. A Design System also helps build a brand and keep users engage with your product. For those who use and create these collections (mostly designers), a Design System helps a team build interfaces more quickly with pre-defined patterns and elements coming from a single source of truth so everything looks consistent and on-brand. But make no mistake. Reusable UI elements don’t mean the result will be generic design; these elements are the result of carefully designed concepts that convey specific meanings.
Another important thing about having a Design System in place is that it helps reduce design and development time. Since everything will come from a single source of truth when implementing new features, maintaining consistency across the product and development is much easier when this library is set up. That’s also why it’s important to carefully design this system—so in the long run it saves a lot of time.
Types of Design Systems
There are two main approaches for creating and delivering a Design System. In most cases, you’ll follow both of them. These approaches are Libraries and Style guides. A library is the simplest state of your Design System, it’s simply the organization of components by type. This will help you build the actual product and will serve as the source of truth for designers. These libraries will mostly live in the design tool but can also be treated as a simple deliverable of all the UI patterns used across the product. A style guide brings more value to your product or company. This is a more detailed version of a library that includes a full description of why and how to use each component in the collection to help make it easier to use by anyone (in or outside the team). Also, it is a good place to set the tone of the product’s branding—defined by the brand strategy and objectives that impact the use and style of all components in the Design System.
Best practices
Here a quick list of standards to get the most out of your Design System and make your product provide the best experience for users:
- Create a visual identity
This is the first and the most important thing to consider during the creation of a Design System, since it will reflect the objectives of the brand. Some elements include Colors, Fonts, Icons, illustrations, and photographs. - Design all components and controls
All these controls should be aligned with the brand’s identity and will play an essential role in the user experience of the product. As previously mentioned, components include Fields, buttons, navigation controls etc.. - Describe the functionality of all components and your visual identity.
Remember, this is what differentiates a library from a style guide and will make the elements easier to use by anyone. - Organize
The simpler your guide is to use, the better the results. Organize your Design System by specific categories and subcategories (if needed), so people can find elements quickly.
Final Thoughts
If you’re building digital products related to a brand, you need a Design System! A Design System helps your company (and/or product) reduce implementation time, maintain a consistent visual identity, and improve your design and development process.
Enjoy these great Design Systems to start getting your collections on point!
IBM: https://www.ibm.com/design/language/
Shopify: https://polaris.shopify.com
Atlassian: https://atlassian.design
Lastly, if you have any additional questions about Design Systems, or any other aspect of product design, please don’t hesitate to reach out to us at any time. We’d love to help you get started.
Share on
