Attempt To Explain: Atomic Design Systems
Why is it Atomic? Is it radioactive? Should I get tested?
Attempting to Explain
A core function of any given branding agency is to look at a complex situation (say, a business) and try and figure out a way to explain it to someone who has no idea about who they are or what they do or why anyone should care (say, a customer.) Typically they’ll try and do this in a way that stands out from the competition, in a way that the audience identifies with, and, if they’re really good, in a way that’s ultimately shared and celebrated and talked about by others.
For this reason, a good branding agency should be pretty good at explaining stuff in a compelling, original way. With that in mind (and now also this — sorry) here’s our Attempts to Explain Atomic Design Systems.
Strategy
Where Atomic Design is typically reserved for product/digital design, over the years we’ve come to believe that there’s no bright line between digital systems and brand systems… or, for that matter, brands and businesses, or businesses and their markets.
We think of each of these hierarchical levels as “layers of emergence”, where things get increasingly complex as you go from lower to higher levels: logos, type styles, colours, core words or ideas on the base level; forms and type hierarchies and colour pairings and simple turns of phrase at the next; page slices or templates or values statements at another; and so on.
At each layer of emergence, elements are either:
The simplified product of complexity at a lower level, or;
A function or force relevant to the given level.
What does that mean? It means that as we scale up from the smallest core elements to the more complex ideas and expressions of the brand we do two things: we use the assets created at the lower levels and also introduce new ideas or rules relevant to the current level. These new rules become baked into the cake at the next level up.
This allows for both creativity and coherence across every single level of a brand. We can introduce new ideas without breaking what’s already been done. And if a change is made to any given element on any given layer of emergence, it’s then automatically updated across all higher levels — much like CSS.
Delivery
Decades ago, when I first got here (last July) bright-eyed, bushy-tailed, all that — the idea of an Atomic Design System seemed like a very foreign idea, a complex set of rules, something I didn’t need to pay much mind too. Cause that’s just for designers, yeah?
Atomic Design Systems involve breaking down the design elements of a project into smaller, reusable components, called atoms, molecules, organisms, templates, and pages. Kinda like our design files… Actually, very much entirely like our design files…The ones we have to deliver…The ones I deliver… Ohhhh…
So we’re working with it at a higher level than say, designers would. But by having this setup, it actually becomes much easier to manage and maintain consistency across the entire project, across every client, from the smallest design element to the largest page layout. It’s a organisational dream.
This consistency is essential to creating a cohesive user experience throughout our entire agency. We’ve got new blood coming in all the time (shoutout to Alex) and projects change hands sometimes, so instead of the where is this why is this here routine, we tend to keep things Atomic.
Development Team
So, when it comes to development, the goal is to make sure our codebase is easy to work with, flexible, and can be changed at any time to suit our needs. Atomic design is a methodology that helps us achieve this by breaking down websites into a series of manageable components that can be used consistently throughout the site.
The smallest component - or atom - represents the simplest form of functionality, like a font or a colour variable. Molecules are slightly more complex and often get reused, such as a heading component that has a specific font and colour. Organisms are even larger components, like a section that holds a heading.
By creating a master version of each component, it's a lot easier to maintain our codebase. We don't have to repeat ourselves, and we can update everything from one place. Using this approach makes sure everything across the website is consistent from spacing and alignment to all the other styles associated with that component.
For example, let's look at the grid component. It's a wrapper for our pages and sections that help us produce a responsive design and make sure we have consistent spacing, alignment, gutters, and padding across the entire site.
So, in short, atomic design helps us make development simpler, more consistent, and faster. By breaking down our website into reusable components, we can easily make any changes we need to while ensuring an excellent user experience. This leads to a website that is easy to use, read, and grow, benefiting both users and developers.
Design Team
Atomic Design. It’s the methodology that reframes design by thinking about a brand as a collection of cohesive, interdependent parts. It bridges the gap between development and design in the quest of producing beautiful, functional work.
One analogy might look something like this, with grouped components existing amongst an ecosystem or hierarchy. Something that superficially looks stunning is allowed to be because there’s a deeper level of resolved complexity. Solve it deeper and every thing else is resolved. Atomic Design Systems allow us to get the most of our brand, meaning that everything we make is bigger than itself, its interconnected in a dependent system
Atoms are singular components that live on the simplest layer of existence. In designer terms this could look like an icon, a text element, a logo, a shape or an image, and doesn’t have to be small.
Molecules, a small group of Atoms, this may present as a button, a text lock up, an image and text caption. Molecules can include interactive variants triggered by hover states or other user interactions.
Organisms, a collective of Atoms and Molecules grouped to substantiate something larger, such as a header, a footer, a banner, an image or text block, a call to action. These are the key elements on a page.
Templates, a series of Organisms that create a page. A high level placement.
Pages, a series of instances that create the pages displayed on a website.
With everything broken into its smallest parts and then assembled into slightly larger parts it means that there’s always a place to start from when you’re creating something new. 80% of the design decisions are made based on the existing system meaning we can spend that extra time elevating the brand, with anything new folded back into said system.
Attempt To Explain
A monthly newsletter by Love + Money.
Copyright © 2023
All Rights Reserved
Love + Money Agency
”Melbourne, VIC”
-
Love + Money acknowledges the Traditional Owners of the land in which we work and pay our respects to Elders past, present, and emerging.