Role:
- Principal Product Designer

Skills:
- Atomic design
- User interface design
- Prototyping
- Visual design
- Design to Develop Handoff

Tools:
- Sketch
- Sketch cloud
- Figma
- Zeplin
- Slack
- Notion

Customer(s):

- Company (Swim)

- Company Marketing

- Company Sales

- Company Biz Dev

Atomic Design:
- Atoms
- Molecules
- Organisms
- Templates
- Pages

Designing + Developing Effective Componetized Website Design Systems

with Atomic Design!

The time came to build a new website, based on a new direction utilizing the existing visual language (streams, APIs, agents, and UIs). Where better to turn than Brad Frost's "Atomic Design" methodology.

Note, I will not focus on the content (copy) details of the site, yet will hyper focus on the atomic design methodology and how it was utilized to successfully design, handoff and develop a company's website. It should also be said that at Swim/Nstream the same atomic design process was utilized to great success on all our real-time continuous streaming applications. Wether they be relatively simple sales demos, or much more complex and at massive scale Fortune 500 enterprise applications.

What is Atomic Design?

Atomic design is a methodology composed of five distinct stages working together to create interface design systems in a more deliberate and hierarchical manner. The five stages of atomic design are:

Atoms
Molecules
Organisms
Templates
Pages

It's like Chemistry 101 all over again. As we use more and more elements over and over again, it's good process to componitize these often reused elements.

Atomic design is atoms, molecules, organisms, templates, and pages concurrently working together to create effective interface design systems.

Atomic design is not a linear process, but rather a mental model to help us think of our user interfaces as both a cohesive whole and a collection of parts at the same time. Each of the five stages plays a key role in the hierarchy of our interface design systems. Let’s dive into each stage in a bit more detail.*

* reference Brad Frost's website

https://atomicdesign.bradfrost.com/

Thank you Brad Frost! All that Chemistry paid off! :)

Instead of covering all the aspects, parts and pieces of Atomic Design up front, let's discuss as we go.

Atoms (Fundamental Building Blocks)

As with matter, such it is with websites and web apps. Atoms are the building blocks of all matter, and thus will be our fundamental building blocks here in our atomic design efforts.

Atoms are typically basic html elements! Ok got it!

So what are the building blocks of our soon to be new company website. Typically they are:

labels (text)
inputs
buttons
icons
art (logo, photo, etc)
hue (color)

Each of these atom types have their own distinct properties, such as dimension. hue and shape. Buttons are of course a hot topic when it comes to are they atoms or molecules? We will take the route of a "button shape" (shape only) is an atom within the context of this project. We at Nstream, also consider our visual language to form building blocks of our company, its mission, it products and its application experiences.

This concept of componetizing atoms (and molecules) really did pay off in the streaming application space. We were able to design and continually develop a UI framework based on atomic design that allowed us to leverage that framework whenever we would engage a particular customer. For potential customers for example we were able to point to their data, create streaming APIs, and stream taht data to our domain agnostic UI framework. This would allow the potential customer to see real-time continuous insights on top of their data.

This domain agnostic rapid prototyping approach many times led to new contracts and or contract extensions with our customers.

Back to atoms. Consider atoms your base styles, all fundamental building blocks needed to design and develop your website or web app. In the context of a pattern library, atoms are in fact all your base styles.

See below, for how icon atoms become molecule atoms by adding color (hue0 atoms.

Molecules (Relatively Simple Groups of Atoms)

In chemistry, molecules are groups of atoms bonded together that take on distinct new properties. For instance, water molecules and hydrogen peroxide molecules have their own unique properties and behave quite differently, even though they’re made up of the same atomic elements (hydrogen and oxygen).*

Molecules Give Us Functional Elements!

In interfaces, molecules are relatively simple groups of UI elements functioning together as a unit. For example, a form label, search input, and button can join together to create a search form molecule.

For molecules, we went with the following:

form label
search inputs
buttons + text labels
color icons
art (logo, photo, etc)

Generally if you break a component down and get base tags (image, heading, paragraph), that component is a molecule.*

Breaking Down Molecules & Organisms Help Define Them

However, if you break a component down and get even smaller components (list, card, form), that larger component is definitely an organism. Molecules typically do one thing very well. Link to another section or page, submit a form, communicate an aspect (concept) of a visual language, or any other focused functions. Think of the molecules as a single function low-level component with high potential repeatability.

See below for a set of molecules that were created for this particular website project.

Organisms (Groups of Molecules)

In chemistry, molecules are groups of atoms bonded together that take on distinct new properties. For instance, water molecules and hydrogen peroxide molecules have their own unique properties and behave quite differently, even though they’re made up of the same atomic elements (hydrogen and oxygen).*

Molecules Give Us Functional Elements!

In interfaces, molecules are relatively simple groups of UI elements functioning together as a unit. For example, a form label, search input, and button can join together to create a search form molecule.

For molecules, we went with the following:

form label
search inputs
buttons + text labels
color icons
art (logo, photo, etc)

Generally if you break a component down and get base tags (image, heading, paragraph), that component is a molecule.*

Breaking Down Molecules & Organisms Help Define Them

However, if you break a component down and get even smaller components (list, card, form), that larger component is definitely an organism. Molecules typically do one thing very well. Link to another section or page, submit a form, communicate an aspect (concept) of a visual language, or any other focused functions. Think of the molecules as a single function low-level component with high potential repeatability.

See below for a set of molecules that were created for this particular website project.

Templates (Skeletal System)

Unfortunately, it/s time to put our chemistry analogy aside. This is where we exit the building up of components, and enter into the a world and nomenclature that our customers and client can understand. This new nomenclature will allow us to communicate and connect effectively with our customers, in order to receive useful feedback from them.

This brings us one step closer to our final output for our customer.

Templates Are Page Level Objects. Emphasis on Structure!

In interfaces, templates provide context and layout for components (organisms, etc). The underlying structure of a page is revealed at this level of atomic design.

homepage
page sections
unique page layouts (types)

This template approach allows us to design an effective web experience without knowing all the details of the content. This is invaluable in getting a head start or running in parallel with content creation.

Provides Context For Relatively Abstract Components!

By working on a skeletal system made up of page templates we are establishing a system that can handle both static and dynamic content.

See below for templates examples that were created for this particular website project.

Pages (Template Instantiations)

Pages are the final step of an Atomic Design process. Pages are instances of templates with actual content. Each template above for example, may be populated with content to form an instantiated page.

The key here is syncing up your templates with the actual content provided by the extended team. There may be a bit of give and take her when it comes to adding content to your already crated templates.

There is a fair amount of trial and error, but with a little hard work and team collaboration the templates should work in most if not all content scenarios.

Pages Are Specific Instances of Templates, With Content!

In interfaces, templates provide context and layout for components (organisms, etc). The underlying structure of a page is revealed at this level of atomic design.

homepage
each unique web page gets its own "page"
landers may form a set of unique pages as well

At this Page level of atomic design, we are now dealing with the most concrete of levels in the atomic design system. Will all our patterns hold up against all the different content types. Will our templates hold up against dynamic content?

Pages Are The Most Concrete In Atomic Design!

By working together with adjacent team members and stake holders alike, the long hours of creating and collaborating on an atomic design system for your company and or its products will be well worth the effort.

See below for several final website pages that were created for this particular website project.