Intive-FDV Blog

Design Systems: What Are They and What Is Their Purpose?

What do companies like Atlassian, Airbnb and Trello have in common? All three, and many others, have adopted the Design System methodology to manage the visual side of their projects. But what exactly is a Design System?

 

Components of a Design System

A Design System is a set of rules, limitations and principles to apply when developing a project. It’s a voice and a style and has elements, but it’s more than that. A Design System lays out how to use those elements in order to keep a product consistent.

We will use the Atomic Design concept, developed by Brad Frost, to explain how elements work together.

Between Design Atoms and Molecules

The five stages of Atomic Design are:

1. Atoms: the minimum units from which we can create interfaces, including basic HTML elements like inputs, tags and buttons. They have unique features that differentiate them from the rest. If we take a general look at atoms, we can quickly understand what the style of the system is.

2. Molecules: a combination of different atoms in order to create a basic reusable element, like a tag with an input and a button.

3. Organisms: groups of molecules and atoms that form the distinct sections of an interface.

4. Templates: they articulate the organisms in the page structure and display all the necessary page components that are functioning together.

5. Pages: they are specific instances of templates, with the real representative content in place.

Benefits of a Design System

In one of the projects developed at intive-FDV, we are currently creating a Design System. This project has been going on for some time now, involving several teams that are working on different parts of the product development, something that has caused many inconsistencies.

Precisely, the purpose of a Design System is to put everything in place. The ultimate aim is to reuse the components and, as a direct consequence, increase efficiency. Given that elements are standardized and scalable, the product’s consistency can be maintained and we can keep growing over time.

One of the first things we noticed when reviewing the application was inconsistency in the use of colors and font faces. For example, there was a complete discrepancy among sections, which made the application less visual-friendly. Buttons were yet another pain point in our system. This revision helped us establish priorities: we were able to determine which elements to include in our Style Guide and estimate the effort and impact this would have on development. In constant collaboration with the development team, we are now beginning to define standards and patterns for each one of the elements in our system, which helps us to not only validate efforts but also establish priorities.

One of the main reasons why Design Systems are so popular is the number of benefits they bring to projects. Having a single source of truth that designers as well as developers can take as reference helps us stay aligned, enabling collaboration and scalability and avoiding consistency problems. In addition, this has a direct impact on efficiency and reduces workloads. All of this is too good to miss, don’t you think?

Eugenia Torres

Eugenia Torres is a UX designer at intive-FDV since April 2018. Graphic designer graduated from the University of Buenos Aires (UBA), she is currently attending a specialization course on Design Thinking at the University of Palermo (UP). Travel fanatic, she enjoys not only the journeys themselves but the organization in advance and the remembrance through her photos and diaries. The one to blame? Jules Verne, whom she read with fascination as a girl. Her biggest dream? Since she saw Indy in The Last Crusade: to meet Petra.

Soledad Mari

Soledad Mari is a UX designer at intive-FDV since September 2016. Graphic designer graduated from Universidad de Buenos Aires, at the company Soledad participates in web and mobile projects where she is in charge of the initial research, architecture, wireframing, User tests and UI design. Polyglot and former theatre student, she’s a confessed fan of beach landscapes.

Add comment