An overview and some quick tips on how to simplify your digital product design components and make them more efficient, ensuring better connectivity between design and development, as well as faster and more consistent product build.
How Atomic Design Works
There is a multitude of resources for the “Atomic Design” approach online, but this article will offer a brief overview of the process, followed by practical, real-world examples of how to use this strategy.
Essentially, the atomic design approach builds our components’ structures, from the smallest elements to the largest; the smallest being a simple text label such as title, referred to as an “atom”, while a group of elements such as title with paragraph would be defined as a “molecule”. A design molecule combined with an image will create a module, or “organism”. By stacking multiple organisms you can create pages, and with multiple pages you end up having a template. Using these terms allows us to think differently about how we organize and iterate digital design.
Creating Main Elements
After you have created your wireframes, the next step is creating a design style for your interface elements. Main elements such as text, graphics, media, and actions can have various styles, sizes, colors, shapes, spaces etc. This is where atomic design approach really comes in since the best practice is to create as few modules as possible (while ensuring you have enough creative freedom by the establishing the elements necessary to achieve a successful design), which will allow your product to be more consistent and cut downtime required for development.
After setting the main type styles, text labels, image sizes and ratios, colors and buttons, try to re-use any created elements as many times as possible, bearing in mind there might be a need for another text size, label style, button, or another element, based on the page’s context. Again, you don’t want to hurt your product quality and experience by being too conservative with your elements’ reduction and simplification.
Here is an example of having four combined text styles re-used for different purposes within different molecules:
Creating Modules and Repeating Patterns
Let’s create a few module (“organism”) examples. In this example, we will build a “full-width” module which consists of an image, title, body text, and button:
Notice how the bottom padding is larger than the top padding. This strategy comes in handy for you and your developer, so when it’s time to stack each module, one under another, the top and bottom paddings are standardized and consistent. This keeps your design clean and also makes it easier for the developer to recognize the design pattern.
A good way to standardize your elements, besides following your columns/layout grids, is to always keep your elements’ spacing similar with increments of, for example, 10, 20, 40, 80, 120, 160 pixels, etc. In the example above, the top padding is 40px and the bottom is 60px.
Here is an example of stacked modules but with secondary variations, in order to have more interesting and dynamic layout elements on our website:
Now, imagine removing the dashed lines and you can see how this standardized padding works. Not only does it help create quicker and more precise element stacking, but also it keeps our modules’ components a healthy distance from one another, prepared to add different modules below the displayed organism:
Responsive Layout Adjustments
When building a website and thinking of how it will all come down together from desktop to tablet or mobile, we need to be as efficient and careful as possible while adjusting elements for smaller screens. This can be tricky if we start to randomly resize elements and type to simply force them to look good on a phone. Not only that we will lose track of our styles, but we will give our developer a massive headache.
It is clear that not all type styles can keep their original sizes and specially size ratios. This is because larger screens allow us to have impactful and large hero titles which can be almost 10 times bigger compared to a small text link or blog post author label.
While adjusting text sizes, always try to be consistent regarding values. Alignment might change, but ratios between text size and line spacing should remain similar. If for example, we had H2 title size 32pt with leading 48pt (32/48), we could set it up for mobile to be 24/36.
When it comes to delivering website layout specifications for tablet and mobile, it is important to generate the main modules and their behavior on smaller breaking points, so that a developer can follow them accordingly. Keep in mind that re-using element relations like paddings or spacings can improve the layout, and make it easier for the developer to recognize patterns and be more precise.
In case you have graphic elements like icons or avatars, the best way is to resize them by some round increment like 80% or 50% etc. This will keep their ratios and appearance consistent.
The Atomic Design approach allows website design standardization to work optimally for web designers and digital teams. Keep your designs clean, by styles and structures, because developers also need to understand your patterns and use them. In order to achieve this, it is crucial to define your modules through the wireframing / prototyping phase.
Think ahead when you build each module; consider them as lego blocks, which you just place one on top of another to build a castle. In the end, developers need to see your blocks and understand how the castle was built in order to reproduce it! These tips have helped Nolte build countless successful sites, with great design and ux.
What tips do you have for utilizing Atomic Design Approach? We’d love to hear them- share in the comments
Become an expert at running design sprints with a remote team.
Ensure high-quality digital design with these best practices.
User Stories: Why you should use them and how to do it.