Kaboom! Drops mic. Walks off stage.
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).
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.
A Game of UX Design Tetris
Atoms > Molecules > Organisms > Templates > Pages
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 research and organize my thoughts, 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 showed you in week three? 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.
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!
Looking for a change of careers? 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? Get all the details here.