The quest for a new and dynamic methodology in crafting more vibrant interface design systems leads to seek inspiration from external fields and industries. It is amazing that the incredibly complex world created offers plausible solutions to similar problems to be tackled as one applies similar solutions in other arenas of life.
It should not be surprising that other fields like architecture and industrial design are more forward in smart modular systems development applied in manufacturing highly complex objects such as airplanes, skyscrapers and ships.
However, some best lessons or solutions to current problems could stem from the basics of chemistry such as in any high school chemistry lab.
Going Back to High School Chemistry
If proper attention was given to the high school chemistry teacher, much knowledge would be acquired and applied even until today. A typical chemistry class in high school may require working out of chemical equations to understand how matter reacts.
The basics of chemistry of chemical reactions involve chemical equations which display how atomic elements are put together to become molecules. Hydrogen and oxygen atoms could combine together to become water in the form of two hydrogen molecules with one oxygen molecule.
As properly understood, the natural world has basic atomic elements joining to form simple or complex molecules depending on the way the atoms are combined in specific processes. Very highly complex organisms could be formed through a combination of molecules through various processes.
- Atoms. Matter is made of atoms which are the basic building blocks where every chemical element displays unique properties. These cannot be broken down any more unless their identity and properties are impacted as atoms comprise smaller bits of elements known as neutrons, protons and electrons.
- Molecules. The next level of matter is molecules which are groups of atoms formed through chemical bonds. Molecules combined in this manner acquire unique properties of their own to become more identifiable and operational compared to atoms.
- Organisms. A higher level above molecules in matter is the organism where complex molecules assembly to function as a viable complex structure on its own. This could be a simple single-celled organism or an incredibly complex organism such as a human being.Although the universe is immensely complex in its composition, the gist of the matter is that atoms combine to become molecules that could generate complex organisms when they themselves combine intriguing.This atomic theory underpins the fact that all matter that is known in the current universe can be broken further into other forms of atomic elements that are finite. The high school chemistry drill on balancing chemical equations forms the basis for approaching interface designing proactively.
Atomic Design Methodology
When all matter in the universe is known to be capable of breaking down into a finite set of atomic elements, it is likely that the same principle applies on interfaces where the latter could also be broken down into a finite set of elements.
Josh Duck produced a listing of Periodic Table of HTML elements which describes clearly on the generation of websites, intranets, apps and all others to be made up of specific HTML elements.
With the same principle, a similar finite building block set could be undertaken on the same process that works in the natural world for the apt designing and development of user interfaces. Hence, the atomic design.
Atomic design is known as a methodology made up of 5 distinct stages that operate in synergy to generate interface design systems deliberately. They are:
Each stage is highly instrumental in crafting a dynamic interface design system.
Stage 1 – Atoms
Just as in the universe atoms form the basic building blocks of matter, the atoms of interface system designs should follow the same principle as the foundational building blocks of all user interfaces.
These interface atoms would have basic HTML tags such as form labels, inputs and buttons including other elements that cannot be further broken down without being dysfunctional. Every atom in the universe enjoys its own uniqueness through distinctive properties. A hydrogen atom is made up of one electron but a helium atom has two.
These are known as intrinsic chemical properties with profound effects on their applications. The Hindenburg explosion is an excellent illustration of this fact where the catastrophe was very intense as the airship was filled with hydrogen gas which was highly inflammable instead of an inert gas like helium.
Similarly, every interface atom possesses unique properties like image dimensions or heading font sizes. These properties are instrumental with a direct influence on any user interface application. Moreover, tags on user interfaces serve like atoms to include more abstract components like color palettes and font stacks as well as invisible features like animations.
When such intriguing elemental properties of the user interface are properly defined, there is a consistency and cohesion promoted in the entire experience. For a great design system, the atoms display all available global styles quickly to be a helpful reference for later apps.
However, as with all natural world atoms, interface atoms are not readily available on their own. Their applications become more interesting through the right manipulations.
Stage 2 – Molecules
In chemistry, molecules exist from the bonding of atoms with new properties. Similarly in interfaces, molecules would be new groups of UI atoms that function as a unit. This could be in the form of a form label, button and search input that could be combined to become a search form molecule. As a new group, these abstract atoms become a molecule with a new and distinct purpose. The label atom could now be defined as an input atom.
Once the button atom is clicked, the form is submitted. This stimulates a simple and portable component that is reusable wherever site search functionality is required. The task of putting together elements into simple functioning groups is common in the construction of user interfaces. However, focusing on a stage in the methodology of atomic design to activate these seemingly simple components requires some key points of contention.
This enables UI designers and developers comply with the single responsibility principle which is a long-standing computer science principle with an excelling mentality in every task. This is applied in generating single pattern software without excessive complexity that begets non-user friendly software. The creation of simple UI molecules encourages simpler testing with greater reusability and more consistency engaged throughout the interface.
This produces simple and functional components that are reusable to be placed in a broader context. Hence, the emergence of organisms!
Stage 3 – Organisms
Organisms are defined to be relatively complex UI components made up of molecules, atoms and/or other organisms grouped together. Organisms are notably distinctive components of the interface.
A search form is often found in the header of websites; hence, a search form molecule could be located at the header of an organism which could be a standalone component of the interface despite the presence of other pieces of interface sporting unique properties and functionality.
Organisms could be made up from similar or different types of molecules. There could be a header organism which may have dissimilar elements like the logo image, search form and primary navigation list. These are commonly viewed at websites where a category page of could be seen with products displayed in a grid format.
Designers and developers of molecules into relatively complex organisms need to have a focused concept of the context with organisms demonstrating smaller and simpler components in action while serving as unique patterns that could be repeatedly manipulated.
It is convenient to display the product grid organism for any preferred group of products anywhere under category listings, search results or related products. With the definition of organisms in the user interface design system, the basic chemistry analogy could be broken to apply these components for the generation of a web page.
Stage 4 – Templates
Now that the terminologies of chemistry on atoms, molecules and organisms have been clearly defined with their properties and roles, it is time to proceed with the building of the proper hierarchy of a well-designed website with apt components deliberately constructed.
The final output must mirror the components and structures which are clearer to clients, superiors, colleagues and stakeholders to make sense to them. Carrying the chemistry analogy too far could prove detrimental with a lot of confusion among stakeholders. Hence, it is better to present these groups of audiences with the right lingo which they are familiar with to be acceptable.
Templates are the next level of objects found on a web page where specific user interface design components are placed onto a layout to articulate the underlying content structure of the design. The header organism could be applied to a homepage template for the webpage to be created.
The homepage template lists out all relevant and functioning page components which serve to provide the right context for the relatively complex molecules and organisms. It is important to demonstrate the look and function of components when an effective design system is being crafted. These components must be displayed according to the layout context as proof of a well functioning entity when put together.
Templates are also important in their role of focusing on the underlying content structure of the page instead of its final content. A well-crafted design system must be able to accommodate the dynamic nature of content; hence, the proper articulation of the components and their properties such as image sizes and character lengths is critical for a clear understanding of the system.
When a webpage skeleton is well defined, the system to be created could accommodate many types of dynamic content easily with the proper guardrails for different contents that would take up certain design patterns. The homepage template of organizations could display different key components in action besides demonstrating the content structure on the character lengths and image sizes.
From a skeletal system of the page, more content could be included.
Stage 5 – Pages
The last distinct stage in an interface design system is pages which are specific examples of templates to replace placeholder content using actual representative content. An example could be how the homepage template could be inserted with representative content that would display real content in action.
This stage is known as the most concrete stage in atomic design with many important reasons. Users would be viewing this page when they visit the website and stakeholders would sign this off as their investment if it is appealing. Components would come together to become an attractive user interface that is functional.
Besides demonstrating the final interface which would be viewed by web users and web visitors, pages are essential in the testing of the underlying design system to ensure its effectiveness. The page stage reveals the truth about the dynamism of the all the patterns employed with real content applied onto the design system.
If the whole works still do not satisfy with a great look and smooth functioning, then it is wise to loop back to previous stages that include a modification of the molecules and organisms as well as templates in order to satisfy the content requirements.
When real representative content is inserted into a live website’s homepage template of any organisation, all underlying design patterns would be proven true if they hold up well. Dynamic systems that would allow reusable design patterns need to be created with an accurate reflection of the content’s reality when placed in those patterns.
Pages are also instrumental in securing a spot for allowing different templates to be effected. This is crucial for building a design system that is robust and reliant.
Template variation designs could include:
- Different users having different number of items in their shopping cart.
- The dashboard of a web app typically displays the most recent activities but this section could be off-limits to first-time users.
- Different articles may have different character lengths for the headlines.
- System administrators enjoy certain privileges such as extra buttons and options displayed on their dashboard.
These template design variations have the same underlying components although the user interfaces could be different to reflect the different nature of the contents. The constructions of the underlying molecules, organisms and templates could be directly influenced by these variations. Hence, when pages are well created to accommodate such variations, more resilient design systems are possible.
That is the dynamics of atomic design! These 5 distinctive stages are put together to synergy an effective user interface design system.
Summary of Atomic Design
- Atoms are user interface elements of the smallest entity without further breaking down to become the elemental building blocks of the intended interface.
- Molecules are atoms collected to become relatively simple user interface components.
- Organisms are quite complex components forming the discrete sections of the interface.
- Templates are used to position components on the page layout with a demonstration of the underlying content structure of the design.
- Pages are manipulated to apply real content to the preferred templates in demonstrating the final user interface while testing the design system resiliency.
Advantages of Atomic Design
A good understanding of the advantages of an atomic design for the desired user interface proves to be a strong motivation for its design, development and implementation. Those who build user interfaces in the past without adopting this explicit 5-stage methodology may wish to reconsider their approach.
An atomic design is helpful in providing several key insights which could enhance the creativity of the designers and developers to generate more effective and deliberate user interface design systems.
Part and Whole
The atomic design is so versatile with many advantages which include its ability to handle the concrete and the abstract. It is possible to view the interfaces simultaneously broken into their atomic elements and the manner in which these are synergised to form the final user interface experience.
The beauty of an atomic design is its permissibility to switch contexts as the atoms, molecules and organisms making up the interfaces are mobile and not in a vacuum. The smaller components of the templates and pages of the interfaces are manipulated effectively to influence the whole design and vice versa.
As the two components are intertwined, the atomic design becomes dynamic in application. Designers and developers of an atomic design interface are skilled in crafting a particular component in the beginning process while content producers are likened to canvas painter creating expressive detailed strokes with the layout context using real representative content.
Every stroke is crucial in developing the final interface as each component is finely honed in for a definite functioning and aesthetics in accordance to the final user interface context. This is the crux of the matter.
The atomic design offers a proper structure for an easy and convenient traversing between the components and entire user interface. Hence, it must be noted that the atomic design is not a straightforward process where buttons and other elements could be produced separately and hope that a cohesive system is generated miraculously or magically.
The 5 stages of atomic design are not modular in execution as the stages form the mental model for an effective concurrent creation of the final user interface with their underlying design systems.
Clear Distinction between Structure and Content
A design system that is well crafted serves to deploy the existing content within as it is aware of its proper presentation in the context of the user interface. The established interface patterns need to be reflected accurately on the nature of images, text and included content within where the content is aware of its presentation form and layout.
There is a close relationship between design and content where designers need to consider both aspects simultaneously as the user interface is constructed. Atomic design provides a vibrant language for contending the structure of UI patterns and contents which are viewed in the patterns.
There may be a clear distinction between templates (content structure skeleton) and pages (final content). This is clearly recognized by atomic design where the two impose a strong influence on each other.
A user interface content skeleton could consist of the person block molecule repeatedly manipulated while it is populated with the desired representative content. The ability to visualize the content skeleton as well as the representative final content boosts the creation of patterns that would accurately reflect the content within.
If the name of a person were wrapped on 5 lines within the pattern, it would be necessary to address that unacceptable behavior further at a more atomic level. When the content is poured into the UI during the page stage, it is able to influence the underlying design patterns’ characteristics and parameters.
Impact of a Name
Throughout this book it is mentioned that there is nothing new with modular design and development. Hence, what is the impact of certain terms used as in “atoms”, “molecules”, and “organisms”? Design and development terms like “modules”, “components”, and “elements” could easily be adopted as standard. However, the discussion on atomic design requires the choice of chemical terminology to imply a hierarchy which assists those with basic chemistry knowledge to understand on atomic design. Other terminologies lack that ability to help UI designers, developers and end users appreciate and understand the full effect as clearly.
However, naming items proves to be difficult and imperfect. Hence, the use of chemical terminologies and atomic design stages’ names could be effective to interface designers and developers although some may prefer other choices.
Different teams may prefer different terminologies that could include “foundations”, “materials”, “rooms”, “templates”, and “pages”. As long as the selected terms make sense to designers and developers, the construction of the final user interface could proceed smoothly and successfully.
The crux of the matter is to agree on the scope of vocabulary for the designing and development to enable the team a good ownership on working the atomic design concept and cooperating with each other for effective work generated by speaking and using the same language and terms.
“Atomic design” could be a good term that encapsulates the modular design and development concepts to become an effective and useful abbreviation in convincing stakeholders while communicating with colleagues on the same page. The bottom line is to be comfortable with the preferred terminologies or names to work with especially when a team is involved that all parties are privy to the information and terminology in order to create an effective user interface design system.
Atomic design for User Interfaces
The atomic design could be viewed as a concept generated from the Web. Any web designer would build on web-based interfaces with the apt understanding that atomic design is applicable to all types of user interfaces and not limited to web-based options alone.
The atomic design methodology could be applied to any user interface for any software in the market; this includes the likes of Microsoft Word, Photoshop or even the ATM. As a demonstration, the atomic design could also be applied to the mobile app Instagram.
The atomic design Instagram interface could comprise the following:
- Atoms. The Instagram UI screen could display icons, various text-level elements and primary images as well as the avatar image of user.
- Molecules. Some icons are useful as simple utilitarian components; these include the bottom navigation bar or the photo actions bar which allows users to like or comment on the displayed photo. Simple text or image combinations are possible to form relatively simple components.
- Organisms. Photo organisms could take shape with user information, photos, timestamp and photo actions desired. It could also include the count and caption of the photo. This makes the organism the cornerstone of the whole experience with Instagram as an unending stream of user-generated photos is repeatedly stacked.
- Templates. When atoms, molecules and organisms are put together, the desired components are formed in the context of a layout. The exposed content skeleton highlights dynamic content to enhance the Instagram experience with the availability of user handle, photo and avatar.
- Pages. Then the final product is formed with a completion of real content inserted to ensure that the whole underlying design system is set up properly as a dynamic and vibrant user interface that is functional.
Theory versus Practice
This chapter is about the methodology of atomic design with a demonstration of the dynamic synergy of atoms, molecules, organisms, templates and pages combined to produce the well-crafted and deliberate interface design system that is functional and impressive.
Atomic design provides a clear visual of the breaking down of UIs to the lowest of atomic elements present while simultaneously working through the combination of elements for the ultimate UIs. There is a tight bond between design and content with a persuasive view of the atomic design permitting a skillful crafting of UI design systems to accommodate even customized content within.
Finally, there is the language of atomic design which offers a useful shorthand approach in the discussion on modularity with colleagues for a clear hierarchy in such UI design systems.
Hence, atomic design is indeed helpful in the methodology of design and development although it could end up as merely a mental model in the construction of a UI.
Perhaps one could be wondering how atomic design could be activated. As the pages are flipped, there will be more tools and processes for the atomic design dreams to materialize.