Rapid Prototyping with Atomic Design


Atomic Design is a methodology developed by Brad Frost which, in Brad’s words, is used to construct web design systems. With the increasing movement in front-end/UI development towards building libraries of components, rather than pages, Atomic Design provides a very robust and flexible means of establishing a pattern library that serves as both a front-end framework and a comprehensive style guide for the web.

This is by no means a technical guide (I’m really not very good at writing techie stuff), just an overview of how we’ve been using this approach, and how it’s helped us.

Establishing colours, typefaces etc for the pattern library (or Pattern Lab) was done with a variety of tools and is part of a wider branding project, but when it comes to prototyping, we work primarily in the browser. We find it’s the quickest way of getting something tangible that we can show to others (Show The Thing™), and having a Pattern Lab in place means we can quickly and easily put prototypes together that have a consistent look and feel.

Using Handlebars.js together with Assemble, we built up a library of components that can be combined to form any number of different layouts. This approach really comes into its own when iterating over layouts, with variations of modules or organisms. Finding out, for example, which version of your header prototypes works best with a particular template can be as simple as changing a version number in your template file.

Our Pattern Lab is definitely a work in progress, and going forward it will most likely change shape significantly as we encounter real world design/development problems that we didn’t encounter when creating the components in isolation. But in these early stages, being able to prototype different combinations of ideas so quickly and easily has been a great way of getting things off the ground.

Head in the clouds…

Have you ever heard someone say “you’ve got your head in the clouds”?  Well that was me – literally – yesterday.  I work as a UI designer/developer at the Co-operative in a growing Digital team based on the 11th floor of 1 Angel Square and while the rest of Manchester struggled with the gloom of the fog, we were almost illuminated by it.  I’ve only been with the Co-op for a month or so and am still amazed by my workplace – this unique and innovative building feels like the right place to be as we continue our digital transformation.

Angel Meadows, a hidden gem!
Angel Meadows, a hidden gem!

To say it is exciting times at the moment may be understating it and to not just work for the Co-op but be a part of it as a member adds an extra dimension.  I’m not just working for the company; I’m working for the members – you, me and everyone that has joined this historic establishment on the way.

A fantastic employer

In Manchester the Co-op has always had a fantastic reputation as an employer and as one of its newest employees I can vouch for it – the people are welcoming, loyal – working hard and always wanting to be the best.  My workplace environment, the equipment, (for starters on my first day a brand spanking new Mac Book Pro was waiting for me), tools to help me ‘do a better job’ never mind the ‘little things’ that make coming to work that little bit easier, it’s clear for me to see that the Co-op puts it’s staff at the heart of who it is and what it wants to be and who wouldn’t want to be part of that.

Co-op sent me to NUX4!

The history that surrounds the Co-op means that I’m proud to say that I work for them and even prouder and more excited to be part of its future.

Oh and a little bit about me…

I have a passion for designing and developing websites.  I’ve done this professionally for the last 15 years, cutting my teeth working for fast paced design agencies after starting off self employed to build my portfolio.  Along the way I’ve designed some big sites, the Citizens Advice and Advice Guide websites for example; I transformed the checkouts and subsequent conversion rates for N Brown’s group of e-commerce fashion brands by turning a 10 step multi page process into a 1 page responsive checkout.  Almost without realising it I transformed from a website designer to a designer that codes in the browser and right now, here at the Co-op, it feels like this could be my greatest challenge but I know we’ll achieve all we set out to do together.

Anything could happen

So – back to having my head in the clouds – it feels like anything could happen and any idea could be the one that really changes, improves and moves the Co-op to its next phase – I can’t wait to be part of it – what about you?

I’ll be writing regular blogs about UI design/development and my Co-op journey, find me on twitter @uxeskimo.

Work hard, have fun, make a difference… Join us at Angel Square…