Webpage design using atomic design

Question

I need to create a webpage using atomic design. I am not getting proper tutorials in internet to get started.

Please share some demo project, so that i can understand how to implement using atomic design.

Answer 1

First of all I recommend "Atomic Design" ebook by Brad Frost, you can read it here: http://atomicdesign.bradfrost.com/table-of-contents/

In general - atomic design is more an idea than step-by-step tutorial. It's just a way to design components, going from the atoms (like a label or throbber) to more complex molecules (like search box) and whole organisms (like contact form).

Please read the above book. It should answer most of your questions. If not, please ask more specific question.

Answer 2

Great answer from KTU, that's pretty much it!

As to how you implement this..

Just want to add my subjective perspective as I haven't found a precise system that tells you how to go about it once you start implementing everything in code. The concept is as concrete as how you maintain the balance between the principles of DRY / WET.

The main thing that is certain is that you should have an atoms/molecule/organism folder

For example, Im still debating whether one should enforce a strict import policy where components can only import from one layer down in the hierarchy.

• Should organisms be able to import atoms? I can't think of any examples in nature. But more importantly, it's practical! I say yes, but some collaborators think differently here!

• Should atoms be able to import atoms? No, that doesn't seem right, at least to me

• Should icons be considered fonts or Atoms? If they are sub-atomic components (fonts, colors, spacing, etc), then I can use icons in an atom. If they are atoms, anything using an icon and text should maybe be a molecule. So no, that's impractical, icons are fonts conceptually.

How I currently maintain my atomic design is this

Prioritize implementing the atomic design together with the UX designer in their own design tool of choice, and then declare the design file the single source of truth internally.

Even better,

• export the atoms directly from an online design tool, forget about the theme.js file, and compose your molecules and organisms from there.
• Avoid custom code in the atoms folder (unless they need to be interactive), this allows you to continue exporting updated designs easily. (*)
• discourage the use of CSS in any other folder than the atoms folder, (Custom spacing containers can easily show up from time to time, to match the final design, and you could deal with these as well if you want)

This works well using Figma -> AnimaApp -> Your React Based Project -> Storybook Connect for Figma.

(*) I keep 'dynamic atoms' in a separate folder that uses jsx.

• buttons,
• containers that render children
• modals

Answer 3

Intro

Compare to traditional web development, instead of design your website page by page, you break down your webpage/mockup into different components.

When you need them for different pages, you can add these modules piece by piece to structure useful components.

Quick start

• Define your color and fonts in atom folder
• Define your collection of links into molecules folder
• Define your header/footer into Organism folder
• Import your CSS by atom -> molecules -> organism order

/* Atom / links */
a {  
  color: #1EAEDB;
  text-decoration: none; 
}
a:hover { 
  color: #0FA0CE; 
  text-decoration: underline;
}

/* Molecules / header-links */
.header-links { 
  list-style-type: none; 
  padding: 0;
  margin: 0;
}
.header-link { display: inline-block; }

/* Organism / header */
header {
   width: 100%;
   background-color: #222;
   padding: 12px 20px;
}

<header class="header">
   <ul class="header-links">
    <li class="header-link">
      <a href="#">Home</a>
    </li>
    <li class="header-link">
      <a href="#">About</a>
    </li>
   </ul>
</header>

Now you have a header on your website that is using atomic design pattern! You can try to break down other components as well using this method.

---

Source:

1. http://bradfrost.com/blog/post/atomic-web-design/
2. https://uxdesign.cc/atomic-design-how-to-design-systems-of-components-ab41f24f260e