Design Systems : What the heck is that?
Millennial Edition
Everyone is talking about Design Systems and it’s true is not the new kid on the block but , a year ago , it was for me.
From my millennial point of view, I’m gonna tell you about what a Design System is.
Do you remember that Christmas night when you were a kid and received a huge container with legos? In the end , it was more the feet that cried when meeting those blocks than what you actually built. You could create things that only you understood without any directions and let’s say that in terms of experience, it’s not you (the creator) who should understand the product, but the users for whom you are building the product for.
So, we know that a lego container contains many blocks which we can freely build with.
In terms of Design Interface, some people might follow the “Atomic Design theory by Brad Frost” where an atom is the most basic, abstract element and not so useful by itself, it depends on the need we have to build a product the atom will evolve into molecules, organism, etc.
Why am I telling you this?
I just wanted you to know another design POV , but don’t worry, I’m not gonna confuse you, instead I was terrible at Chemistry on my school days and that’s why I’ll explain to you with lego blocks.
Let’s go back to basics: each lego block can seem to be too simple and with lack of action until we start to pair it with other blocks, right? But each block has a shape, size and color . For you to get to know, within the structure of a Design System , this would be categorized in the Foundations or Perceptual Patterns (as shown in Alla Kholmatova’s book Design Systems).
These simple Lego blocks organized at the base are the essence of your System, which through the UI (User Interface, the visual, the face of your product) expresses the voice, essence and style of your brand that you then project in your products. Some of the basic elements are typography, color, icons, shadows, animations, etc.
When you start putting together two or more blocks, you create components (which also have their space within the structure of a System and we call them Components or Functional Patterns) which are elements which you shape the interface with. But, without guidance on how to use each block or how to justify each component, you run the risk of wasting time focusing on things that may not be necessary or are unknowingly repeating yourself, and losing valuable time that could be invested in the user experience within the product.
Let’s suppose we are a team and we must use that varied container of blocks for the same purpose, but each one seeks to do this process on their own, without direction, just taking blocks and hitting them or, failing that, adding to what is already built. Thus, we will end up creating a work of art that can affect the experience of our users, in addition to the fact that it will take more time to develop without considering whether there were consistent elements or not, repeating patterns, among other things that may escape us.
What a drama, don’t you think?
What if we have a container full of blocks but besides, we have the guide or the detailed specs of how to use each piece to build the product? This is what we called a Design System which allows us to create consistent, scalables, flexible and accesible products and gives us more time to focus on what is most important, which is the User Experience.
But, how?
Documenting the principles, voice, tone and approach which the brand wishes to project its products, each basic element or block and each component, giving guidance on its anatomy, how it should be used, when it should be used, etc. In addition, structuring the architecture of the System so that all members can easily find what they require and a unique language both in design and in code that provides understanding to each member of the team.
What do you think?
Let’s recap. Using elements from a box full of multiple and diverse block of legos, messy and without any guide to create things randomly can make us loose a lot of time and effort. Besides, it can become on a hedache in a long term if we want to scale the product quickly.
A well- organized, structured and documented container of blocks will allow us to invest more time to think on the best ways for the user to have a better experience using the product and also will help the UI scale with visual consistency- this is the magic of a Design System.
I’m gonna share with you a list of my favorites Design Systems, take your time and observe its architecture, principles, how they express all of this and how they show their essence:
Material from Google: https://material.io/
Apple:
Take this examples as a reference but don’t limit the Design System. Remember, you and your team know how the purpose of each element or component should be according to the brand principles and the users needs, having in mind that the language should be easy and understandable for all the team members. Just because Material Design has a name or a behavior in its elements , doesn’t mean that you will use the same.
Creativity is infinite and as Barbie says: “You can be anything”. In this case, manage your Design System and create it as you feel is right so that the user can fulfill his task satisfactorily.
The truth is that Design Systems has a lot of information to explore, from what they are and their benefits, how to structure them, how to define them, how to maintain them and much more.
If you want to know more about this topic I recommend:
Design Systems by Alla Kholmatova
Laying the Foundations by Andrew Couldwell
And also a good place to prepare yourself in Design Systems topics and any UX UI topic is Memorisely.
P.S. A Design System is something beautiful, quite useful and magical but it takes time, effort and dedication. Like the Tamagotchi, you must feed it, maintain it and not leave it forgotten in the drawer.
