L'atomic Design

Les avantages de l’Atomic Design et comment appliquer la méthode

Depuis la publication du livre de Brad Frost, le designer à l’initiative de cette méthode, la notion d’atomic design a pris de l’ampleur dans le milieu du design web.

Cette notion n’est pas si récente, mais pourtant elle s’inscrit comme une nouvelle approche de conception d’interface. L’atomic design est pratiqué depuis des années par de nombreuses équipes de conception, et cela résulte souvent d’un gain de temps aussi bien dans la conception graphique que le développement. En partant du même principe que le Modular design, Brad Frost s’est approprié le concept pour imager l’atomic design tel qu’on le connaît aujourd’hui. L’idée est de créer une harmonie avec des composants complémentaires pour facilement s’intégrer dans n’importe quel environnement. Cela vient du fait qu’aujourd’hui les utilisateurs disposent d’une multitude de supports différents pouvant accueillir la même interface. Ainsi la conception par « page » telle qu’on la faisant auparavant pour les livres, magazines, ou encore affiches, n’est plus valable par rapport au contexte actuel.

Aujourd’hui, il est inutile de préciser qu’un site doit être « adapté au mobile ». Cette notion symbolise le fait d’adapter le cadre initialement prévu pour un écran d’ordinateur à la taille d’un écran mobile. Si nous faisons l’analogie avec la peinture, c’est comme si on demandait à un peintre de réaliser la même peinture mais avec deux toiles de tailles différentes. L’artiste va peindre en fonction de la surface dont il dispose. Ainsi il va contraindre sa créativité et sa minutie en fonction de l’espace qui lui est alloué. En imposant un format, cela peut avoir un impact sur la réalisation finale. Ce principe est d’autant plus probant pour les interfaces. De plus nous savons que la taille des interfaces ont une relation avec la proximité de l’utilisateur. Entre un écran géant tactile et une montre connectée, les interactions seront différentes, ainsi on ne peut pas simplement rétrécir une interface de plusieurs milliers de pixels comme on pourrait le faire avec une image.

Comment fonctionne l’atomic design ?

Cette méthode tient son nom du même principe que la composition de la matière. Les atomes forment des molécules qui forment des organismes. Et bien il suffit de transposer ce modèle pour la conception d’une interface et vous avez compris les grandes lignes de la méthode.

atoom
Source: blog.ippon.fr

L’atome

C’est l’élément irréductible d’une interface. Il n’a aucune utilité lorsqu’il est isolé et pourtant il compose la base de tous les éléments d’une interface.

La molécule

Elle est représenté par un ensemble d’atomes regroupés de manière à pouvoir facilement s’adapter à tous types de tailles d’écran. En d’autres termes, il faut penser cette molécule comme étant un composant d’interface responsive. Il faut ainsi apporter des règles de gestion pour déterminer leur affichage en fonction des supports.

L’organisme

La combinaison de plusieurs molécules avec pour objectif de former un ensemble cohérent et fonctionnel. En outre, on obtient ce que l’on a l’habitude d’appeler un pattern d’une interface.

Le template

C’est l’organisation des composants moléculaires dans l’espace accordé par l’écran. C’est ainsi que l’on peut structurer les organismes de façon à donner un sens à votre interface.

La page

C’est la finalité de la composition visant à rendre harmonieux l’ensemble des éléments graphiques. Une manière de visualiser l’interface finale avec du vrai contenu.

Cette succession d’étapes n’est évidemment pas linéaire ni rédhibitoire. On peut facilement retourner à l’étape d’atome ou de molécule lors de la mise en place de certains templates ou pages.

Il faut bien assimiler la différence avec le fonctionnement dit « traditionnel », c’est-à-dire la conception d’une interface dans son ensemble pour ensuite en décortiquer les éléments redondants (clés). Aujourd’hui on va commencer par les éléments clés pour ensuite définir l’intégralité de l’interface. Ainsi c’est la solution la plus logique pour éviter de rentrer dans une monotonie des designs d’interface qui font que les sites actuels se ressemblent tous.

