Notre blog

Atomic Design : une méthode de co-création efficace !

DND Banner VS - Atomic Design

Les Designers UX/UI ont souvent été confrontés aux questionnements “Pourquoi le bouton est arrondi sur cette page et carré sur l’autre ?”, “Pourquoi le texte de la home page est en 35 pixels, 37 sur l’édito et 42 sur la page contact ?”. Uniformiser un site E-Commerce peut être complexe. En effet, on a l’habitude de travailler page par page au risque de perdre l’identité de la marque et la cohérence entre chaque. L’Atomic Design intervient dans cette optique afin de favoriser la cohérence sur toute l’interface, gagner du temps et permettre d’offrir un langage commun.

Alors pourquoi utiliser l’Atomic Design et un Design System ? L’Agence Dn’D et ses experts en Design vous apportent tous les éléments de réponse !

Atomic Design

Principes et définition

Une marque ne reste jamais statique, elle évolue constamment et réagit à son environnement. Si vous avez de nombreux produits et de nombreuses pages sur votre site E-Commerce, les changements prendront plus de temps et les coûts augmenteront parallèlement. Il sera alors beaucoup plus facile de faire des erreurs et de s’éloigner de la cohérence de la marque. Il existe une méthode, l’Atomic Design qui vous accompagne dans la pérennité et la flexibilité de votre entreprise.

L’Atomic Design est une méthode de conception modulaire créée en 2013. Son créateur, le Webdesigner Brad Frost souligne « On ne conçoit pas des pages mais des systèmes de composants ». Et effectivement, on ne conçoit plus des pages mais des interfaces qui doivent aujourd’hui s’adapter à différentes tailles d’écran et de résolutions. Le digital a beaucoup évolué et il est essentiel dorénavant que les designers pensent en termes de système de composants et repensent leur méthode et outils.

L’Atomic Design a pour objectif d’optimiser la création de Design Systems et permet de construire des interfaces cohérentes et homogènes avec un coût réduit. Cette méthode permet de structurer et d’agencer tous les éléments d’une interface afin qu’elle soit optimisée, attractive et fonctionnelle. On part du plus petit composant pour aller vers le plus grand et finir par former une unique page.

Cette méthode peut être appliquée à tous les projets et supports digitaux, que ce soit pour un site E-Commerce ou une App’ mobile.

Les 5 éléments de l’Atomic Design

DND - Atomic Design 1

1. Les atomes

Les atomes sont les plus petits éléments du système de composants qui constituent l’Atomic Design. Ce sont les éléments de base. Il s’agit des blocs de textes, des éléments de formulaires, des couleurs ou encore des boutons. Chaque atome a ses propres caractéristiques et propriétés.

Une utilisation seule de chaque élément a peu d’intérêt mais assemblés ils forment des molécules et composent toutes les interfaces. Les atomes mettent notamment en valeur l’image de marque.

DND - Atomic Design 2

2. Les organismes

Les organismes sont des combinaisons de molécules. Ils forment par exemple sur l’interface le header ou une liste de produits. Les organismes rendent le site plus attrayant et facilitent la navigation.

DND - Atomic Design 3

3. Les templates

Les templates sont formés par les organismes et représentent des modèles de pages. Les templates structurent le contenu et non le contenu de la page. Les templates déterminent l’aperçu du rendu visuel.

DND - Atomic Design 4

4. Les pages

Les pages forment l’interface globale du site E-Commerce avec du contenu réel.

 

Crédit images : blogdummi.fr

Atomic Design 5

Les différents éléments qui composent l’Atomic Design

 

Les avantages de cette méthode

Cette méthode permet d’avoir de la visibilité sur tout ce qui a été créé en amont. En termes organisationnel, c’est une très bonne chose pour les designers et les nouveaux arrivants dans l’entreprise. Sa conception innovante permet de gagner du temps et de maintenir la cohérence de la marque. Les avantages de cette solution sont nombreux :

  • Facilite les tests,
  • Favorise la cohérence sur toute l’interface,
  • Fournit un guide de styles,
  • Permet d’avoir un langage commun,
  • Définit un système de composants,
  • Offre une flexibilité sur la conception,
  • Permet de concevoir toutes les interfaces de différents devices avec un même document.

 
L’Atomic Design permet donc un assemblage beaucoup plus efficace, rapide et une meilleure interaction entre les composants.

Le Design System

Les designers et les développeurs peuvent rencontrer des problématiques lorsqu’ils collaborent sur une interface E-Commerce. En effet, lorsqu’il y a de nombreux interlocuteurs qui travaillent sur plusieurs plateformes ou sur le même outil, il est difficile d’être aligné et de garder une cohérence graphique. Le Design System intervient dans cette démarche.

Le Design System est un référentiel, un guide UX/UI commun partagé avec les designers et les développeurs front-end qui reprend à la fois la charte graphique et la charte ergonomique. Ce guide permet de créer toutes interfaces digitales que ce soit les sites E-Commerce ou les applications. Les différentes équipes peuvent se servir des composants prêt-à-l’emploi afin de garantir une cohérence graphique et une expérience optimale sur toutes les pages du site E-Commerce. Les Designers et développeurs auront accès à une librairie qui facilitera la coordination et le travail en équipe.

Chaque entreprise peut définir son Design System mais généralement on retrouve les éléments suivants :

  • Composant UI,
  • Patterns,
  • Couleurs,
  • Typographies,
  • Images.

 
Pour quels projets ? Par exemple, une entreprise qui a plusieurs applications et un site E-Commerce et qui souhaite uniformiser l’ensemble pour avoir la même identité visuelle et de marque.

DND - Atomic Design 6

Les avantages du Design System

Les avantages sont nombreux :

  • Gain de temps sur la conception et le développement,
  • Améliore l’expérience utilisateur,
  • Fluidifie la communication entre les équipes,
  • Renforce l’image de la marque,
  • Permet d’avoir une cohérence graphique.

 
Le Design System c’est la mise en pratique de l’Atomic Design. Le Design System emploie l’Atomic Design pour standardiser les différents éléments de conception.

Conclusion

Vous vous posez sûrement la question suivante : qu’en est-il de la créativité ? Ces outils ne brident pas la créativité, ils sont mis à la disposition du designer pour gagner en rapidité et efficacité. Il n’est pas obligé de s’en servir et peut faire du from scratch.

Vous souhaitez intégrer des éléments UX/UI Design à votre projet E-Commerce ?

Contactez-nous, nos équipes expertes seront ravies de vous accompagner !



Laisser un commentaire

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