Recently, the UI Guild has been investing in choosing a new Design System. You may be wondering, what is a design system?
According to Dan Eden, a product designer at Facebook, a Design System is “a collection of metaphorical nouns and verbs that allow designers, engineers, and beyond to express their intent in building a product.”
Here are the main parts to a design system:
The whole point of each part is to define guidelines, constraints, and principles for design, as well as code. Design System resources should also define typography, spacing, and layout, as well as non-visual elements such as tone of voice, vocabulary, and grammar. As a part of these visual and non-visual elements, there should be a definition, possible usages in various scenarios, and a defined process of how those elements can be changed.
Other things that are good to include in a Design System are naming conventions, file structure, and other technicalities that are necessary in a computerized environment.
At some point, we decided that EduSource needed a Design System. We started by looking through all the options – here’s an awesome list that we started from. Eventually, the UI Guild decided to go with a pre-made Design System, rather than creating one from the ground up.
After a lot of research, we narrowed it down to three systems. Here are two that we really liked, but didn’t end up choosing. (Note that both these two and Google Material Design, which we ended up going with, are completely free to use!) Each of these Design Systems is incredible, not to mention supported by well-established companies.
We ended up going with Google’s Material Design. Since we had already been using it somewhat, we were already familiar with its schemes and overall feel. Material Design felt like it was more established and specifically created to be open to modifications or adaptations to any brand. Since we will likely add on to any Design System we adopt, Material Design seemed like the right choice for us.
There are many reasons to adopt or create a Design System. Three of those reasons are: efficiency, clarity, and consistency.
In the fast-paced technology industry, we need to be quick to create and iterate on a given idea. Without design systems we end up stumbling over technicalities, like the way a button looks or what colors we should have in a given scenario. With a Design System, everyone on the team has an understanding of our branding, tone, colors, and components.
That means when John Hasenmyer (EduSource Director of Architecture) says, “We are probably going to need a boxy thing with a little table inside and little dots in it,” we will know exactly what he is talking about because we are all speaking the same language.
At EduSource, we strive to be efficient and productive with few to no errors, and that means that communication is extremely important. If everyone is speaking the same language, then it brings a level of clarity and understanding that wouldn’t exist without it. Without a system, you could end up in a scenario where two or more people think they understand each other, but in reality one person thought they said “make me an elephant,” and the other person thought they heard “make a boat.” Those scenarios typically end up being painful and costly.
With a Design System, the components are predefined, and the UI work is essentially like playing with LEGOs. If there is a design phase of a project or product, using a Design System makes it quick and easy for the developer. As a result, turning out new functionality becomes less about the technical challenge and more about solving problems for the client. The added efficiency also opens up the opportunity to have quicker iterations of feature changes and additions.
Once you have happy clients, then they go and tell their friends and learn about how amazing you are! And because you are using a Design System, you can bring the same level of quality and craftsmanship to their friends or others and create a brand that is known for consistency, efficiency, and quality.