What is Atomic web design?

Question

Superficially I found very interesting this approach, but before going deeper I would like to know exactly what it is about, too, if it is possible to use it in short scale projects, or even in a company that does not have a dedicated team?

Answer 1

Like recently Brad Frost, the father of Atomic Design, made a "revision" of the concept after 6 years, I decided to leave a reply with a few points. Briefly were included Design Tokens (typography, colors, spacing and even voice tone).

For those who are not familiar with Atomic Design here are some illustrations to help you understand in a practical way. Note that in this image below the Design Tokens had not yet been contemplated, there are no details of the icon library, color palette or typographical choices.

---

Now the answer

Now more focused on the question. First, Atomic Design (AD), is not a rigid rule, an immutable concept and cast. He doesn’t need to follow such hard steps, and just like Scrum or Design Sprint he can be adapted to the reality of his company and his team.

Here you can see how Canadapost has its particular way of using AC that diverges somewhat from the original concept... This is just one example, in your company vcs should find the one that best fits the culture of project development. https://www.canadapost.ca/cpc/en/designsystem/mercury/principles/atomic-design.page

Consider that almost all Design System as Bootstrap, Materialize, Bluma, Tailwind, Faundation, etc., practically all, in a certain way are within the Atomic concept, because they have defined typography, color palette, icons, grid, buttons, dropdowns, navbar, templates. etc..

As a designer, I will approach a pro and a con of not having a dedicated person. I will not go into the UX merit of this answer to not get too long, it is assumed that the user has already been searched etc. ok.

And what is the main advantage of using these Design System? Yes time saving, and ease for those who do not master the design and CSS. The same problem happens when you need to break the rules of the system! Ai a more expert professional will be missed. As you can see below.

Pro: Basically the pro is cost, because you will not have to spend with a dedicated professional and that in some cases can get a little idle within the team.

The rest is all against rss...

Against:

• Inconsistency in design, there may be color variations, typography, etc.
• No one to make design adjustments to adapt components to new realities.
• No one to create a new component that did not exist before in the Design System.
• Absence of person in charge of library maintenance and documentation.

Those are just a few dots that make all the difference. A Design System will help a lot for a reduced Squad, but in the long run a professional will make you miss when things start to scale too much, it’s easy to lose control of a design system, especially when the team and big and everyone makes a style there or here.

In short: Atomic Design is a concept that will help you build a Design System, which will help your team develop a more consistent design in a faster and more organized way. Remembering that a designer will make life a lot easier for the team, especially if he is multi-disciplinary with knowledge of UX > UI > Front-end

You see, it’s easier and faster to assemble something complex by following a manual that is the same for everyone and that everyone can easily consult, or each one goes riding the way he wants as he thinks best. Which of the two ways is more likely to fail? Regardless of the size of the team, who has the best chance of failing, who has a "manual" or who does not have a "manual"??