As digital product interfaces become more sophisticated, it becomes increasingly difficult for proprietary software creators to adhere to the same design concept. Design systems are used to solve this problem. In essence, they are sets of rules and tools for creating a design that reflects the philosophy of a product or company as a whole. Your humble servant, the Old Snake YUI, will help you to understand the design systems in more detail.
What Is a Design System? Asssk YUI
The design system is responsible for the interface uniformity for various software products. From a formal point of view, this, as I wrote above, is a set of principles for compiling user design (colors, fonts, styles, etc.) and user experience. This is a unified standard for front-end developers and designers.
Sounds modern, doesn’t it? However, design systems have existed long before the definition of the term. So, everyone who was interested in the history of architecture will certainly be able to distinguish what buildings in the Baroque style look like. Likewise, in the digital age, today we can easily distinguish Apple-branded products. Thus, the design system can be considered ready-made kits for “building new interfaces”.
YUI Explainsss Why you Need a Design System
Generally speaking, design systems are created so that designers and API developers can reproduce new products over and over again without having to rebuild common patterns.
As for the global purpose, design systems are used by companies that regularly update and launch new software services, examples of this are Google, Apple, etc. By the way, here you can read a first-person expert opinion on how specifications and design requirements are formed.
Benefitsss of Design System
Obviously, design system brings many benefits for companies — from eliminating the need to create templates from scratch (to describe the basic principles of user interaction with the interface) to providing broad prospects for hiring third-party designers and front-end specialists (since they will receive a ready-made “charter “on creating new interfaces).
For brand fans, they lower the entry threshold by standardizing the UI, for brands themselves, they increase awareness and provide a significant competitive advantage.
As for long-term benefits, the development of design systems helps to significantly reduce the costs associated with the design and development stage of the user interface. Also, the design of the system accelerates the launch of the product and reduces the number of edits, due to tighter specifications, which literally prevent the teams working on the project from “poking a finger in the sky” (especially if they work separately from each other).
A Little Hissstory of Design Systems
As you already understood, design systems have been around for a very long time, and are used by large brands everywhere. When YUI was young and fit in a child’s palm, in 1975, NASA came up with their own list of design specifications back. As for the design systems that are used in our time, one of the first unified systems for creating interfaces can be considered Material Design from Google, which was first proposed in 2011 and finally formed in 2014.
The design of the system of our days differs from its prototypes by taking into account all the parameters of modern media devices. We are talking, first of all, about mobile (and in general, multi-format) gadgets and the adaptive design required for them.
Who Needsss Design Systems?
Obviously, from a practical point of view, design systems are most useful to designers. Especially for those who work on the project separately from the development teams.
Such systems are mandatory for companies that one after another release branded software products and seek to increase their recognition within the target audience. Thus, it can be argued that any software development company that seeks to:
- speed up the time to market for every next product;
- simplify interaction between teams of specialists;
- increase brand awareness,
needs a design system.
Who Developsss Design Systems?
This responsibility is usually assigned to design teams, development teams, or front-end teams. Also, designers are sometimes involved in this procedure. Note that it is impossible to complete the list of design system specifications since as new UI elements appear, it will expand.
Design System Elementsss
First, let’s find out what elements the design system consists of.
Components
These are abstract UI elements that are not detailed and therefore can be adapted for different products. These are buttons, forms, input fields, message boxes, etc.
Patterns
These are the rules and specifications that unify UX and developer experience (DX). This makes it easier to create new user interface elements. As for particular examples, they are collecting, filtering, and sorting data.
Visual language
This is everything that is responsible for the stylistic design of the user interface: colors, typography, fonts, etc.
Artifacts
The interactions between the above three elements are defined by artifacts — the workflows that take place within the UI. They help front-end developers to implement the code part of the interface.
How to Create Design System: Tips and Tricksss
Now is the time to learn how to create a design system. Here’s my own step-by-step guide for your attention.
#1 — Create the set of “building blocks”
Before you start creating a design system, you need to decide on multitasking elements that can be reused.
#2 — Coordinate your component set and visual language with the development team
In order to understand how correctly you have chosen a specific set of elements of the design system, you must agree on it with the development team so as not to complicate their task and not make the project unreasonably expensive.
#3– Recruit a team with the skills you need
Your team should interact with developers and other specialists who work on projects at all stages of their development. This means that each of your team members must be competent enough to understand the recommendations of the developers. Therefore, before hiring people for your team, clearly define the list of hard skills for each of them.
#4 — Define a list of technologies
Decide on the basic technologies that will take part in building the design system. You can also specify one of the finished products, which in the future will act as a prototype for the following software solutions.
#5 — Choose a color scheme and typography
It’s time to choose a color palette (acceptable shades and rules for their use in certain parts of the UI) and typography — fonts and the principles of their coordination with interface elements (do not forget about their adaptability for different screen parameters). This is easy to do when you have a ready-made set of design system components.
#6 — Design your own icon set
Icons are a graphical language of communication between software developers and users, which makes interfaces understandable regardless of what language a particular user speaks.
#7 — Formulate the basic principles of working with space
This stage of drawing up a design system includes the development of principles for the layout of the space and the placement of individual UI elements (of course, taking into account adaptability for different screen sizes).
#8 — Build your first template
Finally, build some templates that reflect all the specifications formulated in the previous steps. Focus on the consistency of the system — this will simplify your task. Also remember that templates need to be constantly refined, with the advent of new products and functionality in existing solutions.
Toolssss to Use
Three of the most popular tools for building components and the visual language of design systems are:
As for patterns and artifacts, Flowmapp can help you create them — a tool for reproducing the typical behavior of various user groups.
3 World-Famousss Case Studies
Here are some world-famous examples of design systems:
Conclusssion
As you can see, the development of a design system is a comprehensive and endless process. In turn, a well-designed design system should optimize the creation of new branded software products and reduce their budget. If you want to create your own design system, just use the above guidelines and tools. Yours sincerely, YUI.
P.Sss.
For the nerds, I also offer additional materials:
Great web design starts with planning. Great planning starts with FlowMapp
Meet the FlowMapp 2.0. Complex solution for all stages of planning process. From idea to clickable prototypes. Add FlowMapp to you toolkit
Originally published at https://www.flowmapp.com.
