How I Created my First Design System & What I Learned: The Basics
If you tend to be messy like me, you are most likely to need a structure around what you create. A system is best suited for consistency, reuse and iteration. A good system is also a bridge between collaborators.
Choose the right medium at first
We tried out and compared UXPin and Wordpress to create a complete design system where everything would be accessible and maintainable. UXPin offers a very nice solution providing a way to create prototypes, assets, library and documentation. Changing the size of a button will be reflected everywhere in the system. It is a very efficient way to create an evolving design system. It is mind blowing. Nonetheless, we chose Wordpress for it’s flexibility. It needs more work, but in the end, for other needs for the company like creating new and simple websites with Wordpress, it will grant us with better long term benefits. Along with Sketch, it is a very nice way to do it.
The structure
It is important to stay as generic as possible. Rules and components evolve and are there to cover most cases, not exceptions. Exceptions should be included when they appear, but shouldn’t change the rules. Try having as less exceptions as possible. If you don’t have any other choice, include it to documentation.
Furthermore, make a list of every pattern you will need for all Web products you have or will have. When you are done writing down each pattern that covers 90% of your products elements, it is time to create a navigational tree. It is hard to chunk 80 patterns. We were able to creates 6 groups that handled every patterns. We needed to be as generic and obvious as possible with names like ‘forms & authentification’ or ‘Filter, search & sort’. Then within each pattern, we have tabs in which we find: introduction information, UI design specification, implementation rules and usage rules.
When the time has come to creates assets, visual guidelines and/or rules, you need to start at the beginning.
1. Layout & style
UI specifications are introduced under this section. Design elements (aka UI library), color, typography and grids information are all gathered under this section. This is what we could call ‘the sub atomic elements’. With the Sketch plugin Brand.ai or the upcoming Sketch library feature, it will be easy to change a color and having the change reflected everywhere.
2. UI components / UI library
Then, creating the components before doing mockups is in my opinion the best approach of starting creating assets. If you are mandated to create a mockup, have the elements needed created into symbols before. Don’t create everything at once or you will get overwhelmed and lose considerable amount of time. Wait for the need to create a mockup to create components.
Sketch has proved to be a very efficient software to make assets. Along with the Atomic Design, every component should be created as symbols. With the Sketch plugin Brand.ai or the upcoming Sketch library feature, it is easy to be consistent as each change is going to be reflected in all components created. To do so, you have to create atoms, like a text field, a button or an icon. Then, use these symbols to create molecules, like a search widget. Then you can create organisms with these atoms and molecules, like a top bar. You should always start with a symbol to create a new component. If you don’t have the atoms and molecules to do it, create their symbols first.
Remaining chalenges
- Annotations: Sketch Notebook is a plugin that helps with it, but we have yet tried it. UXPin gets rid of this, but we made another choice.
- Responsiveness: potentially having 350 responsive symbols in order to creates thousands of responsive mockups is quite a challenge. The Sketch plugin called Auto Layout will be helpful in order to create quick responsive mockups.
3. UX patterns
This is where you get all the explanation behind a pattern: its benefits and limitation, how should it be implemented and why should you be using it. Rules cover all the patterns and should be applied according to your business. Start by researching for generic best practices then adapt so the rules suits your system best practices.
The goals behind a design system
- The first goal of a design system: consistency.
- The second goal, an extension of the first, is a tricky one: collaborating. The system should be easy enough to use for any collaborators, whether they are from marketing, business, design, sales or development. The system should be a bridge between everyone and a common ground for discussion.
- The third goal which is also an extension of the second: buy-ins. You can’t force people to use your system unless it is so useful and facilitates collaboration.
- The last goal: reuse. Trust me, you will save crazy amount of time and effort with having this structure up. You will then spend your focus on the deeper level of design for greater quicker and better results.
Feel free to read my other stories about productivity and philosophy
How Airtable saved my life as a craft
The new era: the one-tap buying
Slow Agility: a working paradox?
Finding my way of living
Please feel free to follow me or to comment any of my articles. :)
