Design systems are becoming increasingly popular for companies to adopt and share with the general public. With many of the major platform brands like Google, and Microsoft making their design systems public, there has been an increasing amount of exposure for the concept of not only creating a design system but making it available to the world at large.
The rapid pace at which technology on mobile and the web has been advancing has made it increasingly important for brands to define what makes their brand unique, and what properties need to be shared across the various platforms and experiences they offer.
Enter the design system.
What is a design system?
A design system helps to identify the key components of a brands design. At its very core, a design system is a set of rules and constraints that a brand must follow to maintain a consistent version of itself across devices and display mediums.
Color, animation, illustration, typography, tone, and how data should be visualised are all part of a brands design system. These key components are the core of the brand experience for a company, and they will ultimately define how an app, website, document, presentation, or report will look anywhere it is displayed. This kind of consistency helps to maintain brand identity, and it also helps to streamline the development and design experience.
Why is component design important?
A component design has become increasingly important to modern day brands. With many brands like Google accelerating in growth and expanding into different markets with new product launches and acquisitions it becomes essential for brands to maintain their identity and high standards of design. Without consistency, large teams might have vastly different priorities when it comes to design, and you would soon see large disparities across related product groups and teams. This could adversely affect the end users of products, as well as the efficiency of internal communications.
When designers and developers have a shared set of architectural components to work from, it becomes a lot easier to iterate on designs, complete development, and maintain high standards when it comes to product releases and communication with customers and stakeholders. There is a distinct benefit to the people who interact with the components and the business providing the components. Increases in efficiency and clarity improve communication and help to save time across the board.
How do you set up a component-based design system?
Creating a component-based design system can be a large undertaking. But we’ll break it down into three parts that are going to be most important. Each of these parts will vary based on the size of your company, team, and project, but you should be able to fill in the gaps when you get there.
Part one for creating a design system is to lay out who is involved, and what the underlying principles are for your design system. You need to understand who on your team is to be involved in helping to create your design system, and who will be specifying the details for rolling it out. You’ll also want to identify what core principles you want your design system to have. Do you want usability to be the most important part of your design or is your brand more concerned with a design aesthetic? This is where you’ll want to decide what your priorities are, and put them in writing.
Part two is to lay out the individual components of the design. This is where you will decide on the colours, typography, layouts, tone, and other individual components that make up the visual representations of your brand. This is likely the part that will be the most important because it is going to be the bulk of what is put into action, and the majority of what people ultimately see. So make sure you spend the time here to get things right; otherwise, you might end up repeating the process all over again, and losing out on the positives of creating a design system in the first place.
Part three is to designate how your design is to be shared and implemented. This is where you decide whether or not to pre-create components in HTML/CSS, what technology you’ll use to deliver your assets, and if you’ll implement your designs using specific technologies and methods.
When you are ultimately finished creating your design system, you’ll have learned the ins and outs of each of these steps. But before you start, it might be valuable to go over some inspiration for design systems. We’ve collected what we think are the five best examples currently out there.
What are the best examples?
When it comes to design systems, these companies are going things right. Take a look and see if they’ve published anything you might find valuable and take inspiration from the hard and thorough work they have done to define their brands through design.
Airbnb has implemented one of the better design systems of 2018. They also created their font, called ‘Cereal’. Their design team has gone to great lengths to keep their design fun and playful, but professional and clear.
Google’s Material Design is perhaps one of the most ubiquitous design systems out there. Google has done a wonderful job at not only creating a design system for a monolithic group of products but also creating clear and concise documentation that lends itself to helping proliferate it’s design concepts across projects and outside the walls of Google.
Atlassian has done a wonderful job of creating a design system that is accessible and fun, but consistent across an assortment of products that feel connected by a strong design structure. Their heavy use of illustration and high contrast gives their design a crisp and unique feel.
Buzzfeed has done a great job of organising their content into cleanly designed sites. They even created a CSS component library, called Solid, that helps to give their designers and developers a shared set of components to work from.
Shopify’s design system, called Polaris, is a clean and minimalist design framework that helps allow content breakthrough design, and accessibility to shine. This is a great example of a design system that put user-generated at the very forefront of its design principles.
With design systems becoming increasingly popular, there has been an increasing amount of exposure for the concept of not only creating a design system but making it available to the world at large.
With mobile and the web technology rapidly changing and being adopted, there has been more demand for brands to define what makes their brand unique, and what properties need to be shared across the various platforms and experiences they offer. This is what makes design systems and component design so crucial in 2018, and certainly beyond.