In the scope of this article I will explain what a design system is, how it works and the benefits it provides even for small hobby projects. Any tool that has the word "system" in its name looks daunting at first, but we will see how taking the lean approach for the creation of a design system actually speeds up and eases development.
What is a Design System?
A Design System in its best form is a collection of styling rules, design principles and limitations that a team uses to develop software. In the context of UI engineering this can be a collection of the application's colors and rules on when to use them. Or a set of reusable pre-made components with an explanation of when and how to place them in the interface.
In general, a design system is more than that. While it should serve as a tool for developers and designers to produce more consistent products it can be used as a guide for the message that the brand wants to pass to its users. It can contain guides about what language and imagery to use for the sake of marketing. Here you can find a gallery of such tools used by different companies like Atlassian, GitLab, SAP, Heroku and others.
Design Systems Are Not Only for Big Corps
To me, implementing a design system sounded like a fun thing to do on the side, but I couldn't really imagine using such a tool in my small hobby projects. After all, working on something in our spare time is about trying out new things, going fast and avoiding all the bottlenecks of the working environment.
Talking about user experience, consistency and what not is cool and all but let's not lie to ourselves - most personal projects we do never see the light of day. They sit in a dark forgotten corner in our GitHub account and now that there are free private repos they may not even get the glory of being pinned on the front of our account.
However, after deciding to implement a "lean" design system in a side-project I'm working on made me faster and more productive when it comes to creating features. Such tools are not only useful for medium and large products that are going to be used by thousands of people.
A normalized way to structure our app's styles will take a big burden of our chest when we are implementing a new component or a page. Think about how many times we stop and think - "Okay, how big should this text be?", or "This need a bit more room to breathe, how much padding should I add?".
The Benefits of Design Systems
Making some decisions in advance and using a predefined set of sizes and colors can save us a lot of time. If we have a predefined palette of colors we needn't go to the color picker and waste time trying to find a fitting shade for a component.
My apps used to end up with five or six different grey colors that are indistinguishable from each other.
If this project is something that we plan on launching for people to use then having a frame in which to create the UI should be even a bigger priority. A design tool like that will help us create a consistent UX and help the user feel more confident when using it.
Repeating ourselves is bad when it comes to writing code, but having repetitive patterns in the UI is incredibly useful for the users and allows us to navigate their actions.
Putting personal projects aside, I also find such an approach useful in smaller teams or companies. Working on something small is related to the need to move fast and code reviews are often not taken seriously.
It's easy to end up with inconsistent UIs where form fields on different pages look slightly different because they were built by different developers. Putting some constraints by adding a frame in which everyone needs to fit makes it easier to create consistent interfaces and experiences.
The McDonalds Experience
In order to better illustrate the importance of systems we need to step away from the technical implementation for a bit and talk about fast food restaurants. Particularly McDonalds restaurants. I know, it sounds weird - bear with me for a bit.
Whenever we walk in a McDonalds we know exactly what to expect. You can go into any restaurant from that chain in the world, order a cheeseburger and get the same experience - including the questions you are asked, the time you wait and the way the burger is wrapped.
The furniture is similar, the way the store is arranged is similar. You never walk into a McDonalds and hope that the cook today is good. No, you know what you are going to get no matter if you are in the US, Europe or somewhere in Asia (there are specifics depending on the culture but that's a different topic).
While I'm not the biggest fan of the food in McDonalds, the point I'm making here is that they have a well-defined system that gives their customers a sense of consistency and certain expectations.
Apps Should Work Like a McDonalds
A design system for an application should serve the same purpose. It should be a tool that we can use to provide our users with a consistent and repeatable user experience. We need our user to feel in known watters no matter what part of the application they are in.
A well built design system should give the user specific expectations when they are using our app - a certain kind of button should open a modal window, an accented one should be used to take an action and links should have a slightly different look to signal what they are.
This goes for topics like padding, spacing and font sizes as well. Those are powerful instruments to provide a message to our users.
A combination of a particular font and size plus a color could be used to show an alert to the user. If we decide on that combination of styles we should use it any time we need to pass information in a similar context.
While most of what I've said may be considered common sense, you will be surprised by how many inconsistencies you can find in the apps you're building.
The first time I went through a project of mine I found a few different fonts, more than fifty shades of grey and all font sizes between 14px and 26px. I believe that you can find at least one project with such problems in your GitHub account.
Building a Design System
In my next post I will go into the technical details and considerations of building a "lean" design system for a personal project. We will go through picking colors, fonts and sizes. As well as the different ways that we can implement such a tool into an existing project.
- A design system is a collection of styling rules, design principles and limitations that a team uses to develop software.
- Such a tool is incredibly useful in UI engineering
- Design Systems are widely used in Big Corps but are incredibly useful in smaller teams and personal projects as well.
- A well implemented design system should provide for a consistent UX across the application. Much like the McDonalds fast-food chain - you always know what to expect.