Hier on faisait le design écran par écran pour ensuite en déduire ce qu’on appelle le GUI (graphical user interface)

Aujourd’hui on commence par les éléments principaux de l’interface pour ensuite les assembler en fonction des besoins de chaque page

Quels avantages à utiliser cette méthode ?

L’atomic design apporte une vision différente de la composition d’une page et de son design. Le fait d’avoir un aperçu décomposé des pages permet d’avoir un certain recul sur la conception d’un site web. On pourrait corréler l’atomic design à la charte graphique d’un site web. Ce qui insinue que la composition d’une interface en atomic design comprend toujours deux livrables distincts mais complémentaires. Un document écrit doit complémenter les éléments de design afin de permettre une lecture efficiente des composants en atomic design. Le style guide est poussé à son paroxysme grâce à l’atomic design.

Avec le plugin Craft, vous avez la possibilité de partager une librairie d’atomes et d’en sortir facilement les caractéristiques CSS.

On peut alors facilement imaginer les avantages que cela apporte aux développeurs. Grâce à ce fichier réunissant tous les éléments nécessaires pour concevoir toutes les pages du site. En possession de cette galerie de composants graphiques, les développeurs pourront faire de même et s’assurer d’avoir accès facilement à la modification d’un élément présent à plusieurs endroits. Plus besoin de passer à la loupe chaque page pour s’assurer de ne pas oublier un élément. On évite également les surprises trop fréquentes d’isométrie entre les maquettes graphiques une fois le site développé.

L’atomic design offre également une flexibilité sur la conception d’un site, et ceci à plusieurs niveaux. Tout d’abord lors du prototyping des interfaces, lorsqu’on designe par éléments dissociés, on peut plus facilement se concentrer sur l’essentiel. C’est-à-dire la structure et la logique d’une page. Ensuite on gagne du temps en concevant par atomes puis molécules car cela évite de s’attarder sur chaque page à vouloir être pixel perfect. Imaginez un puzzle où on vous donne les pièces une à une plutôt que toutes à la fois. On va préférer les avoir toutes d’un coup pour les trier et les organiser afin de comprendre le dessin global grâce aux couleurs puis en cherchant les angles, etc. Ici, l’atomic design permet d’avoir toutes les pièces du site en main avant de commencer à réfléchir au coeur de la conception.

Un dernier avantage mais pas des moindres, c’est que l’atomic design vient s’ancrer dans l’ère du multi-écrans, multi-supports. C’est-à-dire qu’un seul fichier en atomic design permet de concevoir aussi bien une interface pour une télévision que pour un smartphone. Grâce à la flexibilité et la modularité qu’apportent les atomes, on peut réaliser une même interface sur différents supports tout en gardant une harmonie et une ergonomie adaptée. Même principe pour la densité de contenus qu’une interface peut contenir. Les composants peuvent facilement s’entasser, se dupliquer ou se modifier grâce à des règles de gestion spécifiques.

Comment concevoir en atomic design ?


Pour commencer, il faut suivre cette logique d’empilement, donc en commençant par concevoir les atomes pour arriver aux molécules et finir avec des pages. Ainsi l’état de molécule est celui qui laisse le plus de place à l’identité graphique. Les formes, les couleurs, les styles graphiques sont décidés dès le début pour s’accorder avec l’identité de la marque. Cela représente une base commune pour l’ensemble des atomes qui vont être constitués. Cette base se veut forte et identitaire car c’est ce qui différenciera un produit de la concurrence.

Les molécules sont indivisibles et inéchangeables en revanche les atomes doivent être flexibles et modulables. Les molécules forment ce qu’on appelle aujourd’hui couramment des « patterns » avec toutes les caractéristiques dont ils disposent. C’est une erreur de penser qu’un pattern doit être rigide et statique, au contraire il doit pouvoir bénéficier de caractéristiques changeantes.

Il faut concevoir les composants de manière dynamique sans perdre l’idée qu’ils puissent s’adapter à un contenant (smartphone, montre, tablette, etc.) et aussi un contenu différent. Il est donc conseillé d’écrire les spécificités d’un pattern en même temps que la conception de son design.

Il arrive que par exemple la structure d’un bouton change en fonction de l’espace qui lui est alloué. Dans ce cas il faut concevoir les déclinaisons en donnant leur caractéristiques d’affichage.

Un seul bouton peut avoir plusieurs états différents.

Une fois la matière première conçue, on peut passer à la structure des éléments. Cependant, il reste indispensable de prédéfinir en amont les fonctionnalités présentes sur l’interface. Ainsi il faut commencer par référencer toutes les différentes fonctionnalités du site qui vont se traduire par une interface. Il en va de même pour son compère indissociable, le contenu. Il faut aussi le définir avant de concevoir la structure et les patterns du site. Par exemple, si votre site affiche une liste de contacts (contenu) et permet de contacter une personne (fonctionnalité), il faut s’assurer d’avoir la liste des informations dont vous disposez pour votre contact et aussi connaître le parcours utilisateur de la fonctionnalité de contact.

Il faut procéder ainsi pour toutes les fonctionnalités clés afin d’affiner le système et s’assurer d’avoir tous les composants indispensables. Cela a une importance cruciale dans le schéma de l’atomic design, car cela permet aux designers de se concentrer uniquement à l’ergonomie et l’expérience utilisateur des parcours cibles sans être perturbés par des éléments de design émotionnel, marketing, etc.

Dans ce sens, il y a ce GIF de Audrey Hacq qui explique très bien la différence entre la conception d’une page et d’un système qui reflète un parcours utilisateur :

On ne conçoit pas un écran de connexion mais un pattern qui permet à l’utilisateur de se connecter.

Une chose importante à prendre en compte dans la conception en atomic design, c’est la nécessité de faire évoluer le système, de le rendre partageable et flexible. Sans quoi l’atomic design n’a aucun intérêt s’il devient une forme de cahier des charges que l’on impose en début de conception. Au contraire, les atomes se nourrissent des évolutions que subit l’interface. Les parcours utilisateurs et l’ergonomie doivent continuellement influencer le design des patterns. Tandis que les atomes assurent l’harmonie globale des écrans.

Tout est lié ! Les atomes sont au coeur des multitudes d’écrans, ainsi il devient très facile de modifier un élément précis ou un ensemble. L’objectif est de faire vivre nos interfaces en fonction du contexte, des tendances et des besoins utilisateurs sans devoir faire une refonte intégrale à chaque fois.

Il existe également cet outil Pattern Lab, qui permet de créer son propre système atomic design optimisé pour le développement.

Une méthode qui a ses limites

Comme toutes les méthodes de design, il faut savoir se l’approprier et l’adapter au contexte dans lequel on l’applique. Ainsi il s’avère que l’atomic design peut difficilement devenir une méthode courante dans les grosses structures. Quand on sait que la majorité des multinationales souhaitent uniformiser leurs produits/applications pour provoquer une expérience utilisateur similaire en fonction des différents points de contact. Donc ces entreprises possédant plusieurs équipes de design/développement appliquent généralement la même méthode de conception et de management pour faire en sorte que leurs produits apparaissent comme venant d’une seule et même équipe. Il est donc difficile pour eux de proposer aux équipes une méthode qui va miser d’abord sur la liberté créative pour ensuite essayer d’uniformiser les patterns. Il y aurait trop de divergences parmi les différentes propositions des équipes de design, ce qui aurait pour effet d’empêcher cet objectif de normaliser les produits de la marque et le process de conception.

2 J'aimes

En lisant ton post, je pense à ce terme qui est très en vogue en ce moment : Design System. Ca désigne un ensemble d’outils nécessaires et évolutifs pour fabriquer des produits interactifs (web principalement) pour les devs et les designers. On peut y retrouver la charte graphique comme les librairies de composants (qui découle de la méthode Atomic Design) mais également une ligne éditoriale pour l’écriture ou des méthodes de travail en équipe. Si cela t’intéresse, voici quelques liens qui parlent de ce terme :

1 J'aime