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.
This post was originally written for Co-op Digital: http://digital.blogs.coop/2015/11/06/rapid-prototyping-with-atomic-design/