Atomic Design — where science and design collide

Some people say design is like science and I think they’re on to something. You see, these past weeks I’ve been working a lot with defining design systems and I couldn’t help but see the resemblance.

Anton Sten
Mar 13, 2017 · 2 min read

Years ago, we defined the scope of projects by how many pages the site had. The more pages, the bigger the project. Now while that makes sense in theory, it doesn’t make sense in reality. A designed webpage is actually made up out of different sets of “bricks”. Think: Subway sandwich pieces that you can combine into different delicious combinations.

Brad Frost wrote a book on the subject last year called Atomic Design and the gist of it is this:

The stages that Brad outline are:

  • Atoms are the basic building blocks of it all — they include things like buttons, form labels, inputs, and other similar elements.
  • Molecules are simple groups of UI elements functioning as a unit — think of a search form that consists of a button, a form label, and an input field.
  • Organisms are bigger UI components combining both atoms and molecules. This could be the header of a webpage that consists of a logotype, a navigation, and a search form.
  • Templates combines different organisms into a functioning whole — think of a wireframe. It has all the organisms in place, but there’s no actual content there yet. This is the blueprint or skeleton of a page.
  • Pages are the final stage — they shows what the template looks like with real representative content in place.

While I’m currently working on two projects that are very different in terms of pages (one is nearly 10,000 pages and the other is less than 5 pages), they both require a solid design system to make sure we’ve got all the stages covered from the start.

If you’re interested in learning more about design systems, feel free to e-mail and I’ll be sure to answer!

Here’s some great further reading on the topic:

Atomic Design by Brad Frost
http://atomicdesign.bradfrost.com

Cooking with Design Systems by Dan Mall
http://danmall.me/articles/cooking-with-design-systems/

Setup a design system by Marco Lopes
https://blog.prototypr.io/design-system-ac88c6740f53#.bvym62je5


Originally published at www.antonsten.com on March 13, 2017.

Anton Sten

I believe that understanding grows from exercising your…

Anton Sten

Written by

Let’s keep this simple: I make digital products work, by ensuring the people who have to use them know how to and enjoy doing so. https://www.antonsten.com

Anton Sten

I believe that understanding grows from exercising your knowledge. I don’t just write to inspire others, but to stay on the leading edge of this industry. The best part? You get to learn from with me on my UX journey!

Anton Sten

Written by

Let’s keep this simple: I make digital products work, by ensuring the people who have to use them know how to and enjoy doing so. https://www.antonsten.com

Anton Sten

I believe that understanding grows from exercising your knowledge. I don’t just write to inspire others, but to stay on the leading edge of this industry. The best part? You get to learn from with me on my UX journey!

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store