Une introduction à la conception atomique pour les concepteurs Web

Les atomes ne sont pas simplement des éléments HTML, mais aussi leurs styles d'appartenance: polices, couleurs, dimensions et autres règles de style CSS. Avec les propres mots de Brad, les atomes “démontrez tous vos styles de base en un coup d'œil”.

Atomes - Exemple

Voici un exemple de notre site Web. Les titres des postes recommandés peuvent représenter un type d'atome; ils utilisent le même code HTML et CSS et peut être facile à distinguer du reste du contenu.

Notez que Hongkiat.com n’a pas été conçu avec une conception atomique, il est uniquement utilisé ici à des fins de démonstration.

L’essence de la conception atomique est de concevoir l'interface utilisateur de bas en haut en utilisant ces cinq étapes, ne pas identifier les composants de la conception atomique par la suite.

2. Molécules

UNE molécule est formé par un groupe d'atomes. Les molécules constituent la prochaine étape de la hiérarchie de la conception atomique. Pensez à des éléments d'interface utilisateur plus simples qui sont déjà composé de plusieurs éléments HTML, comme un formulaire de recherche ou une publication recommandée dans la barre latérale.

Être organisé en une molécule donne un but à chaque atome. Dans un groupe plus grand (molécule), les atomes doivent soutenir et compléter mutuellement, ils doivent bien travailler ensemble afin de créer un design utilisable.

Par exemple, le titre (un atome) doit être obtenir plus d'emphase (polices plus grandes, plus de poids, etc.) que le nom de l'auteur (un autre atome) dans le bloc de publication recommandé. De cette façon, les deux atomes sont “signifiait” à travailler comme une équipe pour obtenir le meilleur résultat.

Molécules - Exemple

En utilisant notre exemple précédent, vous pouvez voir que dans l'encadré de Hongkiat, un bloc de messages recommandés pourrait être considéré comme une molécule. Une molécule post recommandée est construit de trois atomes: une vignette, un titre et un atome de nom d'auteur.

Organismes

Les organismes sont composés d'un groupe de molécules, atomes (et parfois autres organismes). Dans la conception Web, les organismes sont composants d'interface utilisateur plus complexes qui représentent sections définitives de la page, comme un en-tête, un pied de page ou une barre latérale.

Les organismes peuvent être constitués de différents types de molécules, par exemple, une barre latérale peut consister en une barre de recherche et différents types de widgets, ou de la même molécule répété plusieurs fois, par exemple une poignée de blocs postaux liés les uns sous les autres. Et, cela peut être la combinaison de ces deux.

Organismes - Exemple

Sur le site Web de Hongkiat, l'encadré pourrait être un organisme. Il est composé d'un barre de recherche (un type de molécule, affiché une seule fois) et plusieurs postes recommandés (un autre type de molécule, affiché plusieurs fois).

Cependant, l’organisme de la barre latérale peut aussi être vu comme la composition d’un molécule (la barre de recherche) et un autre organisme (le widget de publication recommandée avec plusieurs publications recommandées). La conception atomique est un modèle flexible, les règles ne sont pas très strictes, donc dans ce cas, nous pouvons définir le même bloc de construction à la fois comme une molécule et un organisme.

4. Modèles

La prochaine étape dans la hiérarchie de conception atomique sont des modèles. Comme vous pouvez le constater, c’est à ce moment que la conception atomique cesse d'utiliser l'analogie de la chimie. Brad s'abstient de la terminologie à ce stade car il pense que c'est moins compréhensible pour les clients et les autres parties prenantes, et ce sont essentiellement les deux dernières étapes (modèles et pages) que les concepteurs doivent vendre.

Modèles sont constitués d'organismes. Elles sont objets au niveau de la page mais sans le contenu final. Le but des modèles est de représenter la structure du contenu sous-jacent.

Les modèles affichent comment différents atomes, molécules, organismes “fonctionner ensemble dans le contexte d'une mise en page”. Ils représentent essentiellement le squelette d'une page.

Modèles - Exemple

Pour un exemple, pensez à un modèle de page d'accueil avec images de marque de réservation et blocs de texte lorem ipsum.

Vous trouverez ci-dessous un exemple tiré du livre Atomic Design. C'est le modèle de page d'accueil du magazine TimeInc. Les atomes, les molécules et les organismes sont tous à leur place, mais seulement avec contenu schématique.

5. Pages

Des pages représente la dernière étape de la hiérarchie de la conception atomique. Les pages sont les “instances spécifiques de modèles”. Au stade de la page, les modèles sont rempli de contenu réel (copie, microcopie, images, vidéos, etc.), tels qu’ils apparaîtront dans la vraie interface utilisateur.

Les pages permettent aux concepteurs de voir comment expérience utilisateur final ressemblera à tester le design avec de vrais utilisateurs, et à mesurer sa performance en termes de convivialité, de conversion, d'accessibilité et d'autres mesures.

Variations de pages et de modèles

L’autre objectif de l’étape de la page est de faire variations de modèle possible. Nous parlons de variations de modèles lorsque le sous-jacent le modèle est le même mais le peuplement le contenu est (légèrement) différent. Par exemple, si vous souhaitez afficher un contenu différent pour différents groupes d'utilisateurs (par exemple, pour les visiteurs par opposition aux utilisateurs connectés), ou lorsqu'un titre est beaucoup plus long que les autres.

L'utilisation de variantes de modèles est cruciale si nous voulons créer cohérent et résistant Les interfaces des utilisateurs. Les plus petits composants (atomes, molécules, organismes) doivent fonctionnent bien dans différents scénarios.

Par exemple, un bouton doit avoir l'air cliquable avec quels que soient les éléments environnants. Si cela ne semble pas possible dans une certaine variante, vous devez redéfinir l’atome du bouton jusqu’à ce que s'adapte à tous les cas d'utilisation.

Pages - Exemple

Ci-dessous, vous pouvez voir l'étape de la page du modèle de page d'accueil TimeInc précédent. Ça a l'air différent, hein? C'est juste une variante de modèle, bien que. Pour avoir une interface utilisateur efficace, l'équipe de conception doit réfléchir sérieusement à ce qui peut changer dans le site réel. Ensuite, ils doivent également tester la conception de cette variante de modèle (page)..