Atomic Design Systems: A Checklist for Each Individual Design Component
Are you following every step that leads to success? Use this checklist to make sure that your atomic design system includes all of the individual design components that you need to build amazing UIs.
What is Atomic Design?
Atomic design is a design system created by Brad Frost in 2016. Frost wanted to create a design system that made it easy for him to focus on essential elements like color, typography, and texture. While exploring his ideas, Frost kept returning to the connections he found between design processes and chemistry. Naturally, he decided to call his approach “atomic design.”
Frost’s original approach included five categories:
- Atoms
- Molecules
- Organisms
- Templates
- Pages
The farther you move up the chain, the more complex the design becomes. At the Atoms level, you work with the basic building blocks of a design, such as color palettes and fonts. At the Molecules level, multiple atoms work together. For example, you might pair a specific color with a particular font.
By the time you reach the Pages level, you have a fully developed design. The design has opportunities to evolve in the future. For now, though, you have a design that meets your goals.
Frost calls this approach “atomic design” because it begins with the smallest element.
In chemistry, atoms are the smallest things to work with. In design, the smallest factors might include colors and buttons. Also like chemistry, the more atoms you put together, the more complex the project becomes.
Eventually, you have a functional creature built on the smallest elements possible.
When you design from this perspective, you should find that you create more consistent, simple, effective products that users will enjoy.
Atomic Design System Checklist
- Design Language
- Design Tokens
- Core Components
- Tooling
- Project Management
Design Language
A design language defines a project-wide style that guides teams toward a common goal. When done well, the design language helps products stand out from competitors. Some developers create design languages that guide product lines. When this happens, an app released today will share similarities with a website released two months later.
Developing a “Brand”
Designers successfully develop a brand when they create design languages that consumers recognize across products. When the average person knows that product A and product B comes from the same company, a brand has been established.
Developing a brand takes time as well as design skills. As a company releases more products, it has more opportunities to solidify its brand.
Copy and Content Requirements
Design language also includes copy and content requirements. Copy requirements may force writers to use a slogan on each page. Writers may also need to follow the same style guide to make sure they create a cohesive experience for users.
Content requirements can refer to any visual element. For example, the design language may require that the company logo appears at the same place on every web page.
Industry-Leading Examples
Industry-leading examples of design language mastery include Apple and Volkswagen.
Apple maintains a sleek aesthetic for every product, including its hardware, websites, and applications.
Any tech-savvy consumer will recognize an Apple product immediately.
Volkswagen built an alluring design language with its VW Beetle and Bug revival. The cars have a friendly design that welcomes drivers and promotes positive feelings.
Design Tokens
Design tokens make it easy for teams to maintain cohesive aesthetics while collaborating. Design tokens can include a color, font, or icon. Frost actually thinks of design tokens as sub-atomic particles. They’re more like quarks than atoms. When you put several design tokens together, you get an atom. When you start your design here, you ensure consistency throughout your project.
Color Palettes
A color palette includes all of the colors that your design team will use in a project. You can include dozens of colors to the palette. You shouldn’t add too many colors in a palette, though. Doing so will make it harder for designers to understand the intended aesthetic.
Typography
Many people think of typography and font as the same thing. There are small differences, but you don’t need to worry about them unless you design your own type.
Layout
A layout defines where items sit on a page. For example, a website may have a menu that stays on the left side of the screen, or a collapsible search bar that disappears when not in use.
Iconography
Iconography includes small images that digital designers use. You may use icons as guides for navigation or choosing features on a page.
Industry-Leading Examples
Many companies succeed because their designers know how to use design tokens extremely well.
Netflix stands out as a fairly recent example of a company that has mastered design tokens. The Netflix website follows a simple grid layout that helps users navigate their options.
Each page includes the Netflix logo. The company further emphasizes its understanding of design tokens by using white and red letters wherever possible.
Core Components
Core components occupy the atomic level in Frost’s atomic design schema. A web page or app needs several core components that users interact with. Core components can include buttons, search forms, and tabs.
What Makes for Effective UI Components?
Effective UI components need to work harmoniously together to give the user an intuitive experience. Ideally, new users can look at their screens and know what component they should touch to launch a feature.
The design of each component can contribute to a UI’s overall success. A green sign that says “Go” makes an extremely simple component that nearly everyone will understand.
As you add components to your UI, you need to think about how they work together. Does opening a hamburger menu push the search bar out of the way? Some users may find that frustrating. Are the icons so small that people can’t tap them without launching other features? You will lose users quickly when they find that the UI fails them.
Industry-Leading Examples
The smartphone photography app Halide excels at using UI components effectively. When users open the app, they see a small section of their screens that control the camera. The large circle clearly indicates that pressing the element will snap a photograph.
The app improves the user experience even more by displaying a small version of the previous photo. Users do not have to navigate away from their cameras to see what image they just took.
Tools and Platforms
UXPin’s platform offers several features that can help designers follow atomic design principles. Some of the most useful features include:
- Design systems
- Libraries
- Interactive elements
- Data inputs
Project Management
Project management involves making sure every step happens on time. Design collaboration only works well when someone manages the project. Without strong management, members of the team might find themselves waiting for someone to finish a job before they can contribute.
Project Management Tools
Some of the most popular project management tools include:
These project management tools work well because they let administrators assign tasks, set deadlines, and adapt to schedule changes.
Collaboration and Communication
Some of the best project management tools can also help your team collaborate and communicate. Asana, for example, lets users update each other on project milestones.
You don’t need independent collaboration and communication tools when you choose a UI design platform that offers real-time collaboration features. UXPin has seamless collaboration that works like Google Docs. You can watch your colleagues move elements across the screen.
UXPin will also let unofficial users provide feedback. Send a link to a trusted colleague or stakeholder to get meaningful feedback that contributes to your project’s success.
Create Your Own Design Systems
UI designs want to create intuitive environments that show off a brand’s personality and help users get the services they need. Many of those goals start with creating your own design system. Once you establish your design standards, everyone on your team will know how to stay within the guidelines.
UXPin makes it simple for you to create your own design systems. When making a design system, you can:
- Create a UI inventory with a list of accepted patterns, colors, icons, and copy.
- Establish design principles that will direct other team members.
- Build a color palette that prevents other designers from straying.
- Build a typographic scale that includes type fonts, weights, line-heights, and other features.
- Provide examples of designs that you would like to see other team members imitate so they can create a cohesive UI experience.
Now that you have a checklist of design components that will lead you to success, put it to practice by starting your free trial with UXPin. UXPin has all of the features that you need for atomic design. Come experience how simple designing and prototyping become when you have a platform that can do it all.
UXPin is the design process tool that helps product teams around the world turn ideas into products faster.
With Merge, UXPin’s revolutionary technology, companies like PayPal can easily solve DesignOps challenges. UXPin Merge allows you to design with React components to achieve full consistency with the final product.
