WE CREATE BRANDS PEOPLE L♥VE
Share

Atomic Design (Explained) in 8 Slides


Tegra - May 19, 2020 - 0 comments

Atomic Design (Explained) in 8 Slides 
Atomic design framework helps us to build more consistent ui, and at the end, design systems. Why is it so popular & powerful?

Atomic Design (Explained) in 8 Slides 💥

Courtesy of @tomkoszyk

Atomic Design Framework by Brad Frost is one of the most popular and essential concepts in UI Design.

It’s also a backbone of a good Design System (another hot word!).

What makes it so powerful? 🔥

How does it work?

Learn more from this post! 😉

What it is Atomic Design  A methodolocy that involves breaking down UI into its basic components. Which are then reused throughout the site. 
Atoms

What it is

Atomic Design

A methodolocy that involves breaking down UI into its basic components. Which are then reused throughout the site.

How it works  Atomic Design in Practice  In Atomic Design approach, we're building UI from the ground up. Starting with the smallest elements, up to final pages designs. This ensures consistency across the design.

How it works

Atomic Design in Practice

In Atomic Design approach, we’re building UI from the ground up. Starting with the smallest elements, up to final pages designs. This ensures consistency across the design.

Elements  Atoms  The most basic, yet functional (HTML) elements such as input fields, buttons, text labels. Things that can't be broken down any further.

Elements

Atoms

The most basic, yet functional (HTML) elements such as input fields, buttons, text labels. Things that can’t be broken down any further.

Elements  Molecules  Molecules are more complex. Those things are built from several single Atoms. They form simple UI elements groups.

Elements

Molecules

Molecules are more complex. Those things are built from several single Atoms. They form simple UI elements groups.

Elements  Organisms  Organisms are more deliberate beings which form more distinct UI sections, like a full input form. They are constructed out of several molecules & atoms.

Elements

Organisms

Organisms are more deliberate beings which form more distinct UI sections, like a full input form. They are constructed out of several molecules & atoms.

Elements  Templates  Templates are page-level structures. Blueprints, which are later filled with the content. It's crucial to remember that they serve as structures!

Elements

Templates

Templates are page-level structures. Blueprints, which are later filled with the content. It’s crucial to remember that they serve as structures!

Elements  Pages  A final stage in Atomic Design framework. Those are templates filled with actual content, final UI pieces in our design.

Elements

Pages

A final stage in Atomic Design framework. Those are templates filled with actual content, final UI pieces in our design.

How it works  Tokens*  Tokens were introduced in extended Atomic Design. Tokens are subatomic particles in Atomic Design. The are thought as a way to store design variables.

How it works

Tokens*

Tokens were introduced in extended Atomic Design. Tokens are subatomic particles in Atomic Design. The are thought as a way to store design variables.

Bonus — 4 tools that may be useful in your designer way:

Funnelytics — an incredible tool that helps you build the best marketing funnel mapping.
Flowkit — allows designers to create frighteningly fast user flows within Sketch and Figma.
Crello — the simplest online image editor. A simple but powerful tool to create awesome designs for any social media format — posts, covers, graphics, and posters using the best software on the web. It’s easy! A lot of animated designs.
Webflow — all-in-one web design tool that allows users to design, build, and launch responsive websites visually.

Be free to send us any feedback by reply or reach us in DM on Instagram
Do you want to receive insights using FB Messenger or Telegram or Email? 👈 Subscribe now.

Related posts

Leave a Reply