Qu’est-ce que l’Atomic Design et qu’est-ce que cela implique ?

Introduction à l'Atomic Design

Avec le nombre croissant d'interfaces qui sont créées : Oculus Rift, montres connectées et bien d'autres, la façon de concevoir nos interfaces évolue. Nous devons prendre en compte un large panel de tailles d’écrans et de résolutions. Nous avons donc commencé à regarder de près une nouvelle méthode de design digital : l'Atomic Design !

Qu'est-ce que l'Atomic Design ?

L'Atomic Design, c'est une manière de concevoir les interfaces selon laquelle tous les éléments de l'écran sont découpés en atomes. On peut donc réutiliser ces éléments sur n'importe quelle interface. L'UX/UI designer gagne ainsi du temps, de la souplesse et de la cohérence dans la conception de son projet. Brad frost, le fondateur de cette méthodologie, explique qu'aujourd'hui le design par page n'a plus sa place. Tout simplement car encore une fois les interfaces que nous utilisons sont variées: ordinateurs, tablettes, mobiles, réalités augmentées etc. Les éléments que nous utilisons doivent pouvoir se déployer en conservant une même cohérence visuelle. Aussi bien dans des environnements petits comme une montre connectée, que dans des contextes immenses comme la réalité augmentée.

Concrètement, quand on parle d'Atomic Design on parle de quoi ?

• On commence par l'atome : c'est la base de l'identité de marque. Il est directement sorti de la charte graphique comme une couleur ou une typographie. Il est rarement utilisé seul car sa fonction c'est d'être assemblé à un élément plus grand.
• Ensuite vient la molécule : c'est un groupe d'atomes qui constitue la base du style graphique tel qu'un bouton. Il est constitué d'une typographie ou pictogramme, d'une forme et d'une couleur.
• Ces molécules vont créer des organismes, comme par exemple un Header (entête) : navigation + champ de recherches + logo
• Les templates vont enfin permettre d'organiser et de hiérarchiser les informations pour créer une mise en page, et avoir une vision concrète du résultat final. Les templates (modèles) sont dépourvus de contenu réel, mais cela permet juste de tester le comportement en responsive design.
• Enfin, les pages c'est la version finalisée de ce que sera notre interface finale. Ici, on intègre le vrai contenu visuel et textuel.

Le but de l'Atomic Design, c'est de ne pas avoir à réaliser toutes les pages d'un site internet. Au contraire, c'est pouvoir créer un système de composants qui permettra d'habiller tout le design du projet.

Quels sont les avantages de l'Atomic Design ?

Une vision globale et une cohérence graphique

Le fait de créer des molécules permet de constituer un guide de styles graphiques qui constituera très rapidement l'identité visuelle d'un projet : couleurs, typos, illustrations etc. De plus, penser à tous les atomes et molécules avant de concevoir la page permet d'avoir une vision d'ensemble sur le projet. On évite alors les incohérences graphiques tels que deux boutons différents ayant les mêmes actions. L'avantage est aussi dans les retours. Une modification d'un seul atome se répercute de fait sur tous les composants du site. Ce qui permet d'éviter les oublis. L'Atomic Design permet d'être plus flexible sur la mise en page des différents blocs. Ainsi, on peut moduler ces blocs en fonction des contraintes clients rencontrées en cours de projet. C'est à dire que si le client souhaite inverser un bloc avec un autre, car cela lui parait plus pertinant, cela ne posera pas de problème et en plus la cohérence graphique graphique restera intacte. Enfin, cela rend possible la mise en place d'un langage commun au sein de l'entreprise et de faciliter la communication entre les différents pôles de l'agence.

Du temps gagné bien utilisé

Et oui, car avec l'Atomic Design on gagne du temps et ce dernier peut-être réutilisé pour approfondir certains points plutôt que de travailler sur des tâches sans aucune valeur ajoutée. Comme répéter 20 fois le même composant sur 10 pages différentes par exemple. Ainsi, ce temps libéré permet de se concentrer sur d'autres éléments avec plus de valeur ajoutée pour l'utilisateur final comme :

• Pousser un concept créatif
• Trouver le bon parcours utilisateurs
• Développer des solutions innovantes
• Créer un flow (émotions) chez l'utilisateur lors de la navigation : par exemple lorsque l'on va acheter un billet d'avion, si l’expérience utilisateur est fluide, on développe alors un sentiment qui va sans doute être de la joie de plus en plus prononcée au fur et à mesure des étapes. Chaque site nous fait ressentir quelque chose.
• Réfléchir aux comportements animés de ces atomes/molécules
• etc.

Mais qu'est-ce que cela implique exactement ?

Changer notre processus de présentation

Lors des projets nous continuons à proposer au client une home page (page d'accueil), en plus d'une planche d'éléments, ce qui permet la projection du client dans son futur site web. Cette planche regroupe tous les éléments qui composent le site. En travaillant en Atomic Design, on évite la déclinaison de 6 pages avec 5 fois les mêmes éléments à l’intérieur, et surtout on s'assure d'une identité forte et singulière pour le projet quel que soit son support.

Une mise en place de nouveaux outils

Chez Concept Image on a opté pour le logiciel XD de la suite Adobe. Ce logiciel nous permet de créer l'UX design de nos projets, à travers des prototypes/zonings, ainsi que l'UI design par la suite. Il a aussi l'avantage de pouvoir créer des maquettes interactives, ce qui est très utile lors des présentations au client par exemple. Les nouvelles mises à jour permettent aussi l’amélioration de l'interaction des maquettes pour projeter plus facilement le client dans l'ergonomie et le design. Cet outil permet aussi de travailler de manière collaborative au sein de l'agence et à l’extérieur de l'agence. Le travail collaboratif est un principe de base de l'Atomic design. Les développeurs peuvent récupérer directement le guide de style via le logiciel ce qui permet de garder un repère tout au long du projet.