Où ? Agence web, PME et Start-up
Quand ? En génération
Comment ? Avec Figma (où tout autre logiciel de prototypage qui utilise les composants)
Qui ? UX Architect
Pourquoi ? Travaillez en cohésion avec l’équipe des développeurs
Commençons notre aventure en définissant ce qu’est une page internet.
Avant de plonger dans l’Atomic Design, il est important de comprendre ce qu’est une page web. En réalité, lorsqu’on évoque une interface web, on emploie des phrases telles que « Il s’agit d’une landing page » ou « Je me trouve sur la page principale”. L’idée de la page existe depuis des millénaires. Les premiers supports d’écriture étaient des tablettes d’argile, apparues il y a environ 4000 ans. Par la suite, nous avons vu l’évolution des rouleaux, des parchemins, des papyrus, des livres, pour enfin arriver aux pixels. La notion de page fait partie intégrante du vocabulaire du Web depuis ses débuts.
Lorsque l’on vous demande de créer un site web avec environ 30 pages, cela peut sembler intimidant et compliqué. Cependant, en général, les pages sont composées de trois éléments principaux (vidéos, textes et images) et de deux mises en page différentes. La difficulté se trouve essentiellement au niveau des fonctionnalités et des composants contenus dans ces pages, plutôt que sa quantité en elles-mêmes. C’est ainsi que Brad Frost a voulu créer une méthodologie autour de la modularité. À travers son livre blanc, il explique que les pages ne sont pas uniformes, isolée et quantifiable. Elles sont fluides, interactives et interdépendantes.
Cette approche n’est pas récente. La modularité existe depuis très longtemps. Par exemple, autrefois, les voitures étaient fabriquées de manière individuelle, alors qu’aujourd’hui, elles sont produites par composants et assemblées à la fin du processus.
Si la modularité existe depuis si longtemps, pourquoi en parle-t-on maintenant ?
Actuellement, notre domaine est confronté à une multitude d’appareils, de tailles d’écrans et d’environnements différents.
Cette tendance ne va pas s’atténuer dans le futur. De plus, la modularité est depuis longtemps un concept essentiel dans le domaine de l’informatique. Les développeurs ont déjà mis en place des systèmes d’organisation plus adaptés en utilisant des langages orientés objet et en créant des frameworks. L’objectif est de pouvoir développer plus rapidement et d’être plus flexible sur le responsive.
Pour simplifier le travail des développeurs et accélérer le processus entre les équipes, il était essentiel pour les designers de s’adapter et de trouver le modèle idéal.
Avant d’entrer dans le modèle d’Atomic Design, il est essentiel de prendre en compte les modèles utilisés par les designers.
Plus une équipe projet s’élargit, plus il devient fréquent de rencontrer des problèmes de communication. Il arrive souvent que plusieurs domaines utilisent des noms différents pour les mêmes éléments, et que des experts inventent leurs propres dénominations. Pour qu’une véritable collaboration se produise, il est essentiel que les équipes parlent un langage commun. Les guides de style sont là pour aider à établir ce vocabulaire partagé. En les plaçant au cœur de votre processus, les concepteurs et les développeurs sont contraints de prendre en compte l’impact de leurs décisions sur la globalité du projet.
Toutefois, les modèles conçus par des designers ont souvent pour principal objectif de définir l’aspect esthétique. Ce travail en haute-fidélité peut demander beaucoup de temps et d’efforts, surtout si cela ne correspond pas aux attentes des clients. Bien qu’ils soient parfaits pour explorer l’atmosphère du design, ils restent un peu abstraits. Il est primordial d’évoluer rapidement vers une approche plus concrète. Effectivement, il y a beaucoup de travail initial à faire avant l’orientation esthétique du projet.
- UX Designers peuvent créer des zonings pour établir une architecture d’informations de base et certains modèles d’interface utilisateur anticipés.
- UI Designers peuvent recueillir les valeurs esthétiques des équipes en effectuant un exercice de test instinctif, puis créer des moodboards pour explorer les orientations de conception initiales.
- Développeurs peuvent configurer des dépendances de projet, supprimer des modèles de base et écrire un balisage structurel pour les modèles que l’équipe prévoit d’utiliser dans le projet.
L’Atomic Design : pourquoi adopter cette approche ?
Il est bien connu que réaliser une refonte totale de votre site internet tous les trois à huit ans n’a jamais été une solution optimale. C’est pourquoi il est recommandé de mettre en place une boîte à outils de conception qui évolue au fil du temps et peut accélérer les processus de développement. Attention, Il ne s’agit pas seulement d’utiliser cette boîte, il s’agit de créer votre propre design système.
Maintenant que nous avons saisi que l’Atomic design, créé par Brad Frost en 2013, vise à assurer la cohérence et la cohésion entre les équipes d’UX/UI designers et de développeurs, plongeons dans les détails et examinons comment il fonctionne.
l’Atomic Design : comment Fonctionne cette méthode révolutionnaire de conception ?
L’Atomic Design est une méthodologie de conception qui tire son inspiration des principes de la chimie. Elle commence par la création des éléments les plus simples d’une interface web, pour ensuite les combiner afin de construire des pages et des composants plus complexes.
Vous pourriez vous demander pourquoi ne pas simplement utiliser les termes « base », « composants » et « modules ». En effet, ces termes pourraient être employés. Cependant, le souci avec ces mots est qu’ils ne véhiculent pas de sens de hiérarchie claire et ne sont pas suffisamment explicites pour toutes les équipes impliquées.
Les atomes, les molécules et les organismes impliquent une hiérarchie que toute personne ayant une connaissance de base en chimie peut comprendre.
Les Atomes
Dans les interfaces : les atomes de nos interfaces servent d’éléments de base qui composent toutes nos interfaces utilisateur. Ces atomes incluent les étiquettes de formulaire, les entrées, les boutons et les autres qui ne peuvent plus être décomposés.
Les Molécules
Dans les interfaces : les molécules sont des groupes relativement simples d’éléments d’interface utilisateur fonctionnant ensemble comme une unité . Par exemple, une étiquette de formulaire, une entrée de recherche et un bouton peuvent être réunis pour créer une molécule de formulaire de recherche.
Les Organismes
Dans les interfaces : Les organismes sont des composants d’interface utilisateur relativement complexes composés de groupes de molécules et/ou d’atomes et/ou d’autres organismes . Ces organismes forment des sections distinctes d’une interface.
Les Modèles
Les modèles : C’est là que nous faisons une distinction claire entre la structure et le contenu. Les modèles sont des objets au niveau de la page qui placent les composants dans une mise en page et articulent la structure du contenu. Ce modèle de page d’accueil affiche tous les composants de page nécessaires fonctionnant ensemble, ce qui fournit un contexte à ces molécules et organismes.
Les Pages
Page : Les pages sont des instances spécifiques de modèles qui montrent à quoi ressemble une interface utilisateur avec un véritable contenu représentatif en place. En nous basant sur notre exemple précédent, nous pouvons prendre le modèle de page d’accueil et y insérer du texte, des images et des médias représentatifs pour montrer le contenu réel en action. L’étape de la page est l’étape la plus concrète de la conception atomique.
Les pages fournissent également un espace pour articuler les variations des modèles, ce qui est crucial pour établir des systèmes de conception robustes et fiables. Voici quelques exemples de variantes de modèles :
- Un utilisateur a un article dans son panier et un autre utilisateur a dix articles dans son panier.
- Le tableau de bord d’une application Web affiche généralement l’activité récente, mais cette section est supprimée pour les nouveaux utilisateurs.
- Un titre d’article peut contenir 40 caractères, tandis qu’un autre titre d’article peut contenir 340 caractères.
- Les utilisateurs disposant de privilèges administratifs peuvent voir des boutons et des options supplémentaires sur leur tableau de bord par rapport aux utilisateurs qui ne sont pas administrateurs.
Conclusion : Les avantages de l’atomic design
Il est vrai que concevoir un design système et créer une bibliothèque de modèles personnalisés demande au départ beaucoup de temps, de réflexion et d’efforts. Mais une fois la bibliothèque de modèles établie, la conception et le développement ultérieurs deviennent beaucoup plus rapides. Ce qu’il y a de bien avec les designs systèmes, c’est qu’ils peuvent et doivent être modifiés, étendus et affinés pour les années à venir.
D’autre part, l’Atomic design a tellement d’avantage qu’on a décidé d’appliquer cette approche dans la recherche utilisateur (en exploration) et c’est comme cela qu’est née l’Atomic research. N’hésitez pas à lire notre article sur cette méthode de recherche utilisateur.
Voici les différents avantages de l’Atomic design
- La possibilité de passer rapidement de l’abstrait au concret.
- Le design atomique nous permet de danser entre les contextes
- Séparation nette entre la structure et le contenu
- Ils favorisent la cohérence et la cohésion
- Ils accélèrent le flux de travail de votre équipe
- Ils établissent un flux de travail plus collaboratif
- Ils établissent un vocabulaire partagé
- Ils fournissent une documentation utile
- Ils facilitent les tests multinavigateurs/appareils
- Ils servent de base tournée vers l’avenir
Si vous voulez lire l’intégralité du livre blanc de l’atomic design :
- https://atomicdesign.bradfrost.com/table-of-contents/