Skywire Logo

Please Upgrade Your Browser

Unfortunately we don't currently support Internet Explorer. Please upgrade to Microsoft Edge, Google Chrome or Safari

Skywire Logo
Skywire Logo
Button Text
Skywire Logo
GET IN TOUCH
GET IN TOUCH
LATEST
DIGITAL MARKETING
OBSERVATIONS IN LUXURY
ON THE SOFA WITH
THINGS THAT BRING ME JOY
IN :
Digital Marketing

What is Atomic design?

Christmas Countdown Checklist!

It's that time of the year again and we're expecting Christmas and the Holiday season to be huge online this year so make sure you have all your features, campaigns, assets and timings planned well in advance.

To help you with your planning we've put together this handy topline checklist. Get in touch if you have any other great tips to share with our community and we'll do so in our monthly updates.
WRITTEN BY
SkYWIRE
Posted
July 11, 2023
Jul 11, 2023

What is Atomic design?

Atomic design is a methodology composed of five individual stages that come together to create interface design systems in a more intentional and hierarchical manner.

  1. Atoms: The atoms of our interfaces serve as the foundational building blocks that comprise all our user interfaces. Atoms can’t break down any further without ceasing to be functional. This includes basic elements such as buttons, form labels, inputs etc.
  2. Molecules: These are 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.
  3. Organisms: These form distinct sections of an interface. They are fairly complex UI components, composed of groups of molecules and/or atoms and/or other organisms.  
  4. Templates: Templates are page-level objects that place components into a layout. Their focus is to articulate the page’s underlying content structure rather than the page’s final content.
  5. Pages: Pages are the most concrete stage of atomic design, as they highlight the user experience - what they will see and engage with. Pages utilise specific instances of templates that show what a UI looks like with real representative content in place.

VIEW ALL POSTS

Get The Wire Newsletter

Stay informed on fashion, luxury ecommerce

Thank you! Welcome to The Wire
Oops! Something went wrong while submitting the form.
Skywire Logo