I’m a french frontend developer with a graphic designer background. I recently had a new goal, filling the gap between designers and developers and create interfaces as a team. With this article, I want to share the best way I found to create a design system.
When I started writing this article I asked myself “Where to start?”. It could be obvious for some of you but this should be the first thing we need to think about when we engage in any new project. It’s healthy to ask ourselves the most basic questions.
By definition, a design system is a set of guidelines and rules that makes a product consistent and help the whole product team to understand it and easily create evolutions. It’s not only a pattern library of the product but also the way a team create a product. On this point I’m not the only one who think that way. Alla Kholmatova follows the same idea in her book “Design Systems”, and I would highly recommend this reading if you want to look deeper into this…
First of all, I must explain the context. Last year I was in a modern training in France. Now we can learn how to manage web projects, and I was curious, me, a front-end developper. So I tried.
In this training I was in school every 4 weeks. The rest of the time I worked in a company as a Front-end web Integrator.
The purpose of the training
The different themes are :
- Knowledge of the web world. Yes, it’s the main goal but contrary to our belief, all young people are not familiar with the web. Most of them are just good to post on facebook or to level up in warcraft. …
Why I asked me this question? I think it’s because sometimes I see my own code and I swear a lot. Or it’s because some people don’t care about their style and I swear too. But I love styling things and I decided to clean up my styles.
It’s my way to organize my properties to get cool, clean and readable stylesheets. I think I’m not the only one who cares about this and this is why I’m sharing it right now.
First I made a list of properties and I’ve sorted them by type and by importance. …
About
