Pourquoi faire son site e-commerce en atomic design ?

Dans le cadre de mon Master Webdesign au sein de l’ECV Digital, j’ai eu l’occasion de participer à une conférence portant sur une thématique de plus en plus connue dans le monde des designers aujourd’hui : l’atomic design.

Dans cet article, je vous présenterai les avantages d’une telle méthode de travail dans le cadre de la création d’un site e-commerce. C’est un enjeu important pour moi puisque je serai prochainement chargé de m’occuper de la refonte totale du site marchand de l’entreprise dans laquelle je travaille en alternance.

Un site e-commerce est un ensemble de composants à assembler

Un site e-commerce est un ensemble de composants à assembler

Comme beaucoup de sites web actuels, le site e-commerce est relativement facile à identifier grâce à ses différents composants qui lui sont propres. Même si certains d’entre eux arborent des designs et des navigations plus exotiques, le schéma reste souvent le même.

Le travail du designer d’interface est de définir la bonne typographie, les bonnes couleurs, les bons rapports de hiérarchies, les bons composants graphiques et de faire marcher ces éléments ensemble, de leur donner du sens.

L’atomic design, une méthode de co-création prometteuseAudrey HACQ

Il est alors aisé de dessiner les différentes pièces du puzzle nécessaires pour former les différents templates de pages web. On pense par exemple :

  • aux différents menus de navigation
  • à l’en-tête et au pied de page (header et footer)
  • aux différents boutons et CTA (call-to-action) du site
  • aux titres qui se répètent sur plusieurs pages
  • à des styles de paragraphes
  • à des sections de page qui interviennent à différents endroits du site
  • à des éléments de feedback pour l’utilisateur (message d’erreur suite à une mauvaise saisie de l’utilsateur par exemple)

C’est en designant tous ces éléments (atomes) que le graphiste pourra ensuite réaliser des composants (molécules) utiles pour former différents templates de pages du site. L’approche de l’atomic design paraît alors beaucoup plus claire et logique lorsque l’on décompose les pages web de cette manière.

L'atomic design par Audrey Hacq
Représentation graphique de l’atomic design (source : @audreyhacq).

Une meilleure productivité et un gain de temps inévitable

Une meilleure productivité et un gain de temps inévitable

L’objectif principal de cette méthode va évidemment être de gagner du temps et de ne pas revenir sur des modifications à différents niveaux de sa maquette. Imaginons qu’au fil de votre travail, vous (ou une autre personne) preniez la décision de changer la couleur de fond de tous vos boutons présents sur le site. Si ce dernier s’avère posséder plusieurs dizaines de pages déjà réalisées, la modification pourra sembler très longue à faire.

Les derniers outils de design d’interface comme Sketch, Adobe XD et bientôt Invision Studio permettent de réaliser ce que l’on appelle des symboles. N’importe quel élément graphique peut constituer un symbole et ainsi être dessiné sur une planche à part et positionné à différents endroits du site. Il suffira par la suite de modifier les attributs du symbole lui-même pour que toutes les occurrences se modifient instantanément et prennent en compte toutes les modifications. Inutile donc de parcourir les 20 templates différents du site pour changer une-à-une les couleurs de fond de tous nos boutons.

Un travail en équipe facilité

Un travail en équipe facilité

En plus d’avoir à disposition des fonctionnalités performantes, l’intérêt de ces outils est aussi de faciliter l’échange au sein des groupes de travail. Le temps où les graphistes travaillaient seuls dans leur coin est désormais révolu. Les connaissances et l’expérience de chacun sont utiles pour mener à bien un projet et réaliser le meilleur site qu’il soit.

Les éditeurs de logiciels l’ont bien compris et mettent à la disposition des professionnels des outils de plus en plus collaboratifs pour faciliter ces nouvelles méthodes de travail apparues avec le développement d’internet. Il est désormais très facile de partager son travail en ligne et de récupérer l’avis des différents acteurs du projet (designer, développeur, chef de projet, client…).

Pour en revenir au sujet de l’atomic design et de ses avantages, les différentes mises à jour permettent aujourd’hui de proposer des bibliothèques de symboles qui facilitent toujours plus le travail aux graphistes.

L'extension Craft pour Sketch permet de partager ses bibliothèques de symboles
L’extension Craft pour Sketch permet de partager ses bibliothèques de symboles (source : The Next Web).

Un site web évolutif dans le temps

Un site web évolutif dans le temps

Enfin, il y a un véritable gain en ce qui concerne l’évolutivité du projet (le site e-commerce dans notre cas) pour les différentes modifications à venir. Au lieu de devoir tout recommencer de zéro à chaque mise à jour majeure, il est imaginable de revoir les principales « molécules » du site si l’on souhaite les modifier par la suite. Comme évoqué précédemment, le système de symboles permettra de gagner beaucoup de temps et l’équipe de travail toute entière sera ainsi plus flexible et mieux capable d’anticiper les changements à venir. Le fonctionnement par atomes permettra de garder une vraie cohérence et de ne pas copier les éléments graphiques dans les différentes maquettes du site.

Pour conclure, l’atomic design est réellement une technique de travail dans l’ère du temps et des technologies actuelles permettant de gagner en productivité, en efficacité tout en garantissant une évolutivité accrue pour la suite du projet. Applicable pour les sites e-commerce mais aussi pour n’importe quel projet web, je pense qu’il est temps que l’on s’attarde tous à ce sujet et que l’on reconsidère nos méthodes de travail pour optimiser notre workflow.

Un grand merci à Audrey HACQ (n’hésitez pas à lire son article dont je me suis inspiré) et à Jules MAHÉ d’avoir pris de leur temps pour venir nous rencontrer à l’ECV Digital Paris.

Image de couverture : Atomic designBrad FROST

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *