How to build a webpage following Atomic Design ?
Atomic Design was introduced a few years ago as a new way to build web projects giving clean foundations to the structure of the code. We will see how it can easily be used in a lot of your projects, and why you should use it.
What is Atomic Design ?
Introduced by Brad Frost, Atomic Design is based on the idea that website pages should be decomposed in the same way that matter is organized in the universe.
Indeed, chemistry principles describe matter as single atoms, combined to form molecules, which are themselves assembled to create bigger organisms.
Frost uses these concepts to break down the design a website into 5 levels: atoms, molecules, organisms, templates and pages.
- Atoms: level with the most simple components of a page, such as html tags, fonts, etc.
- Molecules: combination of atoms to form simple but more complete components. An example can be a search bar, formed by an input, a label and a search button.
- Organisms: ensembles formed by several molecules, corresponding to each main section of an interface, such as a menu bar, or a sidebar.
- Templates: groups of organisms correctly placed to create a page, used to visualize the disposition of each object in the page.
- Pages: instances of a template with fake content to show an example of what the final render of the page will look like.
By its definition, Atomic Design’s architecture helps to prevent code duplication within the project, by using reusable components which can be customized depending on the location in the project but have only one definition, and so, no matter the level.
Atomic Design also respects the concept of modularity in the design introduced by Tim Berners-Lee, that gives strong foundations to a web project by creating distinct objects having only one purpose.
How to decompose a web page with Atomic Design ?
To build a webpage using the principle of Atomic Design, we need to decompose the page into different layers of components. Let’s practice with a simple example of the front page’s design of what could be a movie database, which is the template level of Frost’s Atomic Design.
The first step is to identify the different atoms of the page. To simplify, we can just focus in this case on the main area of the template, excluding the menu and the sidebar. We can notice 8 different types of atoms , which are simple html tags: an input, a search button, an active box (“Boxes”) and the inactive box associated (“List”), a label for the movie’s title, an image for the poster, some text for the description, and finally a button to start playing the movie.
As each movie box uses the same atoms, Atomic Design encourages to reuse them, instead of duplicate code.
Focusing on this main part again, we now have to regroupe these atoms into molecules. We can identify here 3 different molecules, including one which is repeated several times: the search bar (in blue, input + button), the switch to decide the presentation format (in purple, box + box), and the boxes presenting the movies (in orange, label + image + text + button).
Finally, we have to assemble these molecules to create different sections for the page. In this case, we can highlight 3, which would be the header of the page (in red), the sidebar (in green) and the main content of the page where the movies are displayed (in blue). These 3 sections are the organisms of our page.
Practical example using Geoblink Design System
At Geoblink, we created an open-source project using VueJS that can help to put in practice the concepts of Atomic Design: the Design System. This is the foundation of every component that we are using in our application, but we keep it completely independent.
Concretely, in order to implement the front-page we decomposed previously using the Design System, we only need to build 4 main components: a movie box (a molecule), the header of the main part (an organism regrouping 2 molecules: the search component and the switch for the presentation), the sidebar (and organism) and the menu (an organism).
- The movie box.
The movie box section can be wrapped into a GeoBorderedBox component, to have a better styling applied. This component is usually used with a GeoBorderedBoxHeader and a GeoBorderedBoxFooter component. For the body, only html tags are needed: an image and a text. Within the footer, we can reuse the GeoButton component with different variants to change the style: GeoTertiaryButton to get more information, or GeoPrimaryButton to watch the movie.
- The header.
The header can be considered as an independent component for styling simplifications. It is mainly composed of the search bar and a component to apply the switch of presentation (GeoSegmentedControl). For the search bar, we can either use the simple html tags for input and button, or the Design System’s components, provided with a slightly different styling: GeoInput and GeoButton.
- The sidebar.
The main style of the sidebar is already provided with GeoSidebarLayout component. In the sidebar, we can recognize 2 main parts (or molecules): the profile information with the label and the image, and the filter list. In the filter section, we can filter by different attributes, using a GeoSelect component when filtering by themes, or a GeoCalendar component when filtering by the release date of the movie.
- The menu.
In the Design System, we already have a component implemented with the logic of a menu bar, GeoTabBar. The only thing we need to decide is the type of style we want, that we can change with the property variant.
- The main file
With these components created, the main structure of the page is now simple to build and understand. All we need is some final css to correctly arrange each part.
In this practical example, we can see how Atomic Design helps with consistency by making reusability one of the main aspect of the methodology. With our devices being more and more various in terms of dimension, Atomic Design also helps with scalability: independent components can be rearranged easily allowing the page to be responsive.
As it is build based on this principle, Geoblink Design System is easy to use when creating websites. Design Systems in general can be used in a very similar way than Bootstrap, using pre-build objects and giving a style guide for the entire website. The difference is that they are based on components and not only style, which allows to have some logic already implemented (in GeoCalendar or GeoChart for example).
Want to know more?
- Brad Frost’s book, his article and the tool he created with Dave Olsen to play with Atomic Design: Pattern Lab
- Geoblink Design System on GitHub and its documentation
- Tim Berners-Lee’s article about modularity
- An interesting article from Richard Bray about the benefits of Atomic Design
Solène Gardies
