Make way for the Design System!

Does Design Systems mean anything to you? We often hear about them, about atomic design, and about a whole bunch of trends that revolve around them. There are even major conferences on the subject.

Design Systems, which have been flourishing for several years, have made an important place for themselves in the workflows of digital projects. The tools are more and more adapted, allowing us to design component systems and share them with as many people as possible. In an ecosystem where new trends are proliferating and not necessarily sustainable, it is legitimate to ask whether the investment is worth it, and whether it is worth it.

Today, we have the necessary hindsight to assess the Design System as a tool and the advantages it provides.

What is the purpose of the Design System?

A Design System, like a guiding style, is an internal and company-specific tool. It is a set of documents, tools, and rules used to develop an interface, a single repository. When the Design System is designed in a coherent way and adapted to a project, it becomes its nerve centre. It is a contact point for all project stakeholders, a reference library, and much more. Initially, this development responds to a need: it must adapt to the digital world in which we live, which, as you know, is constantly changing. Today’s “rules” or best practices in design and experience will quickly be replaced by others.

The idea is therefore as follows: to respond to this constant change, imagine being able to develop a product, or a site, by using a tool… Our famous Design System.

Is it a guide style or a Sketch library?

Not really, if at all. The guide style is part of the Design System but is not the only element that makes it up.

For years, design teams have been developing guide styles, component libraries, etc. Similarly, developers have been using tools such as Bootstrap to simplify their work. The objective is therefore to bring all these elements together so that a team can learn, create and grow with a single centralized tool: the Design System. Indeed, the latter takes up the principles of the guide styles, but it goes well beyond that. It is a complete guide for project design. A set of rules, principles, constraints, and best practices that can be used by everyone in the same team. To enlarge the line, it is characterized by a library of “ready to use” interface elements. These components are implemented and coded, and allow a team to design, develop and maintain product quality.

Prime tool

It looks simple when you look at it like that, but what do you put in it?

As you will have understood, the Design System is not to be considered as a single element. It encompasses a much broader set of different elements that make it up.

Based on this principle, we are therefore dealing not with a single deliverable, but with a series of deliverables that are likely to evolve constantly with emerging products and technologies. A Design System can therefore consist of a guide style, structural rules, components and patterns, and all kinds of resources that a project requires. If you are curious, UX Pin has created Adele, a repository of various public Designs Systems.

The primary objective is to facilitate the work of the teams that will use it. We must therefore see things from a different angle than “what makes it up?”, and rather guide reflection by asking who and how people will use it. Indeed, there is not a single and unique way to design a Design System, there are as many as there are teams that use them. By asking the right questions, we can create a Design System that fits perfectly with the objectives of a team and a project. For example, strict or rather flexible, with a vocation to evolve quickly, but also, the freedom or not that it will leave to the actors of the project etc.

However, one construction method is unanimously accepted: Atomic Design. The objective of this method, designed by Brad Frost, is to design component systems to be able to adapt to rapid changes. The name “Atomic” refers directly to the metaphor of chemistry, and evokes the “living” and evolving aspect of the method.

Atomic design is based on a methodology composed of five distinct and directly linked steps to create Design Systems in a more efficient and hierarchical way. The five steps are as follows: Atoms, Molecules, Organisms, Templates, Pages. It is not a linear process, but rather a model that helps to design interfaces or products as a coherent whole and a collection of sets. Each of the five steps plays a key role in the Design System hierarchy.

The Atoms

They are the basis of the construction and serve as a foundation for setting up the interface blocks. They are composed of basic HTML elements, such as buttons, colors, typography, labels, inputs, and any other elements that cannot exist alone without altering the functional.

The Molecules

Just as in chemistry, molecules are groups of bound atoms that acquire new and distinct properties. In our Design System, they are groups of simple Atoms, working together. For example, a form title, a search field and a button can be combined to create a search form molecule.

The Organisms

They are relatively complex user interface components composed of groups of Molcules and/or Atoms. These Organizations form separate sections of an interface. For example, a menu, or a product list grid.

The Templates

At this level, we forget the analogies of chemistry, and return to elements that speak to us a little more. Templates are used to structure the content. They are an assemblage of our organisms. Normally already developed (in code), Templates allow you to check the organization and prioritization of the various organizations created, and to test their behaviors.

The Pages

These are specific examples of Templates that make up what the page will be in its purpose. At this stage, all placeholders have been replaced by final content (texts, images, colors, pictograms, organisms and finalized molecules…).

Taking into account the dynamic nature of the content, Atomic Design makes it possible to create systems where all components are graphically specified, which is impossible to do on a case-by-case basis, on pages.

Today, we must no longer think in terms of “screens” or “pages” but in terms of component systems and modular elements. We no longer design pages but interface elements that can be used in any environment (mobile, desktop, screens, watches…).

This is what Google has done, for example, with Material Design: a set of design rules designed to apply to graphical interfaces. Designed to adapt to different media, Material Design has been used by the American giant to unify the graphic style of its applications and platforms.

Is this really useful?

It has not escaped anyone’s attention that the way we design our interfaces is changing. In a digital agency, it seems essential to regularly question workflows and co-creation techniques in order to be ever more efficient without losing sight of the quality and coherence of a project. It is true that creating a Design System seems to be an investment, and it is. It is still legitimate to ask whether there is an interest in taking the step or not. It is clear that such a tool offers a multitude of advantages when applied.

Maintain overall consistency on interface elements

It is a unique and universal reference system. The fact of quickly creating a Guide Style and working by atoms forces us to keep a real coherence and not to duplicate the graphic elements of the project.

Improving efficiency

Design systems save time and money. Instead of creating components from scratch, designers and developers can use existing elements and create new pages more efficiently and quickly. It is therefore no longer useful during the creation phase to decline all the screens, nor all the breaking points.

Take more time to think about the experience

As the visual elements are already specified in the Design System, this offers flexibility in the design of a site or product. Building or designing through separate elements allows us to focus on the essential and focus on the experience.

Facilitating development

The Design System brings together all the elements necessary to design all the pages of the site. Developers will be able to easily modify the elements present in several places. Maintenance and upgrades are made easier thanks to a version sharing system. As each element is developed over the course of the project, it is possible to carry out tests in a real environment more quickly.

Better communication in teams

This process appears to be the only source of truth in a project when it is used. It allows to have the same logic concerning the design of an interface or its development (with a common language for the name of the components).

An openness to multi-supports

Once well built, it is possible to design an interface for both a television and a smartphone. Thanks to the flexibility and modularity provided by atoms, it is possible to create the same interface on different supports while maintaining harmony and ergonomics. The same principle applies to the density of content that an interface can contain. Components can easily be stacked, duplicated or modified thanks to specific management rules.

Finally, designers should be reassured that creativity does not have to fear this kind of design systems, quite the contrary… Rather than declining the pages, the designer will be able to take more time on more creative aspects, such as thinking about the animated behaviours of these atoms/molecules, or giving meaning to the different components so that they work together, but also monitoring developments so that the final result corresponds to his vision.
A true work method to be integrated into workflows, the Design System facilitates everyone’s work, and makes it possible to focus on the most important objective: to imagine user experiences at the service of the KPIs identified at the beginning of the project.

Tools
Prime
Material Design
Atlassian Design System
Polaris
Carbon
Human Interface Guidelines
Nachos
Grommet

Sources
Medium
Prototypr
Ux Republic
Livre et conférence Brad Frost
Ux Misfit