Atomic design and (3 reasons) why we need to use it


1. Living styleguide document

When you develop your website using Atomic Design principles from the beginning, all the elements you make are part of your styleguide document. It’s always the best to start a new project with Atomic design, even though if you start enhancement using Atomic Design it won’t be difficult to  extrapolate the basic elements and put them together to construct components.

2. Layouts can be understood easily

Because Atomic Design using a bottom to top approach it is typically easier to read and understand styleguide and elements as opposed to explaining elements after design is done. It comes handy specially after release of the project and specifically in maintenance where changes to an element might possibly effect other elements. And that’s because Atomic design creates a very strong documentation around design which makes it easier to trace an element and review the code base.

3. Consistent design code base

By defining atoms to create the site layout, it is very easy to find out what element is being used where in the website. It is an efficient way to reduce redundancies in the code base. For example, in one of my projects where we couldn’t use Atomic design, for changing a button’s colour or size, I needed to look into the design and find a button to change the color. Issue with this is that toward the end of the project, it gets harder and harder to find elements.

Ramin Ahmadi
I am a full-stack front end developer with over 5 years experience in web design and development. I have worked with a wide variety of environments and languages including Angular, TypeScript, NodeJS, Restful API, Microservices, Atomic design, JQuery, Material design, Progressive Web Apps, DevOps, and many Azure tools. I make it a goal to automate myself out of routine tasks in my daily work. My motto is, ‘write human readable code, lean and clean’.

Comments 1

Cancel reply

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

  1. Thanks for this great article.

    I’m a fan of atomic design too and my team and I did a big redesign project using atomic design.

Atomic design and (3 reasons) why we need to use it

log in

Captcha!

reset password

Back to
log in
Choose A Format
Trivia quiz
Series of questions with right and wrong answers that intends to check knowledge
Poll
Voting to make decisions or determine opinions
List
The Classic Internet Listicles
Image
Photo or GIF
Gif
GIF format