Designers for years have been calling out for the digitisation of design systems, as have brands, who have seen positive customer sentiment for exposing their rationale and principles that surround the brands.
- Visual Consistency
- Functional Consistency
- Internal Consistency
- External Consistency
- https://brand.uber.com/
- https://creative.starbucks.com/
- https://design.studio/work/airbnb
A design system is a collection of reusable components that can be assembled to build products. Over the past ten years and since the standardisation of responsive design, designers such as Brad Frost have sought to bring order and hierarchy to the interface design process.
In 2013, Brad Frost coined the name for a block-based system: Atomic Design. Atomic design encourages breaking product design into smaller components rather than looking at each element as a unique design entity. When Frost formalised the atomic design methodology, his goal was to develop an approach that would make the design more modular.
He noticed that clients and colleagues referred to designs at a page level and rarely discussed the individual elements which combine to create those larger layouts and realised that we lacked a framework and terminology to bring the conversation down to an elementary level.
After researching how other fields framed the concept of modularity, Frost came across similarities in the study of matter composition and Chemistry.
In Chemistry, atomic elements have fixed properties that define them. For example, Oxygen and Hydrogen on their own are atoms with independent properties. However, when these elements are combined, they create molecules, which take on unique characteristics, made up of the atoms they contain.
Many companies have adopted Frost’s approach, and several have published their design systems publicly. Google, for example, refers to their set of “atoms”, “molecules”, and “organisms” as the Material Design system. Salesforce’s Lightning Design System and Apple’s Human Interface Guidelines are other good examples.
But in a nutshell, Frost’s Atomic Design methodology has five distinct stages, with the first three modelled after their equivalents in the Chemistry world. Each stage building on the previous and aggregates to create Templates and Pages.
- Colour
- Grid
- Typography
- Spacing
- Rules/lines/strokes
- Elevation and Shadows
- Image sizing
- Iconography
- Buttons
- Inputs and Form elements
- Avatars
- Button Groups
- Calendars
- Banners
- Cards
- Charts
- Comments
- Maps
- Media players (Video & Audio)
- Modals
- Notifications
- Pagination
- Placeholders
- Tables
- Tooltips
- Text-groups
- Header
- Footer
- Chatbots
- 50:50
- 25:75
- Home page
- Index page
- Section Page
- Article page
- Form page
Pages have with real copy and data ready for UX testing and development handover
This list is not exhaustive. The reality is that teams will call organisms different things, but the underlining elements and components will be consistent as they follow development and coding practices.
Here is an example of a file and design system I created for Mercedes-Benz.
Consistency is one of the core principles of proper design and user experience. A consistent design is intuitive, predictable and easy to understand. There are different forms of consistency to be found when building a design system.
Visual Consistency: Elements and components that look like they are made from the same mould and have high similarities in their visual properties. This relates to the sizing, colour, font, and anything that a user can see. Increasing the ability to learn how a product works.
Functional Consistency: ensures the user is getting the outcome they would expect when using the application. It helps make the user feel safe and familiar with the product by increasing predictability.
Internal Consistency: Allows users to focus more on their actions and tasks across an application instead of taking the time and effort to learn the user interface and how the action should be carried out.
External Consistency: External consistency comes into play when the same user interface principles are be reused across different platforms.
If a user has to learn how to navigate and interact with your website, they would appreciate it if the mobile application functioned the same way. So external consistency can be achieved by keeping things familiar across different platforms, systems or products.
Instead of having individuals from the different teams roam different folders and files to seek the knowledge they need, a design system provides everyone with all the documentation they need to get familiar with the project. Fostering collaboration across the project spectrum. Helping developers, designers, UX engineers, and clients share a single shared source of truth. In conjunction with providing consistent experiences for users.