Atomic Design

The goal of atomic design is to recognize an endpoint (desired content + design/template options) and dial-back to fundamental elements to arrive at a logical and visual design that can be realized.

Atomic Design breaks this down to a heuristic with tiers of building blocks:

• Elements - HTML
• Atoms - HTML tags
• Molecules - Composition of HTML elements to render content at hand.
  • Items that are not HTML elements for a defined structure are usually DIV/SPAN elements.
• Organisms - Combination of HTML compositions to higher order elements (navigation, etc.)
  • This items are represented in wireframe documents.
• Templates - Come from the CMS (Content Management System); matches scheme set forth in the wireframe specifications.
  • Wix Template Library
  • Webflow Template Library
• Pages - Instances of templates.