The process of Atomic Design
03 Nov 2017

The process of Atomic Design

03 Nov 2017

UI design is constantly evolving along with its tool and methodologies. The one methodology that was massively adopted by hundreds of design teams around the world is Atomic Design.

#1 Definition of Atomic Design

A mental model developed by Brand Frost which drives designers to think of every design project from the ground up, meaning that the design process starts with defining the most basic elements of a UI – such as colours, shadows, typography etc. Then designing bigger components until the entire interface is complete. We have recently adopted this methodology at Impaddo and would like to tell you more about it.

#2 Our Intro to Atomic Design

We have a couple of our internal projects and we decided to find a systematic and maintainable way of designing user interfaces. Since everyone in the design community was talking about Atomic Design we decided to take a look at it and see what it’s about. In short – Atomic Design is a methodology which consists of five stages which build on top of each other and as a results provide a systematic, maintainable and scalable user interface.

Atomic Design

Atomic Design

#3 The Process

In the first phase of atomic design, we define the most basic and primitive properties of the UI. We define things such as colours, fonts, type/spacing scales and shadows. Then we use those “primitives” to create “atoms”, the simples elements of the interface such as buttons, input fields and labels.

Atoms

Atoms

After completing the first phase we can move on the next one in which we build “molecules” using the “atoms” we made previously. Just as in chemistry, combining a few atoms gives us molecules. A good example of a molecule would be a search bar – because it usually consists of an input field, a label and a button. At the time this stage is done we already have reusable and maintainable units which promote consistency across the entire project.

Molecules

Molecules

In the next phase, we build a bit more complex UI components which represent bigger sections of the UI (search bars and cards for instance).

Organisms

Organisms

The fourth stage of atomic design is where we can start seeing the user interface as a whole because we create page – level wireframes (templates using the components created in the previous phase). Lastly, we transition to the last stage where we use those wireframe to create all required high-fidelity mock-ups of an application.

After completing the entire Atomic Design process we end up with a nicely organized Sketch file which contains all our atoms, molecules, organisms, templates and pages in the form of Sketch symbols.

Symbols complement atomic design very well because they let us reuse our UI elements across the project by creating instances of the master symbols. A change made to the master symbol propagates through all of the instances, which makes maintaining big projects with lots of screens a breeze.

#4 Going beyond Sketch

So far we have implemented the atomic design into our workflow only within the scope of Sketch, but we do not plan on stopping here.

In the future, we plan to go beyond Sketch and actually implement the whole process in code as well. The goal is to have a “living” design system for each of our internal products, so we can keep them well organized as well as upgradeable and maintainable.

Ever since we adopted this approach we have improved the quality of our designs as well as the communication between designers, developers and project managers but our final goal is to create design systems which will help us deliver high-quality user interfaces across all major platforms – Web, iOS & Android.

Subscribe to our mailing list

Leave a comment
More Posts
Comments

Comments are closed.