👮 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/