A écouter tous les vendredi sur :
- Ausha
- Deezer
- Spotify
- Youtube
- l'application Podcast Addict
et plein d'autres plateformes !
-
Bonjour à toutes et à tous ! Bienvenue dans ce nouvel épisode de Culture Design, il est temps de casser des chaises !
Le sujet du jour sera l'Atomic Design ! Mais qu'est-ce que c'est ?
C'est une méthode de co-création basée sur la construction modulaire. C'est-à-dire que la construction est déterminée par des composants. Ces composants sur base la notion de module, à prendre dans le sens d'unité de mesure qui permet de régler les diverses parties d'un ensemble.
L'Atomic Design s'inspire donc du Modular Design. Le terme de modularité en design est apparu dans les années 60. Christopher Alexander, anthropologue et architecte, avec Herbert Simon, économiste et sociologue qui a reçu un prix Nobel en économie, tous deux ont établi une théorie qui permettait de concevoir le produit final à partir de sous-systèmes indépendants.
Autrefois, il était possible de faire une analogie entre le web et les livres. La comparaison a perdu son sens avec la multitude de tailles d’écrans, que ce soit un ordinateur, une tablette, ou un smartphone. Les designers ont du ainsi revoir leur méthode de conception. L’Atomic design est une métaphore biologique pour rendre accessible cette méthode de conception. C'est ainsi que le webdesigner Brad Frost dans son ouvrage Designing System démocratise la notion d'Atomic Design. Cette méthode se base sur la conception d'interface web à partir de composants plus simples : atomes, molécules, organismes, template et pages.
Les atomes d’interface ou éléments de base, comme un logo, une couleur, un style typographique, un bloc image, une icône, un champ de saisie…etc. C’est un élément qui, seul, n’a pas de but fonctionnel. Il ne peut réduit, ne peut pas être divisé et il compose la base de tout élément graphique de l’interface. Son rôle en tant qu'atome est d'exprimer l'identité de l'entreprise.
Les molécules correspondent à des groupes d’atomes formant une unité, ce sera le formulaire de recherche comprenant label, champ texte et bouton. Ce sont des collections d’atomes qui forment des composants d’interface simples. Les molécules doivent être pensées « responsive ». Il faut définir si elles sont fixes ou fluides, et sur quelles tailles de dispositif elles apparaitront, ou pas. Cela peut être un label + un champ de saisie + un picto loupe et l'ensemble forme le champ de recherche.
Les organismes désignent les éléments d’interface complexe et résultent surtout de groupes de molécules et/ou d’atomes qui forment une partie de l’interface finale. Concrètement, il pourra s’agir d’une liste de produits. Ex : champ de recherche + navigation + logo = le header.
Les templates montrent la structure générale du contenu, son squelette, la page finale sans les textes, images, etc. Ils peuvent être dépourvus de contenus réels. Leur présence permet de vérifier l’organisation et la hiérarchie des divers organismes créés et de tester leurs comportements "responsive”.
Et enfin, le dernier élément, les pages. Les pages contiennent le contenu réel et abouti, c’est la « chair » placée sur le squelette. Ce sont des templates qui ont évolués vers ce que sera l’écran dans sa version finale. Les vrais contenus sont ajoutés comme les textes, les images, les couleurs, les pictogrammes, les organismes et les molécules finalisées. Le but de l’Atomic est de pouvoir créer des systèmes ; les composants sont tous spécifiés graphiquement, les pages non.
Pour finir, l'ensemble des composants (atomes et molécules) doit être rapidement intégrés dans un Styleguide.
De ce fait, le terme « Atomic design » peut faire référence :
Aux méthodes de création d’un Design System
À une bibliothèque de composants (pattern library) aussi appelée Atomic design Library
Dans tous les cas, il s’agit de proposer un cadre pour construire un écosystème évolutif. Ces éléments d'interface se doivent de pouvoir évoluer, comme s'ils étaient vivants à l'instar des atomes et autres éléments chimiques.
Le but de la méthode Atomic Design est de permettre aux designers et développeurs de concevoir des interfaces utilisateurs cohérentes, mieux adaptées aux besoins et aux usages actuels et permet au client de voir les étapes de la conception.
Les principes de l’Atomic design peuvent être résumés ainsi :
méthode simple pour homogénéiser l’apparence d'interface
Adopter une vision holistique de la création d’un Design System
Passer de l’abstrait au concret en assemblant plutôt qu’en déconstruisant
Développer un état d'esprit « Design System first » pour prévoir l’impact futur des ajouts de fonctionnalités et des itérations
Comment mettre en œuvre la méthode Atomic Design ?
Il n'existe pas de règles et de listes à suivre absolument. L'important est d'avoir un langage commun avec l'équipe. Si les termes d'atomes et de molécules ne vous parlent pas, libre à vous de trouver un autre champ lexical !
En revanche, pour utiliser la méthode avec efficacité, certaines bases doivent être respectées:
Trouver un langage visuel unique, c'est-à-dire l’identité de la marque afin de donner le ton générale
Lister en premier les fonctionnalités importantes et less parcours cibles
Anticiper comment les composants et modèles seront ensuite déclinés
Penser composant responsive
Travailler en co-création avec l’équipe
Quels sont les avantages de la méthode Atomic Design ?
Tout d'abord, un gain de temps certain et aussi, la capacité d'être plus agile grâce à la prise en compte d’avance de tous les écrans. On utilise la méthode Test & Learn pour expérimenter rapidement des prototypes et permet de passer de manière fluide du design et au développement du produit.
Ensuite, l'Atomic Design permet de garder une cohérence globale sur les éléments d’interface, l’expérience visuelle et ergonomique vécue par l'utilisateur grâce au Style Guide.
L'Atomic Design permet d'améliorer la communication entre designer et développeurs grâce à une logique de conception de l’interface et un langage commun.
Sources