From “Atoms” to “Pages” – How to Implement Graphic Design within Agile Approaches

Author: Javier España. Javier is a Front-end Specialist in our Argentina office.





I come from a varied background. I’ve studied Computer Engineering and then earned my degree in Graphic Design. After working for several years in advertisement, I joined Velocity Partners nearly five years ago as a Front-end Developer. Since then, I’ve grown inside the company until accepting the role of our first Front-end Specialist a month ago.

One of the biggest challenges coming from an ad agency was the adjustment to learn, understand, and embrace our use of Agile Methodologies. Especially since agile approaches are almost completely missing from the graphic design world.

During several conferences where I have given talks within the last 2 years, this question is always repeated: “How can we effectively introduce graphic design work into agile workflows?”

After several years of experience doing just this, I will try to answer that question. I hope this helps everyone that’s having challenges getting designers into the regular agile workflow.

Atomic Design

Designers are used to working in a different way than programmers. Primarily because it’s a lot tougher to define tasks and durations when you’re trying to estimate the “creative process”. This is the biggest challenge with graphic designers in our companies today, how can they accurately estimate how much time it will take them to design an interface or a webpage?

It’s really difficult and I understand that there’s a great concern from Product Owners and even Team Leaders on this subject, because they can’t truly quantify tasks as much as they would like to. But don’t worry, there’s a better way to approach it.

I present to you a work methodology called . I strongly feel that this way of working was at least inspired by Agile Methodologies, but whatever the case is they are meant for each other.

I recommend you read the complete article from Brad Frost on his website, but briefly the idea is to think of design not as a separate task for pages or user interfaces but instead to look at the design work as a system of components. In Brad’s view, the world of design can be composed, bottom-to-top into:

  1. Atoms
  2. Molecules
  3. Organisms
  4. Templates
  5. And finally, Pages

Having this in mind we can reduce the design work to a minimal expression (atoms) and then grow it bigger and bigger until we achieve our final result. Sound familiar?

Changing the way Product Owners and Team Leaders see the designers work in this way will fundamentally help the agile workflow. Now suddenly we can create user stories that will give the designer a formal way to solve specific issues like—what will forms look like and what’s the user flow and behavior; thus letting everyone embrace agility to its fullest.

If you think about it from a programmers point-of-view, usually you have a requirement and reduce it to different stories that will let you achieve the final functional result. If you switch your view you can see it as a graphic designer that also has a requirement (for example designing the header for a website, an organism) and they can also reduce that task to designing the search button and label (atoms), the buttons and the navigation itself (a molecule) all leading to an operational interface (page).

The similarities in both methodologies are amazing, and they should go hand-by-hand if your company has both programmers and designers working together. Things will be easier for everyone and the workflow will unquestionably improve.

Wrapping Up

Whether you are a programmer or a designer. I would love to get your reactions and comments to this approach.

Thanks for reading!


Bob Galen

Bob Galen

Bob Galen is an Agile Methodologist, Practitioner & Coach based in Cary, NC. In this role he helps guide companies and teams in their pragmatic adoption and organizational shift towards Scrum and other agile methodologies and practices. Contact: