Design systems are visual UI and branding style guides, along with the pattern library for interactions and transitions.
In a design system you would find the logo, fonts and color palettes for your products, along with how login works and how pages transition, and buttons, input boxes and other functional elements. A design system is both the rules for the UI and the rules for the UX.
The point of a design system is to keep everything within a digital product–and sometimes across digital products–consistant. This advantages both the users who aren’t forced to learn multiple different navigation and interaction patterns, but also your engineers who can work more efficiently by developing one button style that’s used everywhere, or one account creation flow that can be used with all the company’s apps.
Without a rule book for how the designs function and look, each product becomes an example of the whims and biases of the designer, product manager and engineers that worked on it. In a small company with just one product, that’s not such a big deal. But once you have more than a single digital product–even just an app and a website–those inconsistencies across branding, UI and UX begin to drag on the whole team.
It’s easier for everyone if once a decision is made about how users will create an account, that decision applies to all instances of account creation. That means you don’t have to litigate the user flow for each new app or website. Engineers can pull the code and with small tweaks reuse it in new products. And designers don’t waste their time making duplicate user flows and login pages for every product that crosses their desk.
The duplicate efforts alone can extend the production time and cause frustration not just for your design team but also for users. Consistency means less work, less ramping up for users, and less stress for PMs trying to meet deadlines.
If you haven’t used Zeplin, it’s a platform for handing off design artifacts to engineers (primarily) and stakeholders. One main advantage of tools like this is that they nearly automatically build a design system for you, out of the artifacts you push to the platform.
Another advantage is that they write their own specs, so you don’t have to call out colors, fonts, line spacing or any other spaces. For those of us who’ve lived long enough to remember doing all of that by hand, it’s a godsend. It saves days of work.
There are several drawbacks of design systems that it’s good to be aware of, and work to mitigate:
- It requires nearly constant updating and management. A messy, stale design system with old artifact and old styles is worse than no design system at all.
- It can hamper creativity. If a system is already in place–and is fairly unflexible and ridged–you may find it hard to innovate on styles and interaction patterns easily.
- It can be very complicated to use, especially if you work in a company with many products, requiring you to learn multiple systems and work within them.
But compared to the chaos of not having a defined style guide and established user flows and interaction patterns, none of these drawbacks make it strategic to forego a rigorous design system.