|---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?
- Reusability: when designing or coding components, let’s say, a portal navigation, you just do it once. If in the next day a new page is created, your team will just import the navigation that was previously created and documented into the new page.
- Consistency: if the previous navigation we just talked about gets a new update in the next month, you won’t need to backtrack to all the previously created pages: you’ll just update the main design and/or snipped of code and this update on the design system will reflect on all of the pages.
- Collaboration: this is a team framework where everything we design and code is online, so design systems are built to support multi-functional teams.
- Design it faster: most teams strive to establish a process that will minimise the time to market however with a design system they can design and develop quickly without having to reinvent the user interface design. For example, if a new page is requested for tomorrow and the used components are identified, they’ll just need to be drag and dropped to the design and imported in the front-end.
- Single source of truth: everyone will always be looking and speaking the same language. Components and pages will be published and accessible to everyone on the project so if for example, someone wants to discuss how a table looks and behaves, they’d just open up the design system and discuss it, without having to guess or browse files on their computer not knowing if it was the latest version of the said tables, or not.
- Centralised feedback: teams can get feedback directly on the designs and publish new versions.
- Saves time and money: teams are shorter, closer and take less time to deliver.
|---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.
