I remember the first time I bought my child some Legos, it was just a basic set for building a boat. My kid got very curious as we followed the instructions and in less than an hour, the boat was ready.
As my son grew up I started buying more complex Lego sets. The challenge of following instructions and building more demanding designs was very exciting. But after the first time, my son lost interest in building the same structure all over and would rather create his own design. In less than a couple of years, we had accumulated a huge number of mixed pieces, which in turn became frustrating since not all of them fit correctly for the construction of the original designs and neither did we always have the right pieces for getting all creative.
As far as interface design is concerned, this Lego analogy can help us understand the importance of Design Systems as the Single Source of Truth for your company, avoiding wasting work hours in building something which can seem like a bad design made of many mismatched Lego pieces.
What's a Design System?
Maybe you've heard about this concept so I'd like to begin by explaining what it's not. A brand book of your company is not a Design System, neither is it a UI style guide, even when this is a big chunk of the real thing. Neither is it a CSS framework like Bootstrap or Foundation. So, what's a design system in itself?
A design system is a collection of reusable components, which are guided by rules and principles that can be assembled to create new mobile or web apps. Design systems bring about a common language and create coherence and consistency for an organization's brand in a centralized and convenient way. It also facilitates the export and management of new designs.
What advantages does having a Design System bring to a company?
If you've ever noticed your website using a considerable number of small variables in the same color shade as a button or maybe you hired a new designer who uses blank spaces differently to the previous designer, then your product is a victim to inconsistency. Back to the Lego example, switching pieces in order to build a new boat, even if they come from the same maker, can turn out a very different result to what was expected.
Among the most important advantages we can highlight are:
Keeping consistency
The main advantage of a Design System is allowing keeping visual consistency as well as product experience, even in the face of multiple teams working on different specific sections, thus reducing friction in all of the design process.
Save time
One of the most crucial points for a company is the right use of its resources. Confusion and frustration lead to wasted time. The development of an adequate Design System will, in the long run, avoid the waste of this important resource.
Higher creativity
Detractors of Design Systems argue that setting boundaries to design reduce creative freedom; this is a myth. It's been proved that design guidelines and principles reduce waste, thus offering more time to explore and empowering creativity.
Better collaborative work
The creation of a Design System is not a single resource job, nor is it single-department use, it's a multidisciplinary job which allows for better group cohesion and better involvement of everyone in their company's brand.
How can I begin the System Design of my company?
It doesn't matter if your product has been out there for a while or it hasn't even seen daylight yet, the process of starting the creation of a design system is the same.
Structure a multidisciplinary team
The first step is forming an appropriate team with at least the following roles:
- UX Designer. To watch over the usability and accessibility of all of the system's components.
- UI Designer. Responsible to design all of the system pieces and the design language.
- Frontend Developer. They're in charge of the engineering of the whole system in a modular and reusable way.
- Marketing Expert. They're in charge of watching over the system and the brand aligning, as well as helping generate the tone and voice of the system.
- Product Manager. He or she will lead the project advocating for user needs and meeting the business's goals.
Carry out an audit of the visual content
Once the team has been defined, the second step is laying down a plan with measurable and reachable objectives for determined periods. I strongly suggest carrying out an audit of the whole visual strategy. Examine CSS's structure, plan and sort what is reusable and what is disposable, consider possible new elements to be designed and the best architecture possible when thinking of scalability.
Create a visual design language for your brand
The visual design language is at the core of every Design System. These are the prompts of every component in our system.
Consider four essential categories for any design language in digital products:
Color
Categorize the use of colors in the following way: Primary, these are the dominant colors in your brand; Secondary, they offer contrast and higher harmony; Grayscale, consider a scale of grays including black and white; Utilitarian, used for alerts for instance; and Gradients (optional)
Fonts
Most definitely, the norm is to limit the use of different fonts. A mix of two styles is what's recommended; one for titles and a supplementary one for general texts. Using more than two fonts can create not only chaos and ambiguity (unless intentional) but also issues with the performance of your digital product.
Spaces
Two of the principles of graphic design are rhythm and balance. A controlled but versatile reticle allows for the collocation of elements with a more logical and pleasing to the eye design.
Images
Define the style and guidelines of all your images including icons and illustrations.
Multimedia
Depending on your product, you can include other categories, such as Animation and Sound.
Once the design language is defined, it's time to generate instructions for its use, to achieve this, a simple “Rules, Limits and Principles” scheme may be used.
For example:
- Rule: The color must meet a contrast ratio of 4.5:1
- Limit: Number of colors per screen
- Principles: The color must be used in a meaningful context.
From visual design to implementation
The architecture of the whole system is an interesting step of the process, from an engineering perspective. This process is where the so-called Design Tokens are generated. These are names and values which store the properties of the design, such as colors, spacing, size, animation duration, etc.
Here's an example:
$border_radius_medium: 0.25em
Creating the user interface library
You're ready to start creating the elements of your design system. Just as with Lego, take all the individual pieces and based on the rules, limits and defined principles begin designing and developing in a modular way. Start off with small objects which in turn will make up a whole environment.
This methodology is commonly known as Atomic Design; this thanks to Brad Frost who coined the term in 2013 posing it this way:
- Atoms: These are small independent pieces, such as buttons, inputs, and icons.
- Molecules: These are generally a group of atoms, like a search form. (Which includes an input form, a button and potentially even a search icon)
- Organisms: The combination of molecules that together form a particular section of an interface.
- Layouts: Organizational schemes for the components.
- Pages: Each of the screens in the flow of a product.
It's worthwhile mentioning that all the aforementioned work should be tested and validated by your product's users in the right context in order to guarantee the success of the Design System.
Record to continue innovating
Finally, make sure the whole process has been recorded appropriately, not only for its use but to ensure its easy management as well.
It's strongly recommended to make use of the tools available in the market to efficiently manage Desing Systems and making them scalable. A good suggestion is to use DSM from Invision
Conclusion
Creating a Design System will help strengthen team cohesion when creating a product with a more consistent user experience. It reduces the gap between design and development by ways of a common visual language encrypted through design tokens and a set of components and patterns all cataloged in a UI library. Just as well you'll get precise control over the user interface in a manageable, scalable and robust fashion.
If you'd like to know more about how MagmaLabs can help you develop a Design System for your product reach me at design@magmalabs.io
Don't forget to share if you enjoyed the content of this post.
