We’ve recently introduced Atomic Design to manage our digital assets and workflow, increase speed, and maintain consistency across our product offering.
In this article we’ll give an overview of the Atomic way of thinking, and share how we’ve applied it — with a little help from BEM and Git.
What is Atomic Design?
If you’re already familiar with the concept, you might want to skip this part. Grab a coffee and we’ll meet you at “Creating an Atomic UI kit”.
Atomic Design is a methodology used to construct design systems. The concept was first coined by Brad Frost in 2013. Brad uses a Chemistry analogy to describe the process, in which design is broken down into simple, reusable patterns.
These are called Atoms, Molecules, Organisms, Templates, and Pages.
The idea is simple. Everything in the universe is made up of atoms. Atoms are combined to form molecules. And in turn, these molecules create more complex organisms. You get the idea.
The same logic can be applied to user interfaces.
A Page on our website, for example, is made up by Templates. These are constructed by a number of Organisms. Each Organism is a grouping of different Molecules and Atoms.
For us, applying this system achieves consistency, since we’re using the same assets, logic and tools when constructing interfaces.
Atoms
In chemistry, atoms are the basic building blocks of matter. The same is true for Atoms in interfaces. They are design assets at the most simple level. They can’t be broken up into any smaller pieces.
An example of an Atom is an input field or a button.
Molecules
Atoms are grouped together to form Molecules.
Building up from Atoms to Molecules encourages a “do one thing and do it well” mentality, and encourages creating reusable interface patterns.
A search bar is a good example of a Molecule, which combines an input field and a button to form an entirely new structure.
Organisms
Organisms are groups of Molecules and/or Atoms combined to form reusable sections of a user interface.
A header Organism might be created by combining a logo Atom with a navigation and a search form Molecule.
Building up from Molecules to Organisms encourages creating standalone, portable and reusable components.
Other examples of Organisms: a footer, a sidebar, or even a complex widget.
Templates and Pages
With Templates and Pages we break the biochemistry analogy. Following previous logic, Templates are layouts put together using Organisms featuring placeholder content.
Pages on the other hand, are specific instances of Templates. They have a high fidelity and use real content.
Creating an Atomic UI kit
At Nordnet we’ve created a living Brand Library, a website explaining our brand, our characteristics and our beliefs. In the Library we also feature something we call a UI kit, a repository for our Atomic Design elements. There are two versions of the UI kit: one in HTML, JavaScript and CSS for developers, and one version in Sketch for designers. We like to think of them as identical twins living separate lives.
By limiting our UI kit to Atoms and Molecules we give the design team the freedom to explore and create their own Organisms.
How do we keep our designers and developers in sync?
We’re open at Nordnet. Actually, give “Transparent Banking” a Google and take five. You’ll probably find an entertaining ad where we take the concept perhaps a bit too far.
In the spirit of transparency, we’ve opened up our coded UI kit to everyone by hosting it on Github: free for anyone to use.
Internally this has proven to be an efficient way of giving developers across all scrum teams access to UI assets.
Our “One Truth” is the UI kit in code. These elements are ultimately what our customers will be seeing when using our live products. But the Sketch file is equally important. Using the UI kit in Sketch is a way for the design team to reuse elements, and to create an overview of all our visual building blocks.
It’s vital that our designers and developers stay in sync and understand how each Molecule or Organism is built.
Designers and developers sometimes don’t speak the same language. We want to change that. A potential confusion could arise during a hand-over because of naming conventions. How do developers know exactly what Organisms we’re referring to in our designs? Which is the latest version of a file? Or which Atom should be used in a new form?
With our Sketch file constantly evolving, how do we do this efficiently?
We’ve got a few tricks up our sleeve to help make this hand-over process a lot easier. No, it’s not the TRANSLATORTRON™ created by one of our developers (and yes, that’s a real product we use internally).
But it’s almost as cool…
I’ve BEM meaning to introduce you to someone…
Our developers use BEM for naming conventions. It makes front-end code easier to read and understand. The BEM approach ensures that everyone who participates in the development of a website works with a single codebase and speaks the same language.
BEM also plays nicely with Atomic Design. In fact, I reckon they just might be best friends. As a simple example, let’s take a look at how a button Atom is created and named in HTML using BEM.
And with just a few modifiers to our class names, we can output a number of different button styles with ease.
With our UI kit named properly in code, why not extend this to our Sketch file ? That way our developers and our designers are talking the same language.
Okay, so the developers might have a slightly different accent than we use as designers, but at least now we’re speaking the same language!
Our Sketch file uses the same BEM naming convention but simplified to make it easier to read. There’s no need for Kebab Case in Sketch.
Now things are really starting to come together. But Sketch has a few neat tricks we can use to make our designers’ lives even easier.
Symbols and text styles
The skeleton of our UI kit Sketch file is made of Symbols. Think of them as folders/groups of text, elements, or layers. Reusable assets that can be easily inserted into design files. And boy, are they time-saving.
We use them for everything, including Atoms, Molecules, and Organisms.
Symbols are most effective when organised logically. We group our different elements together into different states. For example buttons are grouped by type, state, and modifier.
Text Styles work in exactly the same way. They allow us to keep consistent typography throughout our designs. Something that is often difficult when you have a number of designers working in the same team.
Using Text Styles means we avoid running into positioning, sizing, or base line issues during design exploration.
Expanding the Atomic way of thinking
The Atomic methodology isn’t limited to design. The BBC have successfully applied it to their content structure for News. And we’re exploring other areas where this approach could be beneficial.
I’d love to hear your creative uses of the Atomic way of thinking out in the wild. Please leave a comment if you have any examples.
Design is a team sport
If you’re interested in learning more about our design process at Nordnet take a look at some of our other publications. We’re big on Design Sprints, and the importance of involving a cross-functional team in the design process. With the right tools and an open, creative environment, it’s amazing to see the ideas a group of passionate people with a diverse skill-set come up with — even those who claim not to have a creative bone in their bodies.
Cheers for reading,
The Nordnet Design Studio.
