but systems of components that adapt to many different media. You want to know more ? It’s all in this article! The Web has just celebrated its 30th anniversary. It is an honorable age, which should be celebrated, but which is starting to generate some inconvenience. Some basic concepts that Malaysia Phone Number List almost born with the Web have become … obsolete. In terms of UX, this is for example the case with the “page” as it was conceived until now. It is derived from paper content, hence its name, but no longer adapts to today’s uses. Main problem: the proliferation of terminals , with screens of sometimes radically different sizes and types.


Consider that you can display the same site on a smartphone, or even a connected watch, as on an 88-inch TV screen. How to cure it ? A new concept was born recently, theorized by Brad Frost: Atomic Design . It aims to revolutionize the design of sites and interfaces, and by extension the way of approaching and carrying out this type of project. Why and how? Here are some explanations … Atomic Design: divide to rule better The name Atomic Design can be confusing. It refers to a size hierarchy , such as one can imagine in atomic physics: atom, molecule, then cells or organisms, all allowing in the end to design templates and pages . atomic-design The Atomic Design appeared in 2013 on the blog of Brad Frost , its designer.

Design Method Designed By Brad Frost

It was in 2016, after the publication of his book, that the concept of Atomic Design was adopted by many designers and project managers. The idea is to reduce a site to its smaller components , which can then be assembled to form larger modules. These modules can themselves be joined to form the backbone of a page and then of a site, which is displayed more correctly on all types of screens. It can be noted that the basic principle of Atomic Design is not in itself revolutionary, since it was already found more or less in the backbone of many sites created from CMS (Content Management System). The main CMS , such as WordPress or Drupal , also offer modules that you can duplicate and adapt on different pages.

But the structure that encapsulates these modules is rigid enough to sometimes pose display problems on small or very large terminals … The concept of Atomic Design is also similar to that of Modular Web Design, which appeared a few years earlier. The concept of Atomic Design is closely linked to UX model We have covered user experience or UX several times in previous articles . The Atomic Design contributes to the development of a relevant and optimized UX. It makes it possible to launch a project by taking into account from the outset, at the draft stage, the future ergonomics of the site (s), and to maintain great continuity until the model or the final realization .

Atomic Design Is A New Modular

The Atomic Design is therefore to focus first on what makes up a user interface and then to its final report. Coupling the logics of Atomic Design with UX patterns thus guarantees the absence of cognitive dissonance (when an Internet user could encounter an identical component but not producing the same action or vice versa). Brad Frost gives in his book some tips for setting up a relevant Atomic Design System . Specifically : Devote the necessary time and budget , Communicate with users to modify the system as soon as necessary, Simplify as much as possible the updating of UI patterns, applications, etc., Create guide styles that can be understood by as many people as possible, not just for developers, Promote the Atomic Design System and its evolutions,

Name the patterns so that they are reusable in different contexts. A series of advantages that can be valuable This new concept of Atomic Design should make it possible to bring multiple advantages, at all stages of your projects. Here are a few : Creation of specifications facilitated: the basic elements (atoms, molecules …) constitute a kind of pre-existing graphic charter, Quick preparation of templates : they are designed from the modules themselves preconceived, Easier coding : the lines of code are more readable, Sustainability and continuity of projects: you reuse existing elements, Adaptation to all screens, Possibility to work more easily on a project in collaborative mode .

Leave a Reply

Your email address will not be published.