Some time ago, Polish young youngsters chose a 'jug' word as the most popular in the "Youth Word 2018" plebiscite. Meantime, the whole design world was struggling with all kinds of buzzwords. From the "mobile first year" through tagging all design interfaces with a 'user experience' keyword, to naming style guides as Design Systems. Today, we are here to talk about a design system and, at the same time, to do our homework.
Mysterious Design System
People keep talking about Design System, but still, even people from the design world don’t know what it consists of. Sure, it’s a buzzword. Sure, it’s not something new in design. And finally, sure - it’s a robust project!
"We are really confused about what a design system is”
Sarah Federman, Adobe, "Distilling How We Think About Design Systems”
And this statement is true. Design System is not something new, but it’s quite hard to describe it - it can be mysterious.
What is a design system?
If I had a few seconds to explain it to you what a Design System is, I would start with the following definition:
A design system is built of a visual style, documentation and code snippets. You can copy and paste elements (components) from a library and build a new project very fast.
To sum up: design tools, fragments of code and descriptions of UI elements, that are implemented to a Design System, make products adopt more efficiently and cohesively.
We can say that a Design System is a connection between User Experience, Front End and Visual Design.
" Almost always, a design system offers a library of visual style and components documented and released as reusable code for developers and/or tool(s) for designers. A system may also offer guidance on accessibility, page layout, editorial, and less often branding, data visualisation, UX patterns, and other tools.”
Nathan Curtis, Founder of UX firm @eightshapes, Defining Design Systems
Design System is not a style guide
First of all, what is a Design System? If I am to tell you what it is not, surely a Design system is far from being a style guide. We can compare that issue to the User Experience and User Interface design. User Interface Design is a part of User Experience, but not the other way around. A style guide is focused on, e.g. colours, fonts, logos and other brand issues, which are only one of many elements that build Design System.
Design System is not a .Sketch file or dev environment
Of course, we have code snippets and repositories (such as Sketch libraries with nested symbols, Photoshop or other graphics files). But those are only components of a huge and complex system. Design System is not a graphic file.
Design System is a product
Before we start, what is a product? In my opinion, we deal with a product when something creates value for a user by solving a specific problem and providing a benefit.
"Products need full resourcing and support from a cross-functional team in order to be built, maintained, and evolved. We saw teams comprised of areas of expertise including UX PMs, Producers, Product Owners, Design, Engineering, Research, and Production.”
Josh Mateo, Jillian Nichil (Spotify), “A design System isn’t one size fits all”
A Design System constitutes a product since it addresses consistency issues, provides guides and molecules (such as ready-to-implement code snippets and other UI elements), and helps each specialist improve project efficiency. Atoms build components, which are described by style guide and other abstract issues. A Design System consists of a style guide and components - everything is connected. A product is a combination of those elements.
Weaknesses of design systems
- Reduces designers’ creativity. Design System is also a set of rules which define what you are able to do and how you should design. That’s true - we aren’t allowed to do what we please, even if some elements contained in the Design System don’t look the way we want them to. You have limited possibilities to solve a problem.
- Design systems do not prompt exploration and discovery phase (which is a base and a very important matter in User Experience design). We can’t discuss with a design system, our research is reduced to the minimum.
- Design changes very rapidly. Some decisions are becoming not up-to-date anymore and it’s necessary to review a Design System after a while.
Benefits of having a design system in your company
I can assure you that implementing a design system is not an easy peasy lemon squeezy thing. But it's worth it.
- Increased efficiency (after design system implementation and proper training, software developer teams and other people (not involved in ux/ui design) are able to implement functionalities more quickly based on ready-made components).
- Coherent brand (unification of the visual identification system – especially important when working with other suppliers, speeds up the development).
- Reduction of development costs (the system consists of up-to-date code snippets).
- Increased quality control of the project.
- Universalisation and component construction for easy and quick use in the future – it ensures faster implementation.
- Control provided (roles and permissions in a Design System support viewing, editing and managing libraries.
After these few words, we do realise what a Design System is, and how it differs from a style guide, and finally, we are aware of the pros and cons of creating a Design System. Let’s make this powerful tool right and let’s change a ‘buzzword’ into a real and effective design product.
Have you got experience with a Design System? Share your thoughts!
This is the first part of a series of articles describing Design System. The second part can be found here: Research phase.