Using an atomic workflow in design and development projects

By: Jamie Wallace on
6 minutes to read
Preventing silos and increasing collaboration: our UI/UX designer explains how you can incorporate Atomic methodology into your work...

Here at Shaping Cloud our development team deliver projects that not only deliver technical excellence but also look beautiful and are enjoyable to use. I realised that too often design and development are worked on in silo with a negative affect on what’s produced. By adopting an Atomic methodology I have been able to work closer and more collaboratively with the developers.

So what exactly is an Atomic Workflow and how have I incorporated it into my work? Leveraging the power of Sketch and it’s symbol and style features I can build up my designs in pieces. I take advantage of this approach early in the project when I’m wire-framing and as the design evolves I can quickly update assets throughout the full design.

Akin to a don’t repeat yourself (DRY) software development process, it helps me to see the big picture by seeing all my design assets in one place, next to each other. This helps reduce inconsistencies with the design (e.g. the dreaded slightly different shades of grey issue that developers will be well aware of) and ensure I’m designing components that work well with each other.

Atomic Design Video

Brad Frost, the human being in the video above, is largely responsible for the system this article is about. Atomic Design was developed in response to the responsive, digital world we live in.

By designing modular, repeatable elements and patterns we can exponentially speed up our design and development process. Not only by how fast it is to build but also how quick it is to make changes across the system.

Atomic design is a language to talk about your web page elements: by breaking design down to atoms, molecules and organisms.

An atom: the smallest particle of your design, something that is undividable and used everywhere like different types of headings, base colours and so on. By itself it may not carry a lot of sense.

A molecule: a molecule usually joins a couple of atoms. i.e. a searchbox molecule may consist of a label + input field + a button atoms.

An organism: even larger part of the design. Consists of a combination of molecules i.e. a website header organism = site-title+menu+searchbox molecules.

For more details head straight to Brad Frost’s Pattern lab, you’ll find some great examples there.

What Atomic Design does for Shaping Cloud

Atomic Design both helps us to discover solid “truths” about the project’s design we are working on, as well as creating a common vocabulary between its artistic and technical aspects. It encourages a more robust system overall that improves UX and provides a methodology so designers can adhere to the component-based guidelines of the developers while maintaining creativity.

Naturally, developers code from the ground up whereas the approach of an artist usually begins in a more nebulous form, which then solidifies into a functional webpage after some molding. Atomic Design encourages — and requires — designers to work from the ground up as well, to make all of the interface’s components consistent and purposeful at the lowest possible level.

Traditionally I would export my designs as PNGs and hand them over to developers. The problems with this (rather predictably) is functionality wasn’t clear. Often I’m asked “what does this button do?” I’d try and help with a verbal explanation but this would often result in me explaining the same thing again and again. Furthermore, developers didn’t have enough detailed information about the visual design which caused visual inconsistencies and developer’s best guesses.

Style Guides

The answer of course and the foundation for any complex project design should come in a form of a style guide — a collection of reusable modules and patterns, out of which the pages are built. A style guide is a bridge between a designer and a developer, a common language for the project. It takes time to build, but then constructing new pages becomes like playing Lego — a lot of fun!

Style guides no longer come in the form of multipage PDF documents — style guides must live in a browser and be deeply tied with your CSS code.

It’s also worth mentioning that style guides can go by many names, such as style tiles, interface inventories and pattern libraries. There will no doubt be several new terms to describe a style guide by the time this blog post is published!

Medium's style guide

Medium’s style guide shows the various interface elements such as buttons, drop downs, typography hierarchy, tooltips, colour palette etc. At a glance you instantly get a taste for the visual identity of the interface. You might notice this doesn’t appear to have all the interface elements used on their website, but it’s a good example.

We can utilise Atomic Design principles to enhance this approach. Atomic Design breaks down this design system axiom and gives us the core principles to make creating design systems as clear and simple as possible.

At Shaping Cloud we are in the process of taking this one step further, by creating live style guides, with the intention of having one place in browser where all the developers can reference the components, refine and test them over time. Those changes would be subsequently tracked in a git repo.

Until this is finalised we are using a tool called Zeplin to bridge this gap. Zeplin allows me to upload my designs and the developers can pick out and sample the elements they need. Zeplin even generates useable CSS code for quickly building the components. In short, Zeplin is an automated style guide which saves a lot of time.

Have questions? Comments? Corrections? Want to get in contact? Feel free to shoot us a tweet and/or check out the work that my co-workers and I are producing over at Shaping Cloud as well as the rest of the teams’ thoughts regarding the software development world.