What is a Design System and what is it for?

What is a Design System?

A Design System is a set of elements designed and developed in a modular way and reusable on multiple screens. For example, the buttons of our product or service should have uniformity that will be maintained throughout all the screens (same size, same color, same interaction, etc). It originates from Brad Frost’s Atomic Design.

The elements that are part of the Design System are created, saved, and documented separately from the prototype of the product or service. The way to do this is very varied and depends on the project objectives and the team needs.

The usual thing is to make the components in a prototyping program (such as Figma), with documentation, and a code of said components, ready to be reused.

At Itequia  we carry out the design part in Figma, as well as the prototyping of the digital product, with which these same components will be used in prototyping with the same program, speeding up the process.

What are the benefits of making a Design System?

  • It will bring uniformity to a project since all the recurring elements will be the same. It is positive both for the users or clients, who will enjoy a good user experience and for the people involved in the project, who will be synchronized and informed.
  • In the long run, you will save design and development time because you won’t have to design each button from scratch every time there is a screen where there are buttons.

An important thing to keep in mind is that Design Systems require an investment of time in the beginning, which will be recovered as the product progresses and matures.

Let’s give an example: a mobile App, which launches a minimal version (with few functions) and, as the months go by, it adds new functions. New screens with elements such as; buttons, forms, etc., will have to be added in each update. Well, in the case of having a Design System, each button will not have to be designed or developed from scratch, but rather they will be reused on the screens that need them.

Thus, with the time that we’ll save in later phases of the project (where the elements to add which will already be designed), the initial investment in creating the Design System will be more than recovered.

Furthermore, a Design System is a living document, to which new elements can be added or existing ones updated as the project grows. So they will also need maintenance, but it is minimal time compared to the task of having to create each element from scratch each time it is needed.

What components should my Design System have?

It depends on the needs of your project. Some very common components are buttons, forms, navigation, cards, tables, icons, etc.

Before tackling the creation (or modification) of a Design System, we must make a list of everything we think we may need. It should be a fairly complete list, although it’s okay to forget something; the document can (and should) be revised as the product matures.

In this prototype, you can see a small example of some basic components, as well as their interaction. We recommend setting it to full screen for better viewing.

Existing Design Systems

It is not always necessary to create a Design System from scratch. Depending on the needs of the project, it is possible to use Design Systems already created, with extensive documentation and ready-to-use code. It is also possible to use an existing Design System as a base and make modifications to it (for example, change the font, colors, sizes, etc.) to achieve a more unique visual aspect, without having to do everything from scratch.

Bootstrap 

Bootstrap is the most widely used front-end code library (that is, code already written so that anyone can use it in their projects). On his page, he has examples of all his elements, so you can see all the possible options and interactions, and where you can get the code for each of them.


Sistema-de-diseño-Bootstrap-Ejemplos-Itequia-Design

 

Bootstrap’s strengths are the number of elements and variations it has, and its long history as a library (launched in 2011), which makes it known to many developers. The latter is an important point to consider when choosing a library that has already been created, since a library with little history, documentation, or people who know it can increase the time.

There are also Bootstrap UI Kits for use in Figma, which bring the same components but are ready to use in this program.

 

Sistema-de-diseño-Bootstrap-Itequia-Design

 

For which projects is a design system suitable?

It is appropriate to create one when you are working on a page or digital product that is going to exist in the medium-long term, especially if it is expected to grow or mature.

It is also suitable in projects in which people from multiple departments are involved since it is a common point for people from different specialties, where each one obtains information that is relevant to their work.

It is not suitable for short projects where elements are styled and used only once, or where the style changes completely each time it is updated. For example, an advertising landing that is going to be used only once for a specific action that uses different brand elements than usual would not be suitable for creating a Design System.

Whatever the needs of your project, you can contact us and we will help you design your product or service.

Subscribe to our newsletter

    How can we help you?