How to create a design system
The autonomy of design systems like material design and how one can start to build their own.
NOTE: This article was inspired by a conversation I had with Nick Butcher, Design and Developer Advocate at Google, for our YouTube series “Designer vs. Developer”. You can also listen to a longer version of the conversation by downloading or subscribing to our podcast on Spotify, iTunes or Google Play Music.
A design system is a set of principles that helps guide designers trying to navigate a platform, environment or ecosystem. Sometimes they impose restrictions and force rules, but a good set will always seek to guide. Design principles are not a new thing, Roman architect Vitruvius had three golden rules for great architecture;
- Durability (Firmatis ): The building should be robust and remain in good condition.
- Utility (Utilitas): The building should be functional and useful for the people who are in it.
- Beauty (Venustatis): The building should be delightful and soulful.
Digital design is very similar to architecture, in that its purpose is to help people navigate a system. So taking inspiration from this set of principles is a good place to start when building your own design system. Good high level principles like Vitruvius’ work well, but let’s go a little deeper. With material design, Matías Duarte, VP of design, described it as a layer cake made up of three distinct levels. We are going to look at those layers and use them as the basis for defining a design system.
First principe: Human Layer
The human layer is all about ergonomics. To create a design system you must understand the rules that humans live by, and by rules we could also call these restrictions or limitations. For example, our fingerprints are about 7–10mm’, our eyes can see things clearly if the contrast ratio between text and background 4.5:1 and our fingers can only reach a certain distance before it becomes uncomfortable.
To set up your principles for this layer you have to take the above into consideration and create a list of laws / rules that your design should follow. So in material design we say that buttons should have a touch target of at least 48x48 pixels, because that is approximately 7mm, the size of a human finger and allows users to comfortably tap a button. It also takes into consideration mistaps, because people won’t always be accurate.
These rules seldom change, unless of course we learn some new piece of research about the human body. This principle makes a great foundation to which to build everything else on. In other words this is like our durable layer from Vitruvius principles.
Second principle: Conventions layer
Every system needs a set of common conventions to help with users learning ability. Human beings do not like change, so creating a set of consistent rules will help them understand what they need to do. It is also important for operating systems like Android that there are conventions, as app makers design their apps in isolation. But user experience crosses multiple apps, so when building material design we wanted to create a consistent and coherent ecosystem of apps that felt part of a family. In practice that means, navigation and the hierarchy it represents should conform to the same standard. So hamburger menus should be used when an app has many top-level views and deep navigation structures whilst bottom navigation should be used when you have a few sections but they have equal importance.
The conventions layer is about functionality and consistency as they help teach users about the various design patterns that exist in your design system, much like the utility Vitruvius principle. They can change from time to time, as new conventions arise and others become less popular, but these changes will happen over a longer period and a few design changes at a time.
Third principle: Branding layer
This is where the visual style, beauty and personality of your design system shines. The branding layer helps your system create a standard that is visually distinct and recognizable.
Here you will employ typography, colour, shapes, animation, language and imagery together to create a look and feel that represents the meaning behind your design system. For example, Google’s implementation of material design is distinct, inspired by the simplicity of Google search, by using the shape of search input and colours minimally with lots of white space.
The branding layer is much like the Beauty principal from Vitruvius, and is the soul of the design system.
Applying the principles
From these three layers you can start to build out the different sections of your own design system. So if you want to define motion and how elements in your app animate, first we look at the human layer, when animating it’s important to understand how the eye works. Our eyes are attracted to motion that happens suddenly and will follow a transition. So if you animate from one widget to the next, you should only stagger the element that the user has clicked / tapped on as to guide the user, everything else on the page should vanish quickly as not to distract them.
Next you come up with a set of conventions on how things should animate, what transitions denote importance, what animation should be used when you are opening something as opposed to closing, etc. Finally the personality of the animation is how you ease from one point to the next. Is the motion playful? Does it stagger? Should it be fast or slow? Here is where you build out the feeling and emotion of your animation.
Then you can move on to typography, making sure it’s legible, creating a consistent style guide and choosing a font that represents your brand. We should always aspire to make our design durable, useful and beautiful. Using a set of principles can help guide us and make the apps and systems we build feel natural and easy to use.
You can learn more about UX design at Web Fundamentals.
