Basic structure of Design Systems
Design Systems are a set of standards for service design management. It aims to reduce redundancy in the creation of a shared language and achieve better communication and visual consistency across products through reusable components and designs.
Table of Contents
History
Looking back at the Bauhaus and Swiss designs, we can see some clues as to what we now call a design system. The Bauhaus (1919-1933) revolves around the idea that "form follows function." The idea is that the primary aspect is functional simplicity and not decoration of the elements.
This means that all parts of the page must have functions that focus on proportions, color theory, and working with the grid. Swiss Style, also known as International Typographic Style (1950s and 1960s), has taken the work with the grid a step further and focused on asymmetry and clean sans serifs.
Both of these crucial periods in art history focus on the idea of a unified design language with instructions on how to work with each pattern or element that should be followed.
It was therefore a major influence on the development of modern graphic design, desktop publishing, (a term for computer typesetting and thus the use of computer technology for word processing, images, etc.) and finally also in web design.
What is a design system
A design system is a set of outputs from various design disciplines that are needed for consistent and sustainable creation and it constantly evolves with the product, tools, and technologies used.
Their nature is that they embed building blocks of design into teams and workflows to create consistent user experiences.
It is therefore the embodiment of a system of concepts with a clear structure and meaning, which are in one place and are mostly driven by the whole team. What goes into a design system and how it is implemented can vary quite a bit from company to company, depending on the size and maturity of the design practice and the needs of the product team.
If you are looking for inspiration, it is definitely a good idea to start with the most well-known design systems that their creators are definitely proud of.
Why should we have it
A design system can serve as an educational tool. It is structured for both designers and developers so that all available information is easy to understand, even if it requires time to teach others how to use it. Explicitly-written user instructions and style guides are also good for those who are new to the team. Another huge advantage is the visual consistency across products, departments, and teams.
A design system provides a single source of components, patterns, and styles. It aims to unify designs so that they are visually coherent and fit into the corporate ecosystem. The creation of a common language for use across teams is one of the biggest benefits. In addition, a design system is also extremely useful when team members or design managers change roles.
Design systems, when implemented well, can provide a lot of benefits to a design team. — Therese Fessenden
Our design system reduces the pressure on design resources, allowing everyone involved in the development process to focus on more relevant issues. Designers can use existing elements and patterns, and do not have to delay by creating new ones. This allows them to create their presentation designs more efficiently. This is most useful when the web service contains a large number of individual screens or when you work on a team of several designers.
When is not needed
It is not always appropriate to put effort into creating design systems. According to Nathan Curtis, (who has long been involved in the creation of design systems), creating a user interface for a design system is more expensive than creating a user interface for a product team. Investing in such a robust system should be the result of careful consideration and planning.
For projects that are full of static, disposable creations, it may not be appropriate to use the same components across modules. Such web services will not use a design system and if it came to that, the result would be negative and all the costs associated with creating the system would not be worth it.
Another case where it may not pay off to invest in the creation of a system is in cases where there is no one on the team who is interested in building the system, developing its values and defending them. And not on an individual level, but on a team level.
Creating such a system is time-consuming and constantly evolving thanks to product team feedback. If you start with such an initiative, one of your tasks will be to convince management colleagues why it’s worth it to invest in its creation and how you want to achieve it.
What is inside
Design systems come in many forms and vary according to the diversity of each product. Most of them include a style guide, a component library, and a pattern library. In addition to tools for designers and developers, a design system should also include abstract elements such as corporate values, shared ways of working, thinking, and so on.
It should also document information architecture, motion and animation work, content creation principles, an accessibility description and other areas.
Such a system is not an output of individual or team work, but a set of outputs that constantly evolve with the product, tools and new technologies. It is good to point out that the design system consists of tangible and intangible elements, which is sometimes neglected.
In addition to the component library and definitions of basic visual elements, a design system includes standards and documentation. They describe how and why to use the individual parts of the proposals and for what purpose. This is beneficial not only for the developers and designers, but also for anyone who is involved.
Style Guide
The style guide describes the lowest level of design abstraction. As the name suggests, it defines the appearance and focuses on graphic styles and their uses.
It contains definitions of colors and color palettes, fonts and typography, icons, guidelines of the use of shapes, guidelines for product branding, and definitions of the use of a logo and its correct placement. It can also describe how to handle punctuation, spelling, grammar, and other syntactical elements.
The most common style guides usually focus on branding (colors, typography, logos, and print media). They also frequently offer instructions on how to write content, use an effective tone, and to describe visual and interactive standards.
Component library
A modern library of user interface components has a wide range of building blocks available to developers and designers. It contains the layout of components into individual areas or groups and, in better cases, the chosen methodology.
The component library should contain not only all reusable elements such as buttons, form elements, lists, headings, bookmarks, etc., but also more extensive patterns such as headers, grids, tabs, galleries, navigations, etc.
The individual components contain visual examples of all variants, types, and states. In addition to the name and label, they should have attributes and variables (such as size, shape, and color), code usage examples, library information, and design usage examples. They may also contain rules about usage in different situations, in which cases they should not be used, and when it is better to choose another component.
Pattern Library
The term pattern library is often confused with a component library, but there is a difference between these types of libraries. Component libraries specify individual user interface elements, while pattern libraries contain collections of groupings or layouts of user interface elements.
Pattern libraries are reusable combinations of components that solve a specific problem and help users achieve their goals and ensure consistency. In most cases, pattern libraries are not as robust as component libraries, but they are no less important for design uniformity. They also usually include content structure and layout options.
Wrapping up
Design systems are useful and save both time and money. They provide guidance to all involved in the development of digital products. But they need experts who can not only design the system, but also further develop, maintain, and most importantly, improve it.
Creating such a system requires higher initial and operating costs for both individuals and dedicated teams, and choosing to do so should always be considered carefully.