Design systems
Design systems encompass everything designers and developers require to build and scale digital products.
Design systems ensure that there is consistency across a user interface and are pivotal in providing a seamless user experience.
Introduction to design systems
A design system is a set of design standards and documentation accompanying a UI tool kit, including UI patterns, UX design principles, and components.
What are design systems, and why are they important?
Design systems are more detailed and in-depth versions of style guides and component libraries. Designers must use the components and information in a design system as if it were an instructional manual, this ensures that all interfaces have a consistent look and feel to each page.
The role of design systems
At Make it Clear, we follow Brad Frost’s Atomic design methodology, where the design system is broken down into 5 sections: atoms, molecules, organisms, templates and pages. Following this methodology plays a role in creating a cohesive and familiar user experience.
The benefits of design systems
The creation of pre-defined elements and styles facilitates swifter product development and prototyping, fosters improved communication across teams and reinforces brand identity and consistency.
Supporting your users needs
Maintain brand consistency
Increase harmony across user touchpoints
Improve adaptability
The 5 components of a well-structured design system
Component 1: Atoms
This section outlines the design elements, such as colour palettes, typography, iconography, and imagery guidelines. These are the foundational elements that help to create everything. It specifies the exact colours to be used, font choices, sizes, and how to create and use icons and images consistently across the product.
Component 2: Molecules
Molecules are the next part of the building blocks. They are created by joining different parts from the ‘atoms’ to create new components. Examples of molecule elements that are project-dependent but typically consist of things such as banners, breadcrumbs and button groups.
Component 3: Organisms
In the same way that atoms create molecules, atoms and molecules create organisms. Organisms are project-dependent but can consist of cards, carousels, date/time selection and tables.
Component 4: Templates
Templates are the next level of a design system. These are blank pages that show the design’s content structure and establish the hierarchy of organisms without using any specific content.
Component 5: Pages
Pages are the final step of atomic design, they are a more specific version of templates. This is where all content gets placed and builds out the final iteration, which gets passed on to developers.
What’s included
A design system including atoms, molecules, organisms, templates and pages according to set UI patterns, UX design principles, and components.
Why choose Make it Clear
At Make it Clear, we take an evidence-based approach to everything we do. Understanding your organisation, audiences, and the context in which they interact is paramount to how we work and deliver a best-in-class user experience.
