We have always imaged the web as a system made from pages. The first internet’s goal was sharing documents around the world.
However, the webpages are different from book pages: they are continuously updated, changing design depending on which device they are displayed on. In other words, these pages are dynamic.
How many times has a designer presented a website to a client in the three most common versions (desktop, mobile, tablet)? Unfortunately, this is just a way to communicate to the client how the website will never be.
Therefore, how can designers create reliable and consistent mockups?
Designing consistent interfaces is a problem for everyone, especially when you came across devices with different screen sizes every day.
If an interface is designed in a consistent way, every interaction will be intuitive and fluid. On the other hand, if it is not consistent, the user will struggle to understand how to navigate the website, often giving it up.
When an interface works, it becomes user-friendly and it helps the user to understand certain tasks without needing any instruction.
But how can we create a consistent interface able to be adapted to every device?
The first step is communication.
In the last decade, designers have created style guides, redlines, mood boards and more to make their design qualities clearer to developers and stakeholders.
Similarly, developers have started using frameworks like Bootstrap and Foundation which allow them to create websites faster.
Often, however, these professional figures speak different languages and establish different goals during the implementation of a project.
One of the most common problems regarding the developers is indeed the lack of a common language.
Not speaking the same language creates chaos.
However, as the number of screen sizes is constantly increasing, we need to find a way to create consistent interface design systems.
This is where Atomic Design comes to help us.
Created by Brad Frost, Atomic Design is a methodology for creating design systems. It is a series of visual building blocks that start out really basic and become more complex as you move up the design system.
These visual building blocks are organised by complexity into different stages.
These five stages are Atoms, Molecules, Organisms, Templates and Pages.
It is important to keep in mind that atomic design is a way of thinking rather than a linear process: you can go back at every stage whenever you need it.
Atoms are the most basic building blocks. They include basic HTML elements, colours, Heading Typography, Body text that have their own unique properties.
Molecules are groups of atoms that work together to form a functional unit that performs a specific action or represent a purpose. These are elements like a contact form, a team member listing, or an individual course card. Molecules give simple and reusable components.
Organisms are groups of molecules that are organised by importance, type or purpose. These may be described as pieces and parts of an overall page. These include features like course listing, the entire website footer and the related blog post section at the end of a blog post.
In the end, we have Templates and Pages. These are pretty self-explanatory but pages and templates give structure to multiple organisms. We typically make high fidelity page templates that are filled with either placeholder or actual content for the clients. Common templates are Home page templates, blog post templates, product pages, log-in register pages, contact pages.
Why Atomic Design?
One of the biggest advantages of using Atomic Design is the facility to create interfaces starting from an abstract concept, in order to implement the final user experience. We can simultaneously see our interfaces broken down to their atomic part and also see how those elements combine together to create our final experience. Atomic design may also be applied to all the interfaces, therefore not only to the web-based one.
How should you use it?
To create the interface design there are plenty of software available, the most popular is Sketch.
Front-end side, Brad Frost created a framework of components using the single elements of the atomic design.