New to this series? Here’s a quick recap:

If you’re like most people, you’ve never heard the term “biomimicry” before. While it is a brand-new official field of study, biomimicry has been around for as long as mankind has existed. “Bio-” meaning life and “-mimicry” meaning the action of imitating, biomimicry is the act of consciously emulating nature’s genius in other areas of human endeavor to create conditions conducive to life. The organisms that surround us are champion species; species that have evolved successful survival strategies for the long haul. They represent an object lesson that humans would do well to understand and apply to build a better and more sustainable future. Luckily for those of us just entering the field, the Biomimicry Institute has done most of the legwork. After intense study and research, it has developed what it calls Life’s Principles: 26 strategies that every organism employs to live in harmony with each other and the planet.

“Integrate Development With Growth: Invest optimally in strategies that promote both growth and development.” What the heck does that mean? This Life’s Principle takes a bit of explaining and I’ll use an example to do so. Here in the Phoenix/Scottsdale area, we underwent a significant freeway transformation with the addition of HOV lanes a few years ago. In this case, the city invested in an expanded freeway and HOV lanes (development) to support additional growth of the cities. Without that development, considerable growth could cause major issues (though my morning commute suggests we’re still a bit lacking in this area). Infrastructure development is a vital investment strategy, yet the American Society of Civil Engineers reported in 2017 that the state of America’s infrastructure is rated a D-plus at best. Clearly our human strategies leave a lot to be desired. I digress.

A subprinciple to this major principle, “Build From the Bottom Up,” is what makes you whole. It means simply “to assemble components one unit at a time.” Subatomic particles make up atoms, atoms make up molecules, molecules make up compounds, and so on and so forth up to a living, breathing, self-aware human being. A seed begins with a handful of components and grows into a wonderfully complex organism, one unit at a time. Another subprinciple to this major principle, “Combine Modular and Nested Components,” fits hand in hand with building from the bottom up. It’s a bit like Russian nesting dolls. If you were to follow a recipe that makes up a person, you’d start with the simplest building blocks: subatomic particles. Sprinkle in a few of those and you’d make an atom. A few more atoms later, your dough advances to a molecule, continually fitting units within each other from simple to complex.

We can see these principles applied to human strategies in Brad Frost’s “Atomic Design,” in which Brad used nature as a mentor and was inspired by chemistry to develop a new methodology for creating design systems in websites and applications. Atomic design contains five levels with nature as a model: atoms, molecules, organisms, templates and pages. Atoms are the color palette, typography and building blocks of a website: HTML tags such as “label,” “input” and “button.” Josh Duck cleverly created a periodic table of the elements that superimposes HTML tags on top of the table and groups them together. Atoms are not particularly useful on their own. Combine atoms into a molecule and they become a useful component of a website: a search bar. Combine these relatively simple molecules into a more complex organism and you have sections of an interface: a masthead or project grid. Templates are more concrete and tangible to the client. They’re generally wireframes that consist of organisms arranged together into all of the types of pages a website might consist of: an article template or project template. Those templates are then used to generate specific pages with real content that more accurately reflect what a user will see.

There are a number of advantages to this methodology. As we see in nature, building from the bottom up and combining modular and nested components in this way lays the foundation for a website or application to grow successfully without buckling in on itself. Setting up those fundamental building blocks early in the design process provides consistency in design and user experience and the ability to build new pages quickly and easily as the website grows. When the atomic design system is in place, a request from a client for a new page requires finding the correct template with all of the necessary atoms, molecules and organisms and plugging in the new content instead of starting over from scratch.

When it comes to programming a website, coding modules in a way that applies the concepts of atomic design reduces repetition and produces more consistent code. It perpetuates the DRY principle (Don’t Repeat Yourself). David Hurley has blessedly broken down its definition into an understandable collection of words: “Any code written and used within your component should exist in only one location and be clearly written.” He also goes on to list the benefits of this principle as 1) reducing the chances for bugs to occur; 2) less code means fewer failure points; and 3) being able to rewrite one chunk of code that refreshes in many places instead of having to rewrite that chunk of code in each place individually.

So far, we’ve looked at two of the three components that make up a biomimetic solution: nature as a mentor and nature as a model. What about nature as a measure? How does this design methodology create conditions conducive to life? While not as straightforward as, say, a fancy box that turns food waste into homemade fertilizer within 24 hours, adopting the atomic design methodology gives you the infrastructure needed to maintain a website or application efficiently over time. This method is resource-efficient, allowing you to expend less energy, which in turn saves you time and money.

If you’re interested in learning more about atomic design, check out Brad Frost’s handy book on the subject, which “details all that goes into creating and maintaining robust design systems, allowing your organization to roll out higher quality, more consistent UIs faster than ever before.”