Atomic Design: From the Inside Out, and Back Again
Atomic Design is an emerging design practice which mirrors the methods of renown architect, Frank Lloyd Wright.
Frank Lloyd Wright was renown for achieving a total synthesis of design across all scales in his buildings, from window fixtures to the overall form of the building. Wright’s working method was that the plan generated the form, the design of the whole reflects the design of smallest element.
We mold clay into a pot, but it is the emptiness inside that makes the vessel useful.
-Tao Te Ching
Design from the Inside Out
Wright was able to design from the inside out, from small interior elements – a fireplace, a window seat – to the overall plan and elevation of a building, and then back again to details such as furniture and rug patterns, in some cases even dresses for the wives of his clients. The dimensions of a small element such as a brick or wood block would be used to create a grid, which would determine the arrangement of elements across the whole building.
Wright houses range in shape from a rectangular box to a series of triangles to a spiral circular shape. But these shapes were never arrived at arbitrarily. The shapes of Wright houses are directly a result of the interior choreography of what a resident could see or hear and/or of a response to the site.
The result is almost overwhelming, a total immersion in a Wright environment where every element shows FLW’s hand.
Wright’s design philosophy became known as organic architecture, drawing its inspiration from nature, where such scale-similarity can be seen everywhere. From the seed, we see the form of the whole. The shape of the leaf mirrors the overall shape of the tree.
Industrial designer Henry Dreyfuss stated that:
“An honest job of design should flow from the inside out, not from the outside in.”
Applying Atomic Design to Web
In UI design, the emerging practice of atomic design mirrors the concept of working from the outside in. Rather than designing pages, atomic design focuses on the design of systems, working from the smallest elements to the whole piece.
Atoms are singular design elements, such as a form label or button style, though they may also be more abstract global design elements such as type choices or colour palettes.
Atomic Design originator Brad Frost defines molecules in UI design as “as relatively simple groups of UI elements functioning together as a unit”. Molecules combine atoms to form components, for instance, a search box or an image with caption.
Organisms are collection of molecules and atoms that are combined to form a relatively complex UI elements such as a navigation bar, footer, search results etc. The rhythm of the molecular elements determines the layout and structure of the organism.
Once the elements have been designed, the creation of templates and pages flows naturally. Templates are abstract screen layouts lacking specific content, or as Frost puts it:
“Templates are page-level objects that place components into a layout and articulate the design’s underlying content structure”.
Pages are templates with specific content replacing the abstraction of templates.
As Brad Frost identifies, once you have completed page design you may also need to design back again the other way. Sometimes it is only when you see the composition of the whole that you can identify the need to make design changes, which then need to be reflected from the macro design back to the micro design, or in the language of atomic design, back from the page to the atom. “Does everything look great and function as it should? If the answer is no, then we can loop back and modify our molecules, organisms, and templates to better address our content’s needs.” Like Wright, working back down the scale to create furniture, stained glass windows, marquetry.
Thinking from the Bottom Up
Thinking from the bottom up, as it were, rather than the top down, also makes designs work better across all devices and screen sizes. Because templates and pages are the last things to be designed from the components you have built, it is easier to think about how they might be composed on a small screen or a large screen, rather than have to start out trying to design across all those screen sizes.
The atomic design approach can also be used to help estimate the amount of work involved in implementing a design. In many cases, identifying the number of organisms a site needs may be more indicative of the work required to implement a design than figuring out the number of pages a site has.
Atomic Design in Practice
A website will probably have one or more key components or ‘organisms’ which will be the basic building block for the site. How these building blocks are displayed, arranged, sorted and linked becomes the essence of the design. For instance, in our website design for Restaurants of Leeds, a key organism is the display of a restaurant’s details. How restaurants are ordered and displayed is the key to creating the design for much of the rest of the site. Just as bricks and blocks were for Frank Lloyd Wright, these building block elements are the generator from which the layout of the whole grows.
“We have no longer an outside and an inside as two separate things. Now the outside may come inside and the inside may and does go outside. They are of each other. Form and function thus become one in design and execution if the nature of materials and method and purpose are all in unison.”