Image by Bonneval Sebastien from Unsplash
DESCRIPTION
A Design System is a place where everything makes sense. It consists of components, patterns, principles, best practices, and is the ultimate source of truth. It’s documentation everyone needs in IT - Developers, Designers, Product Owners, and sometimes even clients.
Problem - Lack of a Design System 🧐
Let’s take MailChimp Design System as an example. They made it publicly available as they are probably proud of it and not scared of showing to others.
A well-thought Design System is a fantastic way to promote the company - both for clients and potential candidates - everyone wants to work where processes are well settled.
But it’s a lot of work. Choosing the right color palette, typography, spacing, layout rules, thinking through the whole Atomic Design approach and applying it to particular client needs is a Sisyphean task - it never ends.
Modern UI is all about complex state management, smooth transitions between views, data visualization - it’s really hard to code all of that from zero. As always, it’s about the right balance between design complexity and implementation.
It takes a tremendous amount of work to brainstorm, collaborate, and shape the unique company’s solution for composing UI and Designs. And, usually, it’s done in a wrong way due to lack of time or competencies.
When the product grows to multiple applications, things can easily get out of control. Components will be duplicated, designs might differ and the consistency won’t be kept. It’s a problem that a lot of companies are facing.
Let’s learn how we could possibly solve it or make it less painful.
Solution 😎
In the company I work, we switched from Bootstrap to Material - it was one of the best decisions ever and I don’t mean leaving Bootstrap behind, but rather not deciding on creating a Design System from the scratch instead of choosing Material Design.
We also cheated a little bit, as there is a Material UI for React which implements all of the Material Design concepts - that helped us a lot. We not only gained the fundamentals of a Design System which can be extended but also received an open-source library full of components = saved time both for Developers and Designers = mission accomplished 🚀.
I’m not against creating things from the scratch and making a Design System unique to your brand - it just needs to be well covered and worth it. Ask the below questions to decide if you could reuse something that already exists or you really need to do it from ground zero:
- Are we creating an MVP which needs to cover functionalities and the unique look & feel is not top priority?
- Do we have time and resources to create a Design System + explain it to Developers and make sure they have time to code it all?
- How much uniqueness do we need? Only icons and illustrations? Maybe decide on Material or Ant Design as fundamentals to cover base building blocks, cross-browser support, and built-in implementation for generic components.
When choosing a predefined Design System and the Library (e.g. for React) it adds some learning curve, but it also saves a lot of time as already mentioned.
If I would make this decision one more time - I would still vote for Material, it has this specific look & feel, and maybe Ant Design is more flexible and less intrusive, but I will leave the decision for you.
It’s also quite easy to create uniqueness with icons, illustrations, branding colors, and the font - the rest of the concepts is usually the same.
Closing Notes 📋
If you see repeating patterns in your products, when it starts to grow - it’s the best time to react and start brainstorming about a need for a Design System - whether it will be something from the scratch (huge need for uniqueness of the brand) or predefined (functionalities takes overlook & feel).
The next part will be about Happy Path Designs - in real-life scenarios, there is a lot of error handling, complex data problems, server limitations to consider and to include in designs (which often is skipped) 😱 .
Big thanks for reading the article, you're awesome! 🙇♂️
You can also find me on:
Thanks for all the support. ❤️
