What is a design system, why is it important and how to create one?

What is a design system, and why should I use one?

“A design system is a collection of reusable components, guided by clear standards, that can be assembled to build any number of applications.” - Design Systems Handbook by InVision

Design systems are generally used to bridge the gap between development and design. Whether designing for mobile applications or web applications, having a component library is going to be beneficial for both developers and designers. 

Why is a Design System important?

• It saves you a LOT of time: Instead of building the components as you go, you can reuse the same symbol (Sketch) or component (Figma, Adobe XD).  

• Consistent UX: Components are the same everywhere and behave as intended. This keeps both your brand and user experience linear and customers will know exactly what each component or element will do (Apple would be a great example for this!)
• High-quality and fast Development (you thought this would be impossible, right?): code it & reuse it. Every developer knows that reusable code leads to fewer bugs. Design systems act like component libraries used in development. This is a very natural process that results in speed and higher-quality code.
• Early validation: while creating a design system and getting it approved seems like a long and tedious process when you start, it compensates for the rest of the design process. Everything feels almost like putting up the pieces of a puzzle afterward or like building lego with ready-made components. And we all like Lego and Puzzles, right?
• Scalability: No matter how complex your digital product will be, nor how many customers will log-in to your solution, having out-of-the-box components as you build new features, help you scale in a clean, fast, and consistent way.

While building a Design System, takes a lot of time and iterations upfront, it is going to win in the long game for sure!

Here’s a practical checklist to make sure your Design System works:

• Keep in mind who you’re designing for: Who is going to use your product? That might influence the look and feel of your components. Beware of accessibility. If you’re designing with accessibility in mind, make sure to check out this guide.
• Research: ask developers what UI component libraries they use in development (Vue, Tailwind UI, Bootstrap are some popular choices) and about their limitations.
• Don’t forget about SEO: setting the heading styles and consistent typefaces across your application is important not only for SEO but also for your overall performance.
• KISS: Keep it short & simple. Don’t make 1000 alternations of a button if not necessary.
• Icons - they are everywhere and you should consider that right from the start: ensure you have consistent looking icons and designed for all sorts of flows and cases. Recommended sizes should follow a 2’s multiple rule (16px, 24px, 32px).
• Ideate, Create, Validate: get the devs in the loop early on. 

How do we apply Design Systems at Wolfpack Digital? 

We start by going over the wireframe to make sure we include everything we need. Almost all design systems have a base of necessary components. Here’s a short checklist:

• Buttons
• Cards (make sure they are responsive by adding constraints)
• Tables
• Icons
• Text fields
• Image containers
• Modals

After designing the initial version, we go over our small library with the developers and with the Project Owner and Client to make sure it is consistent with the branding and requirements.

Finally, we start puzzlin’ around and do the magic. 

Final Thoughts

While Design Systems are a very powerful framework, their use can be contextual. Designing and maintaining one can be pretty challenging. 

Are they a one-size-fits-all?
No, not really. If you are looking for aesthetics and you’re designing a small project on a lower budget, it might not be the best idea to dive deep into one. 

That’s a wrap! What do you think about Design Systems? Do they fit into your workflow? 

About the author:
Denisa, one of the UX/UI Designers at Wolfpack Digital, has a passion and a natural talent for app design and everything related to art. Call it a native talent or a result of her curiosity, but she has both analytical and creative skills that let her do the engineering around till she gets a perfect design. Denisa can replicate any design or style that you give her as an example adding her twist and style. Thanks to her drawing abilities, any idea can be turned into shapes and colors.