Design Systems: Evolving The Way We Build
Design systems seem to be everywhere: they are one of the trending design topics on Medium, being written about by design studios in their blogs, and giants like Apple and Microsoft are making their design systems public for the design community to take notes from. Companies are either talking about them or introducing them to their design teams. But what exactly do they do?
Simply put, design systems are a way to build other systems.
They contain a blueprint of how things work together and explain how each component looks and interacts. Each design system can be roughly broken down into the following components that are shared across all teams for quick iterations:
Elements are smallest reusable and standardized units that are recycled across all areas of the system, such as buttons, inputs, etc.
Components are the combination of elements that are frequently used to establish a pattern inside the flow, such as layouts, tables and alerts, etc.
Brand identity of the product constituting of elements such as typography, brand colours, iconography and more.
Vision contains design principles, brand guidelines, do’s and don’ts and any kind of direction your team needs to take to shape the product.
Adopting a design system may seem daunting; change is hardly ever easy. But the benefits the design systems bring change the way how you design and help teams build more cohesive systems that end users come to appreciate more.
Indeed, the way a product is built defines it.
Alex Scheifer, the Head of Design at Airbnb once remarked, ”You can’t innovate on products without first innovating the way you build them.”
Design systems do just that.
Why Design Systems Work So Well
With a design system in place, the product team doesn’t need to build everything from scratch in the following scenarios:
- A new change is required
- Product needs to be expanded
- A new feature comes in
Instead, they pick components from a shared system of reusable UX, design rules and patterns that can be assembled to build any number of applications. It solves a number of issues that make it hard to scale up design. Some of them being:
- Unpredictable user experiences across products and platforms
- Repetitive work that can be avoided (e.g. which colour or icons to use)
- Inconsistency in design across products and platforms
- Design and development teams on different frequencies
Design Systems: Alive And Adaptable
A design system isn’t just a UI style guide or a library of code snippets, it’s the framework that ties up every element together into a singular entity. And building one isn’t a one-time thing; it needs regular iterations so it continues to evolve into its newer versions as change demands.
Anything that doesn’t work needs to be replaced so the consistency of the system is conserved and the entire team can benefit from it.
Why Have A Design System
Future Projects Made Easier
When you think in design systems, you not only think about your current project but future projects to come. Once a design system is in motion, it takes care of all the repetitive design decisions that your team can do away with and instead focus on the important things.
Design Systems Give You The Bigger Picture
Design systems give the overview of the entire project, skipping the context, to help product teams make sure everything fits well with each other and find out the consistencies that wouldn’t be apparent otherwise. For instance, is the same style of buttons used throughout the project?
Consistent User Experiences
By keeping the brand identity consistent, design systems remove the confusion among the teams about what the brand stands for and prevent users from feeling if they aren’t interacting with the same brand anymore.
A Reliable Support System
With a collection of reusable UX, UI, and code snippets that are tested across all platforms over time, teams effortlessly deliver products, consistent in look and behaviour. This means faster releases without compromising quality.
Moreover, the extensive documentation needed to build a design system seems like a huge task in the first place but proves a great help in bringing new teammates quickly up to speed with the project.
Design Systems And Us
As a design studio, we are constantly building new experiences. And using design systems not only helps us build consistent systems but makes revisiting a project at any point in time, effortless. It serves as a giant library of memories which explains the idea or the vision behind the code and design, on contrary to just skimming the surface.
Design systems also work great for clients. Once we hand over the product and the design system it was built on, clients can easily build layers over the product by referencing its design system.
There’s no denying that building a design system is no easy feat. And once set up and running, it needs to keep transitioning to its newer and better versions.
But in exchange, you get smarter workflows and design that’s scalable.
If you’d like to have a deeper look into design systems, here’s a list of some resources you may find useful:
- Design systems from the world’s leading brands by Invision
- Setting up a design system by Prototypr
- Atomic Design by UX Collective
