Published on <a href="https://blog.prototypr.io/ux-academy-journey-week-7-kaboom-atomic-design-methodology-860219575484?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Thea Chard 
<h4>How designing system organisms can explode your workflow (in a good way!)</h4>
<img alt="" src="https://cdn-images-1.medium.com/max/1024/0*zXcLHFHpknPM_Js-.jpg">Just like high school chemistry… sorta. (Illustration by <a href="http://trydesignlab.com/andrew_wilshere/">Andrew Wilshere</a>)
<h3>Hey there, design reader!</h3>
Guess who’s back, back again? Me! Reminiscing on week seven of my <a href="http://trydesignlab.com/blog/category/uxa-journey/">UX Academy Journey</a> as a student in Designlab’s UX Academy, Weingart cohort (and apologizing for the Eminem reference). This week, it’s all about the atomic mic drop.
If you’ve been following this series so far, it’s no secret that I’m exceptionally bad at making judgements about <a href="https://blog.prototypr.io/ux-academy-journey-week-3-hitching-a-ride-out-of-procrastination-station-cd61e809cca6">how long to spend</a> on my homework. I’m even worse at knowing when to call time on a project — once I get moving and in a groove of sorts I zone in, unmoving, for hours on end, tinkering with minor details and finessing minutiae.
This is exactly the kind of bad habit a UX designer would be wise not to cultivate — a kind of tunnel vision that has kept me from being able to zoom out far enough to see where each lesson, project and technique in the UX Academy curriculum actually fits in with the larger whole, the puzzle of UX design in practice.
And then the curriculum dropped a very timely “aha bomb” on me.
<h3>Atomic Design Methodology, or the thing that finally blew my UX design mind</h3>
Enter <a href="http://atomicdesign.bradfrost.com/chapter-2/">Atomic Design Methodology</a>, the simple little lesson that finally broke my brain and put it back together again (with some new and improved synapses). Suddenly, the scope of UX knowledge didn’t feel quite so infinite and instead turned into something digestible, attainable, and the beginnings of familiar.
<img alt="" src="https://cdn-images-1.medium.com/max/320/0*AuTY9kH1fSZVVLdJ.gif">Mind. Blown.
Atomic design, <a href="http://bradfrost.com/blog/post/atomic-web-design/">created by Brad Frost</a>, is a design systems methodology that breaks down those systems into five distinct parts — atoms, molecules, organisms, templates and pages. These five components double as the five phases of atomic design, working both individually and together in the service of the whole: “to create interface design systems in a more deliberate and hierarchical manner.”
<img alt="" src="https://cdn-images-1.medium.com/max/1022/0*ehZV4nRMSe8soGxv.png">The atomic design methodology allows designers to visualize whole design systems at once, from the abstract to the concrete. <a href="http://atomicdesign.bradfrost.com/chapter-2/">Image credit: Brad Frost</a>
Translation: atomic design addresses the biggest retraining hurdle many students face (myself most definitely included) when presented with a vast design landscape of seemingly infinite horizons — that the design process itself is not a linear one.
<h3>A little bit of UX chemistry</h3>
Most people, in their professional work, are used to a certain amount of process. First comes A, then B and only then, C. The creative world is known for being a little more fluid — unless of course we’re talking about Apple, which has a <a href="https://www.technologyreview.com/s/407782/the-secret-of-apple-design/">unique beast</a> of a <a href="https://www.theverge.com/2014/10/18/6999931/watch-jony-ive-explain-apples-design-process-in-a-rare-public">development process</a> all its own. UX design is somewhere in the middle, the convergence of science and invention.
In my professional and educational pasts I have always tiptoed the line between right- and left-brained tendencies. It’s hard for me to see both the forest and the trees, and to use this composite perspective to strategize the best way forward. I become overwhelmed with options, with details, with small pieces, and lose sight of the whole for the sake of that one little, tiny part that’s captured my focus in that moment.
Atomic design, however, encourages designers to simultaneously think of the design system as a collection of individual parts, and as a larger, cohesive whole that those parts combine to create.
<iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fplayer.vimeo.com%2Fvideo%2F109130093%3Fapp_id%3D122963&amp;dntp=1&amp;url=https%3A%2F%2Fvimeo.com%2F109130093&#038;image=https%3A%2F%2Fi.vimeocdn.com%2Fvideo%2F493127040_1280.jpg&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=vimeo" width="1920" height="1080" frameborder="0"><a href="https://medium.com/media/2fb2a9b15ca23573741de2bdba2eceef/href">https://medium.com/media/2fb2a9b15ca23573741de2bdba2eceef/href</a></iframe>
<h3>Kaboom! Drops mic. Walks off stage.</h3>
Just like a good story, design is more than the sum of its parts. It’s also a product of their organization, tone and the way they are executed both individually and in combination. It’s why comics run the same bits over and over again, night after night; they are refining all of the story’s component parts in pursuit of the best possible whole — one perfectly executed joke.
And it takes trying that joke a bunch of different ways to get there — exercising and iterating on all of the parts at once — to create a fully polished, well written and well designed finished product.
It’s also why the best TV shows and movies today are written by not just one author, but by teams of writers and editors, constantly building upon each other’s work, iterating new drafts, making stronger choices, creating more memorable scenes with every revision.
Seven years ago, in my early twenties and filled with fanciful ideas of a writerly life in New York, I picked up and moved myself and my cat crosscountry to the beautiful sprawling midlands of Brooklyn. The next day I started classes at the Upright Citizens Brigade Theatre, the comedy school founded by Matt Walsh, Ian Roberts and Matt Besser, and one of my lady comedian loves, Amy Poehler. I see now that comedy shares a lot of the same lessons — the major tenets of storytelling are born of the same creative philosophy.
When you’re writing a script, or better yet, a comedic sketch, one of the first and most important lessons to remember is that every line must drive the scene forward. Any line that doesn’t drive the scene forward may as well not be there at all (and the fact that it is there almost certainly guarantees that you’ve already shot the whole darn thing in the foot).
<img alt="" src="https://cdn-images-1.medium.com/max/1024/0*rZd6e4ATWxY08skD.jpg">My initial KAUS wireframe sketches, templates made up of a combination of preliminary particles
A story is made up of acts (organisms). These acts, in turn, are made up of a series of scenes strung together (molecules), and these scenes are made up of a bunch of lines (atoms) all in a row. Each piece must stand on its own for it to best support and inform the other elements around it — each atom is a part of greater molecule, teaming up with other molecules to make organisms greater still.
These seemingly independent design organisms are weaved together to make cohesive, elegant templates that are then further enriched by the inclusion of unique content. The result is a complete final page — a fully responsive design system.
I truly don’t know how I didn’t see it before.
<h3>A Game of UX Design Tetris</h3>
<blockquote>Atoms &gt; Molecules &gt; Organisms &gt; Templates &gt; Pages</blockquote>
In the past when approaching a new design project I have spent a fair amount of time off the top on trying to pare down my <a href="https://blog.prototypr.io/ux-academy-journey-week-4-newbie-design-student-tips-from-the-future-40b7b5ea9279">research and organize my thoughts</a>, all before the actual design process even begins. This existing process has resulted in many labored hours in front of my computer, struggling to make sense of the smattering of design elements I’ve scattered about my artboard without any seeming rhyme or reason.
Remember the ugly, cluttered landing page I <a href="https://blog.prototypr.io/ux-academy-journey-week-3-hitching-a-ride-out-of-procrastination-station-cd61e809cca6">showed you in week three</a>? Well we’ve come quite a long way since then!
Using the atomic design methodology, I was able to approach the KAUS landing page with one eye on the finessing of the elemental design patterns themselves — the navigation, the call to action button, the “Build A Quote” tool, the “How It Works” animation — and the other eye watching how the collection of these elements all fit together into a polished page, like some sort of magical design Tetris. It took zooming out far enough from the design itself to really see the big picture — the larger design principles at play, free of all the distracting details.
The truth is that UX design is made up of simultaneous micro- and macro-decisions — choices about both individual pieces and the greater whole. Sometimes it takes looking at this system from a distance to really see whether everything is working in harmony.
The result is a more flexible, more responsive, more iterable design system that lends itself to additions and evolutions still to come.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/0*5sC1JFGLcp44czdK.png">My first KAUS wireframe, a collection of iterated parts
Looking for some further atomic design reading? Check out these resources:
Until next time, happy atomic designing!
<h3>Looking for a change of careers?</h3>
Designlab’s UX Academy program offers rigorous curriculum, personalized mentor support, and a thriving, global student community. Ready to launch your new career as a UX designer? <a href="http://trydesignlab.com/ux-academy/">Get all the details here</a>.
<a href="http://www.trydesignlab.com/ux-academy">Check out UX Academy</a>
This post was originally published on the <a href="http://trydesignlab.com/blog/ux-academy-journey-week-7-atomic-design-methodology/">Designlab Blog</a>. You can follow the <a href="http://trydesignlab.com/blog/category/uxa-journey/">whole series here</a>.
<iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fupscri.be%2Ff51076%3Fas_embed%3Dtrue&amp;dntp=1&amp;url=https%3A%2F%2Fupscri.be%2Ff51076%2F&#038;image=https%3A%2F%2Fe.enpose.co%2F%3Fkey%3DdRXnS9Gplk%26w%3D700%26h%3D425%26url%3Dhttps%253A%252F%252Fupscri.be%252Ff51076%252F%253Fenpose&amp;key=d04bfffea46d4aeda930ec88cc64b87c&amp;type=text%2Fhtml&amp;schema=upscri" width="800" height="400" frameborder="0"><a href="https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href">https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href</a></iframe><img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=860219575484" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="https://blog.prototypr.io/ux-academy-journey-week-7-kaboom-atomic-design-methodology-860219575484">UX Academy Journey — Week 7: Kaboom! Atomic Design Methodology!</a> was originally published in <a href="https://blog.prototypr.io">Prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

UX Academy Journey — Week 7: Kaboom! Atomic Design Methodology!

How designing system organisms can explode your workflow (in a good way!)

Top Stories