Recently, our Design Partner & Art Director Tanya held a webinar for Adeva, a proficient tech community platform for developers worldwide. Here Tanya shared her expertise in the field of the design system, touching on its history, functionality, and benefits. In case you’ve missed it, don’t worry – we’ve prepared a valuable insight into the theme for you! And if you prefer videos, keep viewing, as here it is.
What is the design system?
In today’s hyper-competitive digital market, the design is gaining more and more significance. With excellent visual performance that boosts better user experiences, it becomes easier to deliver high-quality products and attract more customers.
The tech and digital progress notably increased the number of platforms available for product promotion. Given the fact that one company may possess several digital channels, the question of their holistic provision became a burning issue. Now, it is paramount to maintain a comprehensive and consistent appearance across all platforms involved in the company’s performance. But how to handle it? The answer is to employ a design system.
In a nutshell, a design system is a series of reusable design elements with a set of principles guiding their usage. With a design system, there is no need to search eagerly for the right design decisions through trial and error. It’s enough to apply and reuse its changeable components that are flexible to any project or platform.
When do you need a design system?
Commonly, the need to employ a design system comes when you are setting up a new project or when you are working with existing products. As it comes to designing from scratch, the design system gives all necessary elements at your disposal. What is more, it provides you with the possibility to change their features according to your design thinking, significantly facilitating the process.
The second path usually refers to the products at scale. When the product grows in complexity, it always requires some improvements and changes. Given that, the design process evolves slowly and takes numerous tests before implementing the best decision. Here, the design system plays the role of a mechanism of fulfilling pre-existing requirements to the newly defined ones. With a consistent design language in place, it becomes easier to design products at scale, ensuring they stay coherent in visual perception, user interface, and user experience. With its reusable components, the design system allows you to operate scaling digital products without any significant constraints in less time.
Design system background
The design system hasn’t always been as it is now. It took years to gradually evolve and grow it into a functional and powerful tool. Let’s trace its development back and get insights into its core principles as they are bursting on the scene.
Going back to earlier times, in 1977, architect Christopher Alexander published the book, “A Pattern Language”. His ideas about reusable design patterns within architecture have slipped through into the scope of digital design and contributed to the development of a design system.
Before design systems entered UI/UX design, designers employed pattern libraries to build digital products. These were the collections of assets and components that were assembled easily in various combinations. Although they were powerful, they weren’t followed by any guidelines on how and where to use them. Designers combined these elements without a guarantee the result would fit their unique case and produce a consistent image.
Since the repeatable design should have implied more than just a mixture of reusable elements to be successful, introducing the structure and purpose sounded like a better plan. In the 2010s, designer Brad Frost formulated his theory concerning atomic design. With that, the design elements applied new meanings. Atoms – were small, independent components like buttons and icons when molecules were a combination of those components like a search bar. Thus, instead of crafting digital products solely by combining assets, atomic design introduced a structure upon which designers could rebuild and reuse more accurately.
Blending features of pattern libraries with atomic design cores, the material design aimed at creating a single visual language that would be able to assist the overall designing process and fit all platforms and screen sizes. Apart from reusable patterns, the material design suggested principles on how and where to use them.
By now, the design system has combined these features and has come to an established concept. But, there is always room for improvement, and each year we see newly developed trends that are used by many companies within their design systems. Still, some of the elements are considered as integral.
Design system structure
Before implementing a design system into the working process, you should clearly understand who should be involved and what components it comprises.
Designers go without saying, as they are responsible for defining visual elements of a design system. Then, we have developers who create code. Accessibility experts, also being a part of the process, ensure that the system meets the standards and is built according to the company’s requirements. Also, there are researchers who determine customers’ needs, and product managers responsible for landing the system to those needs. Finally, there are directors who execute leadership during the whole process.
The parties involved while working together should share one mission to succeed. Here comes the design system. Despite all participants having their different responsibilities, the design system helps them to move in one direction as it’s the only source of vision for the whole team.
What makes up a design system:
Components are standalone, highly flexible UI elements that are reusable across various projects. They include one repeatable function and a set of changeable features. The functionality of each new component stays the same, while features vary according to the established aim. That allows designers and developers to spend less time on the functionality of each design element and to focus mostly on design and user experience.
- Patterns and principles
Usually, multiple components go combined in various ways, thus creating specific user experiences. The patterns are standards on how to incorporate them and where. These guidelines help the team to detect the most efficient ways of using components together and decreasing the inconsistency. It results in fewer bugs and a cleaner, more understandable design. By employing patterns, the software app or digital product becomes usable and functional.
- Visual language
In the context of a design system, visual language means the visual representation of the components that make up a product. It includes color, typography, spacing, icons, illustrations, etc. Visual language is what makes the product look consistent and being a part of a brand identity. For instance, a brand usually employs three colors – primary for important on-site buttons, such as the call to action button, secondary – framing the general UI background and borders, and finally – the tertiary for backups such as error or success. The use of a proper color palette may contribute to better visual perception and increase engagement.
The same goes for typography. Including different typefaces for headings and body prevents inconsistencies caused by excessive use of various fonts.
Based on established patterns and proportions, the spacing creates the design equilibrium. It notably improves usability by making layouts more predictable and more readable.
Let’s consider the role each component plays in a simple piece of the design.
The button is a component that has its repeatable function. Take, for instance, the call-to-action button. You place it on your website, on the landing pages to guide users towards your goal conversion.
By clicking a button, users are taking actions you want them to take. Those actions may vary as you feature them – to subscribe, to get in touch, or to buy your product.
As for the patterns, CTAs are usually placed on landing pages and occupy a prominent position to be able to attract users.
After all, we have a visual language. The button typically has its color, typography for the label, and spacing inside it. You can also employ an icon, which will create a visual cue and highlight its position.
Though a button may seem an elementary item, there are still many decisions required to make it function properly. Design system saves time by giving the clues and a directory on how to build it, how to combine components and apply a visual language to make it work.
Why use a design system?
The design system works in favor of your workflow because it is a single source of truth for all parties involved in the process. It cuts a lot of discussions and arguments between designers and developers, resulting in better communication and eventually in higher productivity.
Designing from scratch is highly time-consuming. The design system moderately reduces the design and systemizes the process by introducing its repeatable and reusable elements. These elements get translated into development-ready components that can be used in a live environment right away. Thus, it contributes to faster builds and saves time and energy on some routine work enhancing the space for creative designs.
Since each new input into the design project may increase inconsistency, applying a design system seems reasonable. Its component-based nature allows designers to think of each page as a set of components. Eventually, it becomes easier to define what elements to use and how to manage them within a particular environment. Such a clear-cut approach leads to clean, decent designs and codes with fewer bugs.
Also, having a design system brings benefits to the company itself. Apart from directing current teams, the design system provides a better onboarding experience for new hires. It serves as a valuable resource for new designers and developers to nail ongoing projects and adapt quicker.
Today’s companies employ many channels of the digital ecosystem. Sometimes it’s hard to sustain a consistent image across all the platforms without going off the theme. Systematic and repeatable designs can erase inconsistencies and reduce the risk of fractured user experience.
Summing up the benefits of a design system:
- saves time and efforts, giving the space for creativity;
- results in better communication between participants;
- provides a clear-cut approach to the design process;
- builds clean, consistent designs without any significant drawbacks;
- makes onboarding easier;
- helps to maintain brand consistency across all platforms;
- reduces maintenance of the projects.
How to create a design system?
If you want to embark on your design system, here are the steps to take:
Step #1 Conduct a visual audit of current design
Before implementing any new feature, it’s crucial to analyze what you already have and understand what needs improvements or changes.
First of all, examine your product’s overall design. It concerns your website, social media platforms, and any digital and print materials you employ. That will help you to discover your strong and weak points and decide which pain areas need further development.
Step #2 Create pattern library
Look at the actual components you already possess and decide which of them are suitable for the design system you are trying to implement. Then start building a catalog of all the reusable components in your product, including patterns, colors, fonts, icons, etc. Creating a stockpile of UI components will pave the way for the design system’s visual language.
Step #3 Establish visual language
Visual language is what shapes your brand identity and contributes to better visualization of the ideas you want to transmit. It is the core of a design system. That is why you should consider thoroughly the role of each element the design system comprises.
Don’t forget about the triptych approach as for the usage of colors. Remember that most design systems include just three colors. It helps to keep the design simple and not to overload it with distractions.
It’s better to withdraw some commonly used fonts such as Times New Roman or Verdana and select the one that fits your case instead of its high recognition.
As for the spacing, a 4-based is now the most approved scale for many reasons. First of all, both iOS and Android use metrics that are divisible by or multiples of four so that they are scaled more easily. Also, standard icon size, employed by most operating systems, tends to stay 4-based. Using the right spacing can save you from inconsistencies in the navigation and lead to a readable, pleasant content disposition.
Icons can be useful for mitigating language barriers. Thus, you can place an icon near a CTA, introducing a visual explanatory of the intended action.
Step #4 Document what each component is and its function
Documentation principles are what keep all the participants of the designing process from wandering through possible variants. An informative guide can direct the team and push them to make the right decisions.
Ultimately, what makes a great design system?
Irrespective of the components that comprise a design system, a good one is easily reusable, robust, and well-documented. Most importantly, an excellent design system will do the following:
- improve the design process and make it more efficient and dynamic;
- reduce costs and time expenditures;
- contribute to better communication between the participants;
- support each point of the design process and serves as a directory to the whole team;
- facilitate the handoff between design and development.
Have a look at one of the most significant design systems – Polaris, created by Shopify. Polaris reflects Shopify’s global presence and focuses solely on the experience of its users. It is all about efficiency and ease of designing.
The system includes all the necessary components and even more. It has an intensive data visualization section, the branch dedicated solely to the language, including voice and tone, grammar, and actionable vocabulary.
Unifying the designs and driving greater efficiency through well-defined, reusable, and cross-platform components are the core principles of the Shopify design system. As a result, it helps businesses to manage the global complexity, as their products scale, without losing the direction.
On a final note
The design system has come a long way to establishing a decent position within the scope of digital design. Progressively evolving from mere architecture principles to the theories of atomic and material designing, now it reached us as a smart, robust instrument.
With the help of its well-structured and reusable features, it’s easier to create excellent, consistent projects with fewer costs in less time. The design system, being a single source of truth for the parties involved in the design process, determines the direction for the whole workflow, which ensures the design won’t get off the right course.
Having an operative design system to complement your overall visual performance is well worth it. If you think of it, make sure you are through all the steps – starting from carrying out an audit to generating your visual language accomplished with well-documented patterns. Thus you will manage to build an efficient path to creating impeccable products.
If you still have any questions, contact us. Our Design Partner & Art Director Tanya will provide you with all the necessary information to blow out all your doubts.