Design system in practice
The concept of a design system has been gaining popularity in recent years because it turns out to be a very efficient solution and its numerous advantages are appreciated by more and more companies.
The main advantage is the possibility to launch the products faster into the market. The systemic division of a project into components and atoms makes the design process much more effective. Other advantages worth mentioning include a better user experience (UX) and greater client satisfaction. The design system tools allow to follow client preferences and figure them out more accurately, as well as optimize and improve the areas that need amendments from the user’s perspective in terms of usefulness. A crucial advantage related to using a standardized system is also enhanced internal communication and reduced risk of mistakes and misunderstandings within a team.
What is a design system?
Generally speaking, a “design system” is a set of key and standardized elements compiled in the form of documentation. It consists of sets of graphic elements and design and communication guidelines, as well as source materials ready to be reused. This all is aimed at arranging a coherent brand communication language.
However, the true usefulness of the design system consists of all of the components within the areas being optimized and coded. It means that each time you create a new project or update an existing one, all necessary elements are ready – all you have to do is put them in the right place.
How to start creating a design system?
Clients have a lot of questions and doubts about developing a design system. That is why, we, as experts in the area, want to share our experience gathered throughout our foregoing client collaboration and present the benefits of this solution. There are two key questions, though, that should be considered at the very beginning:
- should you create a design system relying on earlier projects?
- or should you rather develop a design system from scratch and try to accommodate earlier projects to it in the following stages?
Regardless of the way that you choose, you must carefully get acquainted with the client’s line of business and needs in the first place. It will help you better understand the users and their approach to a brand.
Creating a design system
In order to create an efficient design system, we recommend relying on five key steps:
- analysis of currently possessed components;
- research and analysis of existing design systems;
- list of components and team consultation;
- developing a design system:
- color palette,
- typography system,
- grid and spacing,
- icons library,
- library of pictures and illustrations;
- developing components and examples of use. If you run a new startup and you currently have no components to be analyzed, think about top elements that will be crucial also from the point of view of your product’s users and your brand.
1. Analysis of currently possessed components
The initial step in the process is collecting the components in one spot, their categorization, and breaking them into atoms. It enables an accurate selection of the elements that are significant and should stay and the parts that should get modified or be completely removed. Any tool can be used to manage a set of components – the only thing that matters is that it enables an efficient performance of such an analysis. Figma works out well for us, allowing both the team members and the client to analyze quickly and easily all the components.
2. Research and analysis of existing design systems
There are many design systems currently available on the market, where the designers can draw inspiration from while creating their own. Good examples of design systems available on the market include:
- https://atlassian.design/
- https://ant.design/https://ant.design/
- https://www.carbondesignsystem.com/
- https://garden.zendesk.com/
- https://material.io/design/introduction#principles
- https://www.microsoft.com/design/fluent/
- https://developer.apple.com/design/human-interface-guidelines/
- https://polaris.shopify.com/
3. List of components and team consultation
The list of components of your design system – a framework structure of sorts of your system – should be the result of the two previous steps. Remember to go through the list with the entire design team at this stage, in order to validate previous actions and make sure that all components with their sub-elements have been thoroughly discussed.
4. Developing a design system
After the component list is prepared and analyzed, you can move on to the core elements of your design system. The creation of the system components is crucial, as it sets forth the hierarchy to be used in taking the next steps.
Color palette The color palette is a good place to start working on your design system. First, you need to identify all the chosen shades of each color and write down the guidelines for their use. For instance: what color to use for your buttons, links, paragraphs. Remember to include HEX, RGBA, or HLS colors.
Typography system No matter the system you are designing for, it is a good idea to think about what typography to use in each of them. Web typography will differ from the one used for mobile systems, so you should go through the entire system meticulously. Significant differences will be noticeable even between typographies chosen for a regular webpage and a blog.
A design system can be more technical than a standard style guide. Identify the preferred font size, spaces, fonts, etc., and any rules regarding where and when those should be used.
Grid and spacing The most common characteristic feature of almost any project is whitespace. Whether it is about the distance between the links in the header, the distance between the elements in the grid, adding space between an avatar and a link, or the filling of the dropdown element – no white area in your product should be unplanned or accidental.
Icons library Icons library contains all the icons that all your products, apps, or web pages use. Having a standardized icons library will help your brand maintain its consistency.
Library of pictures and illustrations Having a library of all the company’s pictures, both self-made and purchased from photo stocks, is also a good idea. Such a library not only helps download the photos from the design system but also lets your employees peruse them in search of ideas and inspiration. To create it, you should gather all non-standard illustrations that you ordered or created, along with the decorative elements of the page and frame designs.
5. Developing components and examples of use
Once you have defined your global palette of styles, you can use those elements to start creating the component library. In most cases, designing the components is not a creative process. It is about mapping predefined styles onto the components.
Thus, at this stage you shouldn’t need any style which has not been defined in your style palette yet – a creative process took place in its design phase. From this moment on, whether it is about the color, font size, margin/background, height/width, or other elements, each style you use for component and system design should come from your style palette. It means that almost nothing new should be introduced. It may sound extreme or unreasonable, but to the contrary: this is where, we believe, many people make a mistake.