An Introduction to Atomic Design for Web Designers

Modularity, reusability, and scalability are not usually coding concepts yet we can also make use of them to emanate better-optimized pattern systems. Atomic design is a new methodology for building effective UIs from a bottom up, using a chemistry analogy.

10 Reasons Why You Need Code Optimization

10 Reasons Why You Need Code Optimization

Editor’s note: This essay is partial of a Code Optimization series, where we take a demeanour during how…Read more

Instead of conceptualizing collections of web pages, atomic pattern starts with a simplest UI components called atoms (buttons, menu items, etc.), and builds a whole UI adult around 4 some-more stages: molecules, organisms, templates, and pages.

Atomic pattern stagesAtomic pattern stages

The book

The methodology was combined by engineer Brad Frost with a aim of “crafting successful UI pattern systems”. Atomic pattern was released as a book that we can read online for free, or sequence as a paperback ($20.00) or an ebook ($10.00) as well.

Atomic pattern approaches user interface pattern from a uninformed new viewpoint that hopefully will shake adult a web pattern landscape a small bit. This essay intends to give an intro into this methodology yet a book goes into a reason much-much further, so review it if we can, it’s value it.

Atomic Design bookAtomic Design book

Atomic pattern hierarchy

Atomic pattern is fundamentally a mental model that creates designers consider of web pages as a hierarchy of reusable components. The hierarchy of atomic pattern is built adult of five stages; any theatre is done of a organisation of components from a prior stage. The 5 stages supplement adult into a transparent and judicious interface pattern system. They are as follows:

  1. Atoms
  2. Molecules
  3. Organisms
  4. Templates
  5. Pages

1. Atoms

Just like in chemistry, atoms are a smallest building blocks that cannot be serve decomposed. Therefore, atoms are a basic HTML elements, such as buttons, labels, and submit fields, that provide a smallest units of a web page.

Of course, not all HTML elements are atoms, for instance, sectioning elements (article, section, etc.) aren’t (cannot be) a smallest units of a web page.

Atoms are not simply a HTML elements yet also their belonging styles: fonts, colors, dimensions, and other CSS character rules. With Brad’s possess words, atoms “demonstrate all your simple styles during a glance”.

Atoms – Example

Here’s an instance from a website. The headlines of endorsed posts might comment for one form of atom; they use a same HTML and CSS code and can be easily distinguished from a rest of a content.

Atom exampleAtom example

Note that wasn’t designed with atomic pattern in mind, here it is usually used for proof purposes.

The hint of atomic pattern is to design a UI from a bottom adult regulating these 5 stages, not to brand a atomic pattern components afterwards.

2. Molecules

A molecule is shaped by a organisation of atoms. Molecules consecrate a subsequent theatre in a atomic pattern hierarchy. Think about easier UI elements that are already made of some-more than one HTML elements, such as a hunt form or a endorsed post in a sidebar.

Being orderly into a proton gives a purpose to any atom. In a bigger organisation (molecule), atoms contingency support and complement any other, they contingency work good together in sequence to emanate a serviceable design.

For instance, a pretension (one atom) contingency get some-more emphasis (bigger fonts, some-more weight, etc.) than a author’s name (another atom) in a endorsed post block. This way, a dual atoms are “meant” to work as a team to get a best result.

Molecules – Example

Using a prior example, we can see that in Hongkiat’s sidebar, one retard of endorsed post could be seen as a molecule. A endorsed post proton is built adult of 3 atoms: a thumbnail, a title, and an author’s name atom.

Molecule exampleMolecule example

3. Organisms

Organisms are stoical of a group of molecules, atoms (and infrequently other organisms). In web design, organisms are more formidable UI components that paint definitive sections of a page, such as a header, a footer, or a sidebar.

Organisms can be possibly done adult of different forms of molecules, for instance a sidebar might include of a hunt bar and opposite kind of widgets, or of the same proton steady several times, for instance a handful of associated post blocks underneath any other. And, it can be a multiple of these two.

Organisms – Example

On Hongkiat’s website, a sidebar could be an organism. It’s stoical of a search bar (one form of molecule, displayed usually once) and several endorsed posts (another form of molecule, displayed many times).

However, a sidebar mammal can also be seen as a combination of a molecule (the hunt bar) and another organism (the endorsed post widget with several endorsed posts). Atomic pattern is a flexible model, a manners are not really strict, so in this box we can conclude a same building retard both as a proton and an organism.

Organism exampleOrganism example

4. Templates

The subsequent theatre in a atomic pattern hierarchy are templates. As we can see, this is when atomic pattern stops regulating a chemistry analogy. Brad refrains from a vernacular during this indicate as he thinks it’s less understandable for clients and other stakeholders, and it’s radically a dual final stages (templates and pages) that designers need to sell.

Templates are built adult of organisms. They are page-level objects yet without a final content. The purpose of templates is to represent a structure of a underlying content.

Templates arrangement how opposite atoms, molecules, organisms “function together in a context of a layout”. They fundamentally paint a skeleton of a page.

Templates – Example

For an example, consider about a home page template with placeholder images and lorem ipsum calm blocks.

Below, we can see an instance from a Atomic Design book. It is a home page template of a TimeInc magazine. Atoms, molecules, and organisms are all during their place yet only with schematic content.

Template exampleTemplate example

5. Pages

Pages paint a final theatre of a atomic pattern hierarchy. Pages are a “specific instances of templates”. In a page stage, templates get populated with genuine content (copy, microcopy, images, videos, etc.), only as they will seem in a genuine UI.

Pages concede designers to see how a final user experience will demeanour like, to test a design with genuine users, and to measure how good it performs in terms of usability, conversion, accessibility, and other metrics.

Pages template variations

The other idea of a page theatre is to make template variations possible. We pronounce about template variations when a underlying template is a same yet a populating content is (slightly) different. For instance, if we wish to uncover opposite calm to opposite user groups (e.g. for visitors contra logged in users), or when one title is most longer than a others.

Using template variations is essential if we wish to emanate consistent and resilient user interfaces. Smaller components (atoms, molecules, organisms) contingency function good in opposite scenarios.

For instance, a symbol contingency demeanour clickable with whatever surrounding elements around. If it doesn’t demeanour actionable in a certain variation, we need to redesign a symbol atom until it fits all use cases.

Pages – Example

Below, we can see a page theatre of a prior TimeInc home page template. Looks different, huh? This is only one template variation, though. To have an effective UI, a pattern group has to consider tough about what might change in a genuine site. Then, they need to exam a pattern for that template movement (page), too.

Page examplePage example

A Look Into Proper HTML5 Semantics

A Look Into Proper HTML5 Semantics

If we delicately devise a structure of your HTML documents, we can assistance computers make clarity of the…Read more