👴 Attention Cet article a quelques années et n’est peut-être plus à jour !

J’ai trouvé cet excellent article écrit par Brad Fost qui explique les concepts de l’atomic web design, en voici un petit résumé.

L’Atomic Design est une méthodologie de conception de systèmes. L’idée est que chaque système est décomposable en plusieurs niveaux pouvant être imbriqués les uns avec les autres. On commencera la conception d’un design par le plus petit niveau.

  1. Niveau « Atome »

Il s’agit de l’élément le plus basique d’une page HTML. Ce peut être par exemple un bouton ou un label.

  1. Niveau « Molécule »

Il s’agit d’un regroupement d’atomes: l’exemple donné dans l’article est un fieldset de recherche (input pour la zone de texte avec un label et un bouton). Il s’agit de la plus petite unité fonctionnelle d’un site Internet.

  1. Niveau « Organisme »

Il s’agit d’un regroupement de molécules: autrement dit, on regroupe plusieurs fonctionnalités ensemble pour former une section de l’interface finale. Ce peut être par exemple l’en-tête d’une page.

  1. Niveau « Template »

Le design du site Internet commence à prendre forme à ce niveau. Ce niveau regroupe plusieurs organismes et donnent ainsi un contexte en regroupant ces éléments, qui sont abstraits lorsqu’ils sont considérés séparement.

  1. Niveau « Page »

Cela représente le rendu final donné au client. Instance spécifique d’un template, il contiendra le contenu , les images propre à un certain projet.

Quel est l’intérêt ?

L’intérêt de cette approche méthodologique est de contrôler plus efficacement la conception d’un design en développant des éléments ré-utilisables. La création de molécules favorise la ré-utilisation d’éléments dans différents designs.

Sources

http://coding.smashingmagazine.com/2013/08/02/other-interface-atomic-design-sass/