Jan 04, 2017 posted by Frank te Riet - Designer

Read time: 4 minutes. Interesting for (UX) designers and front-end developers.

In this blog I will talk about the benefits of using Atomic Design for Open Social.

What is Atomic Design?
The terminology Atomic Design is an analogy from biochemistry. It’s all about “Atoms”, “Molecules” and “Organisms”. Atomic Design is a methodology used to create web designs. This principle is based on the concept of first creating elements and then putting them together to make sense for the user. This way of building a website from the ground up has many advantages compared to other ways of constructing websites. At Open Social we try to break down designs into the smallest (logical) re-usable parts. Re-usable also means consistent. The basic idea is that a website is build from scratch without designing all the pages separately. There are a few steps that needs to be taken when using this method.

Atoms
The first step is building atoms. Atoms are buttons, labels, inputs, etc. They are all small items that are used widely across a website. Starting with this step allows a designer to create a library with a lot of elements that can be re-used without creating them over and over again.
 

A collection of 'atoms' such as various icons and labels in Atomic Design.
A collection of 'atoms' such as various icons and labels.

Molecules
“Molecules are a group of atoms that are put together”. As an example you can see how we build up an activity stream item. Think of a title, read more button, visibility status, comments icon, etc in one card. With this step we’re aiming to generate components that can be reused on other places as well such as news teasers, topic teasers, etc.

A group of 'atoms' forms a 'molecule' in Atomic Design.
A group of 'atoms' forms a 'molecule' in Atomic Design.

Organisms

For example an Activity Stream item on Open Social is a group of individual items that are put together to make sense. You can see a username, a thumbnail image, title, comments, etc.. Our front-end team can put an “organism” directly into a layout. It is not dependent on other molecules or organisms.

An 'organism' is a assembly of molecules functioning together as a unit in Atomic Design.
An 'organism' is an assembly of molecules functioning together as a unit in Atomic Design. 

Templates
With this step we’re leaving the biochemistry analogy. At this stage in the process we’re creating visuals that actually makes sense for in our product. For this example we have put all the details in place. The username, profile image, title, etc. At this stage we’re not creating fully designed pages. 

In a 'template' we place page-level objects into a layout.
In a 'template' we place page-level objects into a layout.

For example there can be a node template that will be used for an event and will be used for a topic. The structure is the same, header, hero, detail, sidebar, footer. A template can include multiple organisms this way. 

Pages
These are the actual pages that we have been designing since the beginning of webdesign. In the case of our activity stream cards we will create a page with a menu, activity stream, footer, etc.. At this stage the whole context is clear.  These are the pages that will be exported and send out to the product owner for review. With Open Social the role of the product owner is to have a vision of what he wishes to be build, and communicate this to the team. The way we are doing this is to work with a backlog filled with user stories.

One step further
Our approach with Open Social goes a little further than just design with a specific method in mind. We have also thought about making our designs future proof. To do so we have created an interactive component library that shows all components that are used site wide

For those of you who don't know what a component library is - it's quite simple really. A component library is a set of standards to ensure a consistent design and identity. Additionally, from a development point of view it serves to improve the speed and ease of code deployment. A component library consolidates the front-end code while comprehensively documenting the visual language, such as color palettes and fonts.

The goals for creating an Open Social style guide are:

  1. Streamline the workflow for designers and developers
  2. Maintain a consistency of the theme styles and components
  3. Create a focal point for our Design and User Experience work, both for ourselves and for the community

Advantages

Reusability
For every element created inside our Sketch app we have the ability to reuse and modify it exactly the way we like it. This method is time efficient and forces the designer to think about the style itself rather than redesigning a lot of elements. Another advantage is that we can easily share our designs within the team so every designer can collaborate on the project. 

Easy updates
When we have designed a project using Atomic Design it’s fairly easy to keep the project up to date. Since there is a lot going on in terms of improving the platform we can update every atom the way we want. It automatically changes everywhere  in the project. This allows us to show the team what effect specific changes in the design will have on the project and it allows us to quickly show the product and process feedback without having to change it everywhere. 

Less components
If there is a clear list with requirements it’s easier to reuse these atoms, molecules, organisms than ever before. A designer will most likely create new components with slight variations. This way keeping the design as consistent as possible.

Summary

Atomic design is here to stay. Breaking down big projects into templates, organisms and molecules is an efficient way of working. It is time efficient and it serves the purpose of working remote on the project with different team members. It will let the designer focus on small details but still keep the big picture in mind. It prevents you designing the same thing more than once to keep the style as consistent as possible. This will increase the quality of a project and it is time efficient. For example when a client wants to make significant changes in color, typeface, etc halfway the project. This used to have a big impact on a project, but doesn’t anymore when Atomic Design is applied correctly.

Atomic design is based on the biochemistry analogy. 

  • Atoms:     building blocks of the project, they can’t be broken down
  • Molecules:    a group of atoms bonded together that become new properties
  • Organisms:    group of molecules joined together to form a part of the interface
  • Templates:    mostly focused on content structure
  • Pages:        specific instances of templates

More information
http://atomicdesign.bradfrost.com/table-of-contents/ 

Don't miss our blogs

Apr 25, 2017 posted by Mieke Weismann

Day 1: How to get the most out of DrupalCon

Apr 18, 2017 posted by Mieke Weismann

Powering sustainable development with the UN

Apr 18, 2017 posted by Mieszko Czyzyk

We're live! Discover our SaaS 1.0 release!