The Anatomy of Website Design

As the craft of internet style continues to evolve, we’re recognizing the necessity to develop thoughtful style systems, instead of developing straightforward collections of web content.

A lot has been mentioned concerning the creation of style systems, and far of it focuses on establishing foundations for color, typography, grids, texture and the like. This sort of thinking is definitely necessary, however I’m slightly less curious about these aspects of style as a result of ultimately they're and can continuously be subjective. Recently I’ve been additional fascinated by what our interfaces are comprised of and the manner we are able to construct style systems in an exceedingly more organized way.

In looking for inspiration and parallels, I unbroken returned to chemistry. The thought is that every matter (whether solid, liquid, gas, simple, complex, etc.) is comprised of atoms. Those atomic units bond along to create molecules, that successively mixed into additional complicated organisms to ultimately produce all matter in our universe.

Similarly, interfaces are created from smaller elements. This suggests we are able to break entire interfaces down into basic building blocks and workout from there. That’s the fundamental gist of atomic style.

Josh Duck’s hypertext markup language periodic table provides an excellent breakdown of internet designers’ atomic components.

What is atomic styling?

Atomic style is methodology for developing web design systems. There are 5 distinct levels in atomic design:

1.      Atoms

2.      Molecules

3.      Organisms

4.      Templates

5.      Pages

The progression of atomic design goes from atoms ? molecules ? organisms ? templates ? pages, as can be seen in the image below. 

Let’s explore every stage in additional detail:

Atoms

Atoms are the fundamental building blocks of matter. Applied to internet interfaces, atoms are our hypertext markup language tags, corresponding to a label, an input or a button. 

Atoms also can embody additional abstract components like color palettes, fonts and even additional invisible aspects of an interface like animations.

Like atoms in nature they’re fairly abstract and frequently not really helpful on their own. However, they’re sensible as a reference within the context of a pattern library as you'll be able to see all of your international designs set out at a look.

Molecules

Things begin to obtain a lot of attention and tangible once we start combining atoms along. Molecules are teams of atoms secured together and are the tiniest elementary units of a compound.

These molecules wrestle their own properties and function the backbone of our style systems.

For example, a label, input or button aren’t too helpful by themselves, however mix them together as a form and currently they are able to really do impressive things together.

Building up to molecules from atoms encourages a “do one thing and do it well” mentality. Whereas molecules are often complicated, as a rule of thumb they're comparatively straightforward mixtures of atoms designed for use over and over again. 

Organisms

Molecules provide us some building blocks to figure with, and that we will now mix them together to create organisms. Organisms are teams of molecules joined along to create a comparatively complicated, distinct section of an interface.

We’re beginning to get more and more concrete. A consumer may not be very curious about the molecules of a style system, however with organisms we are able to see the ultimate interface commencing to take form.

Organisms will comprise similar and/or completely different molecule varieties. Let’s say, a “banner” organism would possibly contains numerous elements sort of an emblem, primary navigation, search form, and list of social media channels. However a “product grid” organism may include a similar molecule (possibly containing a product image, product title and price) continual over and another time.

Building up from molecules to organisms encourages making standalone, portable, reusable elements.

Templates

At the template stage, we tend to break our chemistry analogy to urge into language that creates additional sense to our clients and our final output. Templates consist largely of teams of organisms sewed together to create pages. It’s here wherever we tend to start to visualize the look coming together and begin seeing things like layout in action.

Templates are terribly concrete and supply context to any or all these comparatively abstract molecules and organisms. Templates are also where clients begin seeing the ultimate design in place. In my expertise operating with this technique, templates begin their life as hypertext markup language wire-frames, however over time increase fidelity to ultimately become the ultimate deliverable. Bearded Studio in Pittsburgh follow an identical method, wherever designs begin gray-scale and layout-less however slowly increase fidelity till the ultimate design is in place.

Pages

Pages are specific instances of templates. Here, placeholder content is replaced with real representative content to provide a correct depiction of what a user can ultimately see.

Pages are the best level of fidelity and since they’re the foremost tangible, it’s generally where the majority of people will spend most of their time and what most reviews revolve around.

The page stage is crucial as it’s wherever we tend to take a look at the effectiveness of the website style system. Viewing everything in context permits us to loop back to change our molecules, organisms, and templates to improve the important context of the website styling. 

Pages are the place to verify variations in templates. For instance, you would possibly wish to articulate what a headline containing forty characters appears like, however additionally demonstrate what 340 characters appears like. What will it seem like once a user has one item in their shopping cart versus ten items with a discount code applied? Once more, these specific instances influence how we tend to loop back through and construct our system.

Why atomic style

In a ton of ways, this is often how we’ve been doing things right along, albeit we tend to haven’t been consciously considering it in this specific approach.

Atomic style provides a transparent methodology for crafting design systems. Clients and team members are able to better appreciate the idea of style systems by truly seeing the steps set for them.

Atomic style provides us the power to traverse from abstract to concrete. As a result of this, we are able to produce systems that promote consistency and scalability whereas at the same time showing things in their final context. And by aggregation instead of deconstructing, we’re crafting a system right out of the gate rather than cherry picking patterns once the actual fact is due.