WE CREATE BRANDS PEOPLE Lโ™ฅVE
Share

What is Atomic Design


Tegra - June 6, 2020 - 0 comments

What is Atomic Design

What is Atomic Design ๐Ÿฆ 

Courtesy ofย @bymarkgerkules
โ €
Atomic Design is basically a design system strategy that separates the whole process when designing design systems simply to make the whole process easier and in a more organized way.
โ €
The process is separated into 5 steps:
โ €
๐Ÿ”ต Atoms
๐Ÿ”ต Molecules
๐Ÿ”ต Organisms
๐Ÿ”ต Templates
๐Ÿ”ต Pages
โ €
Hope this post will help you better understand the atomic design strategy and hopefully will make your design process easier ๐Ÿค˜

Introduction  Atomic Design is a strategy of designing design systems developed by Brad Frost and can help you building your design systems easily and in more organized way hope this post will help you understand the atomic strategy better and hopefully it will help you in your next design project!

Introduction

Atomic Design is a strategy of designing design systems developed by Brad Frost and can help you build your design systems easily and in a more organized way hope this post will help you understand the atomic strategy better and hopefully, it will help you in your next design project!

Atoms  Atoms is the first step in the atomic design strategy, atoms are mostly when you designing the buttons, headlines, paragraphs of your design system.

Atoms

Atoms is the first step in the atomic design strategy, atoms are mostly when you designing the buttons, headlines, paragraphs of your design system.

Molecule  Molecule is the second step of the atomic design strategy, molecule is basically a group of different components such as a headline and a button merged together.

Molecule

Molecule is the second step of the atomic design strategy, a molecule is basically a group of different components such as a headline and a button merged together.

Organism  Organism is the third step of the atomic design strategy, and this is a group of same molecules together, such as pricing cards, people profiles, posts, and more.

Organism

Organism is the third step of the atomic design strategy, and this is a group of the same molecules together, such as pricing cards, people profiles, posts, and more.

Template  Template is the forth step of the atomic design strategy, and as the name already tells us, this is all the elements we talked about (buttons, headlines, cards) merged together to make the screen looking complete.

Template

Template is the fourth step of the atomic design strategy, and as the name already tells us, this is all the elements we talked about (buttons, headlines, cards) merged together to make the screen looking complete.

Pages  Pages is the final step of the atomic design strategy, and in this step you basically take what you already did before with the template step and organise it differently in each page according to the project.

Pages

Pages are the final step of the atomic design strategy, and in this step, you basically take what you already did before with the template step and organize it differently on each page according to the project.

Get 50+ Marketing Tools we use in Tegra ๐Ÿค˜

Follow the link ๐Ÿ‘‰ tegra.co/tools to get a list of ๐Ÿ“๐ŸŽ+ ๐Ÿ๐ซ๐ž๐ž (๐จ๐ซ ๐œ๐ก๐ž๐š๐ฉ) ๐ ๐ซ๐จ๐ฐ๐ญ๐ก ๐ฆ๐š๐ซ๐ค๐ž๐ญ๐ข๐ง๐  ๐ญ๐จ๐จ๐ฅ๐ฌ that we and other growth agencies use to scale businesses like yours + growth hacking insights.

Related posts

Post a Comment

Your email address will not be published. Required fields are marked *