As a designer, I’ve struggled to decide how to kick off a project many times. Not every client has a clear idea of what they’d like their product to look like, so it is very likely that we found ourselves having to start from scratch. In those moments, it is important to keep your mind organized and try to figure out a process where you don’t have to handle the entire project at once; the famous “baby steps”.
A methodology that I always use when I start a project is Atomic Design. Over time, I found out that what helps the most when it comes to designing is starting from the smallest parts and growing from there, and this practice is the perfect way to do so.
Before we get into details of how I apply this on my job in LoopStudio, I’ll explain what this practice is about.
Atomic Design is a methodology created by Brad Frost seeking to provide direction on building interface design systems more deliberately and with explicit order and hierarchy. Its name was founded based on Chemistry and the study of the composition of matter. We know that the universe is made up of a fixed set of ‘atomic elements’, also known as the periodic table of elements. These elements are the building blocks of everything around us. At the same time, we can combine these atoms in order to create larger objects, and this understanding is what parallels perfectly with the design world.
The Atomic design methodology is composed of five distinct stages working together to create interface design systems in a more deliberate and hierarchical manner. (Source: Brad Frost)
Atoms represent individual design principles or basic HTML elements. This is our first step when it comes to designing, sometimes we start with a color or typography that we think fits our brand best. Once we have that, we think of what our website is going to need to be attractive and interactive. So we design a button, some icons, maybe an image.
Once we have our basic elements, it is time to start combining them to create bigger ones normally called Molecules. An example of these might be a form paired with a button, a card with an image, or another reusable component that may appear multiple times across the site. In LoopStudio we use it often to highlight announcements or guide the user to see more information about a subject.
Then, we begin to design more complex components. These are called Organisms and they are a group of molecules together. A good example of this is our navbar and the footer of our website.
Now comes the fun part, once we have our atoms, molecules, and organisms ready, it is time to start designing a template, which is a grouping of organisms that are reused across the site. Templates allow a modular approach to content structuring. The best part is that we don’t really need to think much about it; just start playing around and try different options until we have the structure that works best for our product.
Lastly comes a page, which is a combination of templates that are populated with real content. On the page, all of the different levels of design come together into a finished product.
Personally, I enjoy this methodology a lot when it comes to design because it simplifies a lot the process of creating a style guide, and at the same time, the product itself. When you break down components into basic atoms it’s much easier to see what parts of the site can be reused, and how they can be mixed and matched to form new molecules and organisms.
The way we organize this process in LoopStudio is by creating a library in Figma for every client, where we create the different components that we then implement on the designs we create. This is a very handy tool because the different assets we save are available for our use in any project that we start so we don’t even need to go back to the guidelines, we can just grab the component we need from the “assets” panel and apply it to our project.
The most valuable aspect of this is that it gives our designs consistency. At LoopStudio, we have clients with multiple products that derive from the same branding. They need to look great individually as well as in a group. Each one of them is going to have different components sometimes but all will start off from the same place; that’s what’s going to be the key for usability, the user can jump from one product to the other without having to learn how to use it because the overall will be consistent.
To achieve this, once the style guide is created, we use Storybook (https://storybook.js.org) to develop each component and store it at one place where the different development teams from the different products can access them and use it on the sites. Another great thing is that this practice makes it easier to update or remove parts of the site. As only one atom, molecule or organism is being changed at any one time, it is easy to ensure that any updates to a component are carried across to all other instances across the site. Similarly, unwanted components can easily be removed.
Closing thought
Our job as UX designers is to create the simplest and most enjoyable experiences for our clients. And to do so, we need to find the simplest and most organized practice to achieve our goals without losing our minds in the process. Breaking down the final products into small parts was what I found most useful in my time as a designer because it keeps me organized, is easy to iterate, and allows me to be creative and have fun while putting the final design together.
PS: If you’re looking for design inspiration check out this amazing post from Design Rush about app design.
Acknowledgements
I would like to thank LoopStudio’s design and marketing teams for their help writing this post.
References:
Brad Frost, A. (2016). Atomic design. Retrieved from: https://atomicdesign.bradfrost.com