05 Jun 2013, 23:07

Atomic design

Brad Frost made a conference where he introduced "Atomic Design" and the related PatternLab which is the "toolkit" around Atomic Design. So what is Atomic Design ?

In one image :


and in more words :

  • Basic idea : "we are not designing pages, we are designing system of components" meaning that a page is the sum of all the components it includes (navigation, search, header, footer, content, etc)
  • What do we have to design these ?
    • Design patterns exists but are too theoric or not bundled enough
    • Web frameworks, like Bootstrap or Fundation are fine but not adaptive enough to everyone's needs.
    • Front-end style guides may not be mature enough or too project specific or never done as seen as an auxiliary project ; however they are seen as promising and interseting as they allow a share vocabulary, easier to test, better workflow and a useful reference.
  • So please enter Atomic Design :
    • Atoms (slide 61) = Smallest piece of html you may have in your project (a button, a field in a form, a title, etc). Very basic piece of your site.
    • Molecules (slide 68) ie a collection of one or several atoms  = the search area of your site, which includes 3 atoms : a title, a field and a button. At this step, you have a basic and simple feature of your site
    • Organisms (slide 73) : a collection of molecules, creating a first section of your site ; for ex the header of your page, which includes 3 molecules : logo with a link, a navigation menu and a search box.
    • Templates (slide 80) : a bunch of organisms which results in a structured page (think wireframe) and which looks quite concrete. It can be your homepage including several organisms like header, featured content, recent content, footer.
    • Pages (slide 84) : a specific instance of a template with real/sample content ; you can evaluate the final result of your site and also tests some variations/adjustments.
  • If you review this workflow from atoms to pages, it illustrates :
    • From abstract to concrete
    • From creators to clients
    • From reference to review (with build steps in the middle)
  • Purpose is then :
    • To have a powerful methodology and toolkit for crafting an effective design system
    • To promote assembling process
    • To promote reusability
    • To promote consistency & cohesion
  • PatternLab is a collection of tools to help create & maintain atomic web design systems
  • Future of the projects : improvments, integration with some "IDE/Text editors", etc.

It seems very powerful to use such an approach ; the question may be about the cost of its initiation but which already exists (it's just never estimated as itself or it's paid differently when implementing templates and destructuring templates from each other).

Principles of atomic design are already used partially in different systems but maybe not as optimised as it is :

  • We are used to have a basic layout, which all later templates will extend
  • We are used to split content in smallest pieces (from basic inclusion (include header, include footer, etc) to more "partials" which are more logic dependent or to have some generic split like "list view vs detailed/item view"

Building a responsive/adaptive design with such a tool may be easier as you may set up all your layout quickly with this mechanism of inclusion.

What do you think about this ?

[Edit 1] : Brad Frost published a blog post about Atomic Design with the "transcript" version of his talk and at the end the video if you want to watch it.

[Edit 2] : A more concrete exemple of this theory : Atomic design makes me feel like a chemist