Material Design System
Design Systems. Prototyping. Documentation.
“A design system isn’t a project. It’s a product serving products.”
Goals
Flawless design consistency.
Document your design system and know that your entire team is using the same components and spec. Put an end to inconsistencies and confusion, so you can get your product to market faster!
The fundamental purpose of a Design System is to facilitate the work of the teams. So the first question we need to ask ourselves is not “What should I put inside my Design System?” but “Who is going to use it and how?”.
Once our target is defined and we have a first idea of what is already in place in the company (What is working or not? Which is the level of maturity of the teams about this subject? What are the existing tools?…), it will be easier to know where to start.
1. Purpose and shared values
2. Design Principles
3. Brand identity & language
4. Components & patterns
5. Best practices
Straggles
Scaling design ideas through projects, without putting standards in place, is a myth. With every new project, new ideas for color palettes, typography and patterns appear in the product, growing the inconsistency and increasing the maintenance cost.
this guide helps you with every step of creating a design system
(and includes bonus resources):
UI Inventory for the Design System
Organizational Buy-In for the Design System
Build a Multidisciplinary Design Systems Team
Establish Rules and Principles for the Design System
Build the Color Palette for the Design System
Build the Typographic Scale for the Design System
Implement an Icons Library for the Design System
Standardize Other Style Properties
Build the First Design System Pattern
Run a Sprint Retrospective
1. Purpose and shared values
Before starting anything, it’s essential to align teams around a clear set of shared goals. It will help building a vision and making sure everyone looks in the same direction. These goals will evolve with time and it’s normal. We just have to make sure that changes are broadly communicated.
2. Design Principles
Tools for designers & developers, patterns, components, guidelines…
Difficult thing to achieve - some abstract elements such as brand values, shared ways of working, mindset, shared beliefs…
3. Brand identity & language
A Style Guide -as indicated by its name- will focus on graphic styles (colors, fonts, illustrations…) and their usage.
Elements — the smallest individual pieces of the interface which act as building blocks for components (e.g. buttons, form fields…)
Components — independent and repeatedly used pieces of the interface built out of elements (e.g. toolbar item, page loader)
Modules — full functionalities built out of components (e.g. toolbar, search)
Layout definitions — All of the above use core files (such as variables, icon font definitions etc.) to unify styling.
4. Components & Patterns are at the heart of the System. All will help us to create them and deliver a consistent experience.
Create the Colors Inventory
Traverse the code files and list all the color variables and/or all the colors used in CSS files. A typical source of design inconsistency is the set of colors used across the product portfolio.
Create the Typography Inventory
In a complex project, typography can quickly get out of hand. Lack of consistent typographic scale used across the project makes the information architecture convoluted and hard to understand for users, while it also increases the cost of product maintenance due to fragmentation of code. By inventorying text styles, you show your team and stakeholders where styles become inconsistent.
Create the Icons Inventory
Create the Space Inventory
Space is the key ingredient of any UI and designers and developers have to manage it efficiently. Add to your inventory different kinds of grids used across the products and perhaps also dive deep into paddings in the containers to understand any inconsistencies.
5. Best practices
Besides the documentation, that is often directly linked to the System, best practices will accompany teams in a larger and more transversal way.
The idea is to dig into the general best practices and extract only those who make sense, based on the product and the level of maturity of the teams.
Best practices will help the teams to form and develop their technicals skills.
Thank you!!!
