We Are Mobile First
Atomic Design methodology pairs software development with the laws of chemistry in order to build user interfaces that are easy to modify. So, what exactly is it?
Let’s take a look...
Are we taking a break from informatics to discuss chemistry? No. The very same definition of a chemical atom can be applied to software development. How? We’ll explain in this blog post.
We should probably start by defining atoms, right?!
An atom is the basic unit of an element. An atom is a form of matter which may not be further broken down using any chemical means.
The chemistry nomenclature is used by its correlation with this design.
If you have two atoms of oxygen and two of hydrogen, you would have a molecule of water. If you have even more atoms and molecules, you can create a more complex organism - like a dog, a cat, or a human!
By applying this thinking to software development, you’d be able to streamline your work. For example, each component would have its own responsibility and would be able to be tested on its own. Following its completion, any issues that arose during the testing stage would, therefore, be much easier to identify and solve.
In software development, Atomic Design helps you build user interfaces as component systems.
You first consider what you need to build your interface. From there, you start by creating the smallest meaningful items, atoms. When all of the atoms are built, you turn your attention to the slightly bigger meaningful items until you have a molecule. Once you’ve combined several molecules, you’ll be able to create a more complex structure, an organism.
You're probably thinking that this is all well and good but…
What is an atom? What is a molecule? What’s an organism? How can I identify them?
Let’s experiment with an example app in order to take a look at each of the step-by-step components.
An atom is the minimum meaningful piece of user interface that you can build. In this example, for instance, we can break it down into the following atoms:
Simple, isn’t it?
You simply compress the views into as many units as possible.
Once we are able to identify the atoms, we can gain a better understanding of how to create a molecule.
Before we continue, find a pen and paper, or open up a new document, and write down which ways you could combine the atoms to create the molecules needed for the different items in the app. No cheating!
Are you ready for the solution?
Once we combine the atoms to create more complex structures, we can identify the following molecules:
As you can see, the image atom is not yet part of any molecule.
The image itself has its own meaning. If you want to reuse this image in another part of the app, you don’t need to have it coupled with another atom. The ‘likes’ molecule needs to have the “like” atom and the number of likes atom.
One of the things that the Atomic Design methodology helps us with is moving components around pain-free. For example, you’re able to move the ‘like’ bar to the top of the image without affecting any of the other components that the page is composed of.
Now let’s take a look at organisms.
As before, try and identify them for yourself first.
We need to group together the molecules in order to build an organism with bigger functionality that is able to work on its own. In this example app, the organism would be the post element.
This means creating something that is able to be repeated throughout the user’s feed, with the top and bottom bar remaining the same throughout.
Once you have created all of the atoms, molecules, and organisms, it’s time to build your template.
A template presents the user interface without real data in order to demonstrate the underlying design structure. Use the aforementioned mock data for the template.
Once you have your template ready, you can fill it with data in order to get your page:
This is what the app would look like once it has finished working with real data!
Here’s a clear overview of the steps we’ve just taken, using the Atomic Design methodology, to create this page:
By applying the Atomic Design philosophy, you can build app UI in a way that’s simple to modify. If you wanted to make changes to your prototype, all you’d need to do is move the components!
When we created the Container Framework earlier this year, we called upon this methodology to build a data-driven UI which would make it easy for us to make changes to the layout without needing to build and upload a different version of our client’s app.
We simply changed the identifiers of the components they wanted to alter, and ensured they were in the right order, and that was that!
What are your thoughts on Atomic Design? Do you find it useful for your software development projects? Tweet us and we’ll be sure to retweet the responses!
For more information, check out Pattern Lab and Brad Frost.
We Are Mobile First is a digital product agency based in Barcelona helping to transform businesses in a mobile-first world. We share weekly content on everything from Android Q to time management for developers.
Follow us on Twitter, LinkedIn and Medium to be notified of our future posts and stay up-to-date with our company news.
(image credit: Brad Frost)