Engineering The Atom

Posted On: Aug 10, 2015

In days gone by starting a new web design project often meant pages of specification documents that we as front end designers and developers would then pour over and translate into a product that was essentially our interpretation of what the client thought they wanted. The main issues with this are that you would run the risk of missing vital functionality that hadn't been thought of, creating a user journey that wasn't as smooth as it perhaps could have been and a site IA whose overall structure could have been better.

Nowadays more time is spent creating wireframes and prototypes, scrutinising them, refining them and then having a solid base for the development process to begin from.

I am a huge advocate of taking the clients requirements and visualising them in a prototype/wireframe set first. Taking this route significantly reduces the chance of the risks above becoming an issue.

Beyond this I've never really considered taking the process that much further, I mean we've nailed the framework of the site right?

Let just get it built!

But recently I've had my attention drawn to the BEM (Block Element Modifier) way of working. Put simply, it's a methodology that influences everything from coding standards and naming conventions to framework structure in a project at the development stage.

BEM is great and is especially useful when you have multiple people working on a project but it did start to become a bit too intricate for me.

Enter Atomic Design by Brad Frost.

Drawing from the ethos of the BEM methodology of working, Atomic Design, for me at least, is a clearer way of defining naming conventions and pattern libraries at the wireframing stage.

Breaking down html elements into:

  • Pages
  • Templates
  • Organisms
  • Molecules
  • Atoms

Pages and templates are pretty self explanatory but Organisms, Molecules and Atoms probably seem a bit alien. Let me explain:

After the wireframing stage, it's time to start breaking down the elements of you site into manageable components that can be easily carried through to your LESS/SASS and file structure. So for example:

Site Banner: This would an organism.
Navigation: Sits within the Site Banner Organism as a Molecule
Navigation Link: An atom within the Navigation Molecule within the Site Banner Organism

Identifying these elements at the start of a project should allow for a cleaner and more organised final product and make it a project that can be easily worked on by a team. Atomic design is certainly the avenue that I'll be going down for projects in the future.

Read more on Atomic Design.

  • web design
  • UX
  • web development