A Design System is the process of defining the architecture, modules, interfaces, and data for a system to satisfy specified requirements. Design Systems could be seen as the application of systems theory to product development.
A collection of reusable elements and components, guided by clear standards, that can be gathered together to build any number of applications.
Design Systems could be seen as the application of systems theory to product development. In other words, it serves as the single source of truth which groups all elements that will allow a team to design, realize and develop a product.
A Design System is not a product that is delivered to the market, however it is a utility consumed by all other products at a company to ensure a consistent brand personality across all mediums.
Think of it as the company's digital business plan.
By utilizing a collection of reusable components and a set of standards guiding the use of those components, your company will be able to change the pace of creation and innovation within your organization.
“Design systems are always evolving, and the way you share and encourage adoption of new iterations will evolve along the way as well.” –Diana Mounter, Design Systems Manager at GitHub
Creating a Design System takes a lot of focus, effort, and organizational management. Using the agile methodologies, Product Owners get involved and take ownership of certain pieces of the design guidelines.
The outcome is a consistent brand message, clearly defined documentation and UI components to be used across all digital platforms.
The more a company and its products grow, the more features get added to the original design, and old features become outdated. Design teams also get to grow, and some projects are sometimes even delivered by outside agencies.
Without a design system, a product can lose its identity and start looking like a patchwork, creating a disjointed user experience as said before.
The first task before building a design system is classifying all the visual components within the product.
This will highlight where the biggest inconsistencies within the product are and will help the team to pick the most important and most used elements and components of the product. It also serves your customers and makes their lives easier.
When you create a consistent experience you reduce the cognitive load that exists when the user switches from a mobile product to its desktop version.
When a team design something it is to serve the user. As a young designer, I thought the user was only the customer buying the product. But in this case, it’s also the people within the organization.
Indeed, you might also work on internal products, that are used by different product teams within the company, in order to serve the customer. When you build a design system, you will speed up the design process while also building links amongst teams.
The more people are on the same page, the fastest the process is.
What are the key steps and benefits to building a design system?
The first step in building a design system is to do a visual audit of your current design, whether that’s the design of an app, a website, or some other digital product. Taking inventory of the CSS you’re using and the visual qualities of the elements can help you gauge how much of an undertaking this process might be.
The visual design language is the core of a design system. It’s made up of the discernible components that you’ll use to construct your digital product. Your visual design language is made up of four main categories, and you should consider the role each of these design elements plays in every component on the screen.
- Color Common colors in a design system include 1–3 primaries that represent your brand guidelines. You may want to include a range of tints—a color mixed with white—and shades—a color mixed with black—to give your designers a few more options.
- Typography Most design systems include just 2 fonts: 1 font for both headings and body copy, and a monospace font for code. Keep design patterns simple to avoid overloading and confusing your user. Also keep the number of fonts low; it’s not only a best practice of typographic design, and it also prevents performance issues caused by excessive use of web fonts.
- Sizing and Spacing The system you use for spacing and sizing looks best when you have rhythm and balance. A 4-based scale is growing in popularity as the recommended scale due to its use in iOS and Android standards, ICO size formats, and even the standard browser font size.
- Imagery The key to success with imagery in your visual design language is having a plan or style guide and sticking to it. Set guidelines for illustrations and icons, and use the best image format for the situation.
Unlike the visual audit you’ve already conducted (which looked at the visual qualities of your design elements), this step in the process looks at the actual components of your UI.
Collect all of the parts and pieces of your UI currently in production. That means every button, form, modal, and image. Merge and remove what you don’t need.
This step is important. Documentation and standards are what separate a pattern library from a true design system.
From leadership, down to the QA associate, everyone is involved in the process. The process is typically handled in an agile process environment with product owners responsible for their piece of the design system, while scrum masters work to keep the different design and engineering teams on task.
UI/UX designers create the visual aspect of the design system while developers take the documentation, the visual aspect, and bring the reusable components to life. Here are all the roles typically involved in creating and building a design system:
- Product Owner
- Scrum Master (or Project Manager)
- UI/UX Designer
- Systems Architect
There certainly are technology tools used to build a design system, and which tools you choose heavily weigh on the type of project team you have and which design system outcome you desire to have.
It goes without saying that using a project management tool to keep your team aligned on goals, on tasks and will do wonders for any digital product.
Tools like Asana, Basecamp, Trello, Workzone, ClickUp, Wrike, and ActiveCollab keep teams aligned and on task during sprints while knocking out stories and tasks to build out the design system.
Ah, the most exciting part of creating a design system is actually sitting down and designing it. But you wouldn't embark on an in-home project without any tools, would you?
In the creating-a-design-system-world, the tools most widely used are Sketch, Figma and Photoshop. These tools allow for pixel perfect designs, creation of reusable elements called symbols or components. They allow for the smallest element design such as an icon or button, and then scale up to building out large desktop applications.
Although with Figma, right along side the designs, you can build out a prototype of how the application would function if used on an actual device by connecting clickable events to elements that lead to other elements or screens within your designed application.
The makers of InVision have expanded their offering by creating a specific software platform used to create an online Design System. The system is called the Design System Manager.
Designers can sync their Sketch file, with DSM, allowing stakeholders access to the design system designs right in DSM, without having to look over the designers shoulders. DMS provides a very slick interface for creating different sections of your design system, in a way that's organized like an outline and makes styles, fonts, icons, components, easily accessible.
The coded components or your design system will likely be brought into other applications by way of a NPM package. Therefore you'll need to create an NPM account and setup your package to be published to the NPM registry.
This will serve as a single point of contact for the coded components of your design system, while all the other business applications that consume the design system simply reference the necessary design system components from within the NPM package.
For the coded components that will be developed by the engineering team, that code needs to live in a centralized code repository. A code repository will serve as an online storage space for the engineering team to pull and push code from.
That code repository can also be setup to run automated test scripts and user flows simulations, as well as auto-deploy code to a hosting solution if all quality gates have been passed. Gitlab would be a perfect service to use if you wanted to implement continuous integration and continuous deployment features mentioned earlier. Other notable code repositories are Github and Bitbucket.
If you plan on launching a design system decoupled with other tools such as Figma or Invision, you'll certainly need to host your design system so that your team or community has ways or means of accessing. Cloud hosting solutions such as AWS, Microsoft Azure, Google Cloud, Netlify are all very good options.
Some of the most influential brands in the world have identified the inconsistent brand messaging that all their digital products convey. Therefore, they have taken a step back, defined a robust design system that their digital products consume, and provided them online for the community to learn more: