Make your brand modular with a design system. (Part 2 - Using Atomic Design)

This is the second and final part of this blog series. Have you already read part 1?

Creating a good user experience with consistent user interfaces is an essential part of successful software. We are aiming to boost consistency on our user interfaces by using Atomic Design and a toolkit. The main reason for using a toolkit is to bridge the communication between designers and developers.

With a toolkit we provide useful documentation for designers and developers with pre-built components. The pre-built components can be used to prototype applications; the designers can use Sketch components to mockup while developers can reproduce codes from the toolkit we supply.

A quick explanation of Brad Frost’s Atomic Design.

Atomic design is a methodology with five distinct stages working together to create interface design systems. The five stages of atomic design are Atoms, Molecules, Organisms, Templates and Pages. Atomic Design is a design model helping us to see our interfaces as both a cohesive whole and a collection of parts/components at the same time.

Atomic Design stages with Avisi’s Brand System.

• Atoms: are User Interface elements that can’t be broken down any further and serve as the elemental building blocks of an interface.
• Molecules: are collections of atoms that form relatively simple User Interface components.
• Organisms: are relatively complex components that form discrete sections of an interface.
• Templates: place components within a layout and demonstrate the design’s underlying content structure.
• Pages: apply real content to templates and articulate variations to demonstrate the final User Interface and test the resilience of the design system.

Source: http://atomicdesign.bradfrost.com/

Atomic Design implementation with our brand system

• Example Atoms: Label, Input, Button.
• Example Molecules: Label, Input, Button combined into a subscribe molecule.
• Example Organisms: Combined subscribe molecule and address information molecule combined into a footer organism.
• Example Templates: Combined organisms into templates.
• Example Pages: Combined templates into detailed pages.
• Example: Documentation with Sketch Symbols.
  
  

Developing a toolkit with pre-built components

To maintain an iterative process, we were challenged to make Atomic Design easy to use across the whole company. That’s why we started developing a toolkit. This toolkit enables us to maintain (pre-built) components. Developers can copy/paste toolkit codes, and designers can produce their mockups with pre-designed components (in Sketch). To keep our toolkit alive, we constantly review, version and maintain components with a team of designers and developers.

We are distributing our toolkit internally with Atlassian Bitbucket. In Bitbucket we are able to keep track of the latest changes with a single minified CSS as output. By uploading this single css file into a project, you are up-to-date with all the components and automatically use the correct HTML structure and snippets. 

With this way of working, we can bridge the communication between designers and developers even more, which eventually makes Avisi more efficient in building consistent user interfaces.

We are currently developing a separate website as documentation with DevCards. With DevCards, designers and developers can preview components and copy/paste specific HTML structures and/or snippets. In the near future, we will be posting a new blog about using DevCards for this project. Stay tuned!