Short, to-the-point explanation of what a Design System is
It’s a component and visual library based on reusable code. The idea is to organize the recurring functional and visual elements of multiple projects into a single project, and turn it into a UI/UX reference tool.
Think of it as a sort of library of sorted and ordered Legos.
Image par diogenes_3 de Pixabay
This tool benefits developers, designers, product owners and testers alike.
For developers, it will facilitate collaboration (a single component for the different business needs of projects), maintenance (a single codebase to maintain with a versioning system) and technical evolution (fewer dependencies and therefore fewer technical issues).
For designers, it will enable them to achieve true visual and interactive consistency in corporate projects. The same interaction rules and graphic guidelines will be applied. This ensures product quality and ergonomics.
And finally, for other project contributors such as product owners or testers, it facilitates all verification and compliance work based on the initial requirements.
With each component isolated and independent of any specific project, it’s much easier to test and ensure the result matches the project requirements and acceptance tests defined at the start.
Photo by Balázs Kétyi on Unsplash
Why did Mindbaz need this?
At Mindbaz, we have quite a few projects, some with a long history. These projects feature different designs, with more or less similarities and differences.
Have you ever noticed?
The deeper you go into a project, the more complicated it becomes to maintain this consistency. Whether from an interactive (UX), visual (UI) or maintainability (code quality) perspective.
When you start working on a growing number of projects at the same time, there comes a point when it becomes complicated.
Technical issues can pile up, run phases can take longer, and become a real headache to keep everything moving forward and in sync (I’ve been there!).
We asked ourselves what could be done about these issues:
1. To keep on developing projects
2. To ensure the quality and resilience of existing systems.
Setting up a design system turned out to be the best solution!
Setting up a design system for your web projects: The Mindbaz experience
So there’s no single method here. It depends on the environment you’re working in.
If you do some research, you’ll quickly realize that there are plenty of tutorials on a wide range of technologies.
At Mindbaz, the front-end is built on Reactjs and combined with Material UI to render the interfaces.
We wanted to build our design system on top of this.
Our Design System resources
You don’t need a lot of resources to get started:
- our preferred front-end stack (React / Typescript / Ecmascript*)
- a technology to display our components in our library (Storybook*)
- a package management technology to host and version our components (Verdaccio*)
*: what we use
From this, all you need to do is create a new project with the simplest possible architecture.
What we’re interested in is a directory containing all our components, sorted by use. Light, easy-to-read component
Don’t hesitate to create several files to separate the different layers, such as rendering, styling or type interfaces.
The lighter the component, the easier it will be to maintain and evolve without creating bugs or regressions (especially as some larger components can be made up of other smaller components (just like legos!).
We strongly recommend running tests (unit tests and snapshots) if you don’t want to worry about a few accidental modifications!
One last word of advice: work in steps, starting with the smallest elements first.
Before creating larger components, it’s best to define the styles using a personal theme (fonts, colors, spacing, etc.) and to work on the basic native components (buttons, text fields, forms, etc.).
This will save a lot of back-and-forth for future development, and all you’ll have to do is pick what you need from your library.
Discover our training courses to make your email campaigns effective