In this blog Frank will talk about the benefits of using Atomic Design for Open Social. — continue reading
In this blog Frank 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.
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.
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.
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.
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:
- Streamline the workflow for designers and developers
- Maintain a consistency of the theme styles and components
- 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/
