How to create a design system – Dev Channel – Medium

How to create a design system – Dev Channel – Medium

1920 1080 Pro Web Design



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 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 LayerThe 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.Touch targets should be at least 48×48 pixels.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 48×48 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 layerEvery 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.Example of Crane apps conventions when it comes to error handlingThe 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 layerThis 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.In this example, Shrine app adapts material design to express its own brand.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 principlesFrom 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.

How Can We
Help You?

Performance and Simplicity exists side by side.

Contact Pro Web Design and tell us about your next project and we will make sure it is successful. Let us do what we do best.

1920 1080 Pro Web Design

How Heathrow transformed using analytics for the people

Heathrow Airport began a digitisation project two years ago and used the Microsoft Azure cloud and Microsoft Power…

read more
1920 1080 Pro Web Design

Why are enterprises slow to adopt machine learning?

Machine learning has the potential to transform the way organisations interact with the world, to move faster and…

read more
1920 1080 Pro Web Design

How to create a design system – Dev Channel – Medium

The autonomy of design systems like material design and how one can start to build their own.NOTE: This article…

read more

Creatives – Design, Marketing, Support

Working Hours: 08:00 – 17:00

Email: contact[at]prowebdesign.co.za

Phone: +27 76 260 2730

We Love Your Feedback