Shopify design system – Polaris
A design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications.
Design systems improve consistency and enable teams to build better products faster, by making a design reusable. Without a design system, in a long-term project, the user experience and the design might start to deteriorate as there are no strict rules defined from the beginning.
The component-based mindset allows you to easily define and improve your design over time. This helps reuse elements in development. Having a defined system from the beginning helps increase understanding between designers and developers, as well as easier project on-boarding for new team members.
Process
While creating a design system, many different roles should be involved. From designers, front-end developers to researchers and product managers. Having insights from different perspectives will help predict possible obstacles ahead of time.
Once you’ve gathered the right people around you, you are ready to think about the visual language of the system (colours, typography, spacing etc.).
For products already in production, the first step would be creating a visual inventory. There are two types of visual inventory. The first one is an inventory of the basic building blocks such as colours, typography, spacing. If you are doing this in Sketch, the Sketch-Style-Inventory plugin will help you to aggregate all colours, text styles and symbols.
The second one is an inventory of UI elements such as buttons, lists, modals.
To create an UI inventory, open all the screens of your product and screenshot all buttons, dropdowns, cards, forms, type styles and combine them into a presentation.
Example of a simple UI inventory for the Atlantbh Website
Creating an inventory will help you look back on some of the design decisions taken over time and identify certain design inconsistencies.
We suggest creating categories like elements, components, regions, layouts, that will help you browse through the inventory faster.
- Elements (Atoms) — are the basic building blocks like buttons and icons
- Components (Molecules) — are usually a group of Elements that create a larger component like a search form (which includes a form input and a button)
- Regions — these are groups of Components that create an area of the UI, like a top header navigation
- Layouts — how the pieces are laid out on the page
Example of Structure of a Design System by UXPin
Once you have documented all your visual pieces in an inventory, it’s time to define rules and principles for your design system, and to make sure everyone is following them.
The design system should be consistent, self-contained, reusable, accessible and responsive.
Guided by these rules and principles, you should refine/redesign an inventory of the basic building blocks and an inventory of UI inventory.
How to refine an inventory of the basic building blocks, or how to create a new one, will be the next topic I will write about. Stay tuned!