Le web design atomique

article web design atomique

En fonction de l’évolution de l’art du web-design nous sentons un besoin croissant d’élaborer un développement de système plutôt que de créer un simple ensemble de pages Web.

Dernièrement je me suis posé plus de questions sur les composantes de nos interfaces et comment nous pouvons les concevoir de manière plus systématique.

Étant à la recherche d’inspiration je revenais souvent à la chimie.

Tous les éléments (que ce soit les solides, les liquides, les gaz…)  sont composés d’atomes. Les atomes sont reliés entre eux et forment des molécules, qui à leur tour se combinent entre eux et forment des organismes. Finalement tous les éléments de l’univers sont formés de cette manière.

Analogiquement, les interfaces sont composées de plus petites composantes. Cela veut dire que nous pouvons décomposer les interfaces en blocs fondamentaux et les combiner progressivement en élevant le degré de difficulté. C’est l’essence même du web design.

Qu’est ce que c’est la conception atomique ?

Le design atomique est une méthodologie de création de systèmes de conception. Dans la conception atomique il y a cinq niveaux distincts:

  1. Les atomes
  2. Les molécules
  3. Les organismes
  4. Les modèles
  5. Les pages

Les atomes –  sont les principaux blocs de construction de la matière.  Dans le contexte de l’interface web les atomes sont des balises HTML tels que les formulaires, les champs d’entrée et les boutons.

Les molécules – sont l’ensemble des atomes liés entre eux. Ils ont des paramètres propres et jouent le rôle de squelette de notre système de design.

Par exemple: la zone de saisie de l’étiquette et le bouton ne sont pas si utile en soi, mais peuvent être très utile si vous les connectez.

Les organismes – Les molécules nous donnent des blocs de construction pour le travail. Maintenant, nous pouvons les relier pour former des organismes. Les organismes – sont une combinaison de molécules qui forment différentes sections complexes de l’interface.

Les modèles – À ce stade nous arrêtons l’analogie avec la chimie pour parler avec nos clients dans un langage plus compréhensible. Les modèles sont composés de groupes d’organismes  liés ensemble et formant une page.

Les pages– sont les exemplaires concrets des modèles.  Les Pages – sont le plus haut niveau de spécificité et, elles représentent le niveau le plus tangible. En travail sur elles, la plupart du temps est consacré à la majorité des personnes impliquées dans le processus, et cela est  indique dans la plupart des commentaires.

La pagination est une étape nécessaire, car c’est là qu’est vérifiée l’efficacité de la conception du système. En plaçant tout  dans son contexte, nous pouvons faire un pas en arrière et changer nos molécules, les organismes et les modèles pour mieux s’adapter au contexte réel de la conception.

Pourquoi le design atomique ?

Dans plusieurs sens c’est de cette manière que nous concevions nos sites même si nous n’en avions pas conscience. Le design atomique nous offre la possibilité de passer de l’abstrait au concret. Par conséquent, nous pouvons créer un système évolutif avec un  style unique, constant, et en même temps, montrant une image globale finale. Le processus  de déstructuration se transforme en un processus d’assemblage – nous créons une structure depuis le début, au lieu de choisir un modèle approprié après.

Articles similaires