Insights

Discovering the perks of Design Systems

September 20, 2021
6
min read
Discovering the perks of Design Systems
Design systems are making their way across the digital universe and are today one of the «hottest» methodologies used by companies worldwide.

|---Module:text|Size:Small---|

Design systems: what are they and why do we need them?

Due to its increase in popularity, more companies are trying to jump the hype train of design systems. So, before we get started, let’s ask the question: what are they exactly and why do we need them?

What is a design system?

“A design system is a set of standards intended to manage design scale using reusable components and patterns.” – Nielsen Norman group

A design system is the next step of evolution from the UI style guides. They are a collection of reusable components, rules and best practices, guided by brand standards that will empower every brand application by ensuring that work can be replicated quickly and at scale, using a single source of truth across functional teams.

Design systems aim to solve several challenges that are faced in both the visual design and front-end development stages.

Why do we need them?

Firstly, not every project needs a design system. Design systems are focused on the scaling and replicability of components. So, if we’re dealing with a project which consists of two or three pages and with only five to ten components, then we’re dealing with a project that probably won’t need a design system. Before starting, we should take a step back and perform an analysis on what will be the future of the project at hand. If we’re facing a long-term project or a project that is complex enough to have multiple pages or applications, then you should start selling the design system to your team.

Now that we have that out of the way, why should you evangelise this framework inside your team? That’s easy! In the long run, it saves time and ensures clear communication inside of a team of stakeholders, architects, business analysts, testers, developers, designers. Everyone will be speaking the same language because they will have access to the same framework and see the changes as they turn live.

Inside of a design system we design and code the component library (set of components used) and its associated style guide, which consists of both accessibility guidelines and rules for these components – such as headings, colours, paddings, margins, behaviours, iconography, etc.

|---Module:text|Size:Small---|

What are the main advantages of using a design system?

|---Module:text|Size:Small---|

What are the main challenges of using a design system?

Setting the foundations of a design system takes time and a team focused on perfectionism. Since the focus here is on creating the components only a single time so that they can be reused across multiple products or applications, this should be started by most experienced designers.

Everyone in the team needs to know how to work as a whole – working as individuals with a design system will result in broken experiences. Work the mindset of the team to work as one.

Thirdly, onboarding new members to the design system can be challenging at first due to the dimension it can reach. It’s important to document as much as possible.

Our approach inside Celfocus: atomic design

At Celfocus we’ve been implementing design systems for a while now and we’re constantly evolving our solution. We’re going with the atomic design approach, which was created by Brad Frost. Just like in chemistry, we break our components into atoms, molecules and organisms which will then be used to build templates and pages.

Atoms are the most basic elements such as form labels, inputs, or buttons. Molecules are more tangible as they are a combination of atoms bonded together so if for example, you’d combine a form label with an input or a button you’d get a molecule. Finally, organisms are the combination of groups of molecules that are joined together to form a relatively complex interface. Let’s say navigation, which would consist of several buttons and an image, would use several molecules and an atom (for the image) – all of these together form an organism.

With these components created, we’re ready to build templates that consist of several organisms and more static content feature placeholders for contents. Templates aren’t always used and are seen as optional. At Celfocus, what we end up using mostly are pages, which are built using every type of component from the atom to the organism.

What can we expect in the future for design systems?

In conclusion, the future of design systems is bright and with more tools allowing us to work collaboratively, we can see this evolving further. Each day, new front-end frameworks are allowing us to work collaboratively with reusability,and the same goes for the visual designers who can now work on the same canvas as they are speaking on the phone.

When implemented well, it can save time, ensure a great streamline of work and enable the entire team to work together on tackling complex challenges.

Design

Written by
Paulo Jorge Santos
Download White Paper
Ready for a deep dive?