Révolutionner la conception de pages web avec Atomic Design

Créer du web dans le web

Le web est un milieu fluide, interactif et interdépendant. Ainsi, l’effort de réalisation d’un site web dépend des fonctionnalités et composantes des pages et non pas de la quantité de pages. La modularité règne sur le web, et c’est d’autant plus le cas que le nombre d’appareils et de résolutions se multiplie.

Puisque le nombre d’appareils et de résolutions est très important, il devient difficile de s’en tenir à des mockups statiques de toutes les pages d’un site web. L’objectif de la méthodologie Atomic Design est de créer un guide de style afin de décrire un design indépendant du contenu qui se trouvera sur les pages.

Le guide de style est conçu afin de présenter sur une même page Web tous les éléments graphiques servant à concevoir une page web. Cela va de l’élément HTML basique (nos atomes) tel que les liens, les boutons, et les titres, jusqu’à des composantes graphiques (nos Molécules et Organismes) formant des entités et des relations entre plusieurs atomes. La mise en contexte avec un contenu final se fait à la conception des templates et pages.

L’exemple de l’application Instagram ci-dessous illustre bien comment les atomes peuvent ensemble créer des molécules qui à leur tour forment des organismes, s’associant eux-mêmes pour former les templates qui pourront recevoir le contenu.

 

Atomic Design par Brad Frost

L’interface d’Instagram décomposée pour comprendre l’Atomic Design – source: http://atomicdesign.bradfrost.com/

 

Le guide de style ressemble à une page listant tous les éléments basiques (atomes) puis les composantes graphiques (molécules et organismes) qui se retrouveront dans tous les templates du site. Le guide de style est disponible à la fois pour nos développeurs et pour nos Clients, ce qui en fait une référence de choix pour tout projet web.

 

De l’abstrait au concret

L’un des plus grands avantages de la conception atomique est la capacité de passer rapidement de l’abstrait au concret en travaillant sur des interfaces décomposées en leurs éléments atomiques. Voici les autres avantages qui pourront vous convaincre :

Guide De Style - Atomic Design

Exemple d’un guide de style Atomic Design produit par Équation Humaine

  • Les guides de style Web favorisent la cohérence à travers une interface utilisateur. Cette dernière profite à la fois aux personnes qui créent ces interfaces et à leurs utilisateurs.
  • Donner des noms aux éléments graphiques réutilisables établit un vocabulaire cohérent et partagé entre toutes les personnes impliquées dans un projet, favorisant la collaboration entre les disciplines et réduisant les pannes de communication.
  • Le guide de style agit comme une bibliothèque de modèles qui communique le langage de conception d’une manière très tangible, ce qui permet de comprendre comment un système sous-jacent détermine l’interface finale.
  • Les développeurs sont forcés de réfléchir à la façon dont leurs décisions affectent le système de conception plus large, favorisant les décisions empathiques.
  • La décomposition de l’interface en éléments unitaires indépendants rend les tâches de test QA beaucoup plus faciles. Le guide de style permet de visualiser les modèles d’interface de façon isolée, ce qui permet aux développeurs de se concentrer sur ce qui provoque des erreurs, des incohérences de navigateur ou des problèmes de performances.
  • Une fois que la bibliothèque de modèles est établie, la conception et le développement ultérieur des templates et l’intégration deviennent beaucoup plus rapides.
  • Le guide de style est évolutif et peut être modifié ou complété à n’importe quelle étape du développement, permettant de modifier automatiquement toutes les pages dans lesquels les composantes modifiées sont utilisées.
  • C’est aussi une base structurelle pour des raffinements futurs. Les leçons tirées de l’analyse, des tests utilisateurs, des tests A / B et de l’expérience peuvent  être incorporées dans le guide de style, ce qui en fait un puissant carrefour des connaissances et des meilleures pratiques pour votre projet.

En mettant le design dans le navigateur aussi rapidement que possible, nous confrontons les parties prenantes aux réalités du média final beaucoup plus tôt dans le processus. Travailler directement les éléments graphiques dans un navigateur web permet aux équipes non seulement de créer des dessins esthétiquement beaux, mais permet de démontrer des considérations de conception exclusivement numérique comme:

  • Le responsive design
  • L’impact du réseau
  • L’interaction avec la souris et les écrans tactiles
  • Les animations
  • L’ergonomie
  • Le rendu des couleurs et du texte
  • La densité de pixels
  • La performance de défilement
  • Les préférences de l’utilisateur

Ces considérations techniques ne pourraient pas être prises en compte dans une maquette statique. De plus, le wireframe présentant les interactions entre les pages et la disposition peut être conceptualisé parallèlement et indépendamment du guide de style, rendant plus courte la durée d’attente avant le premier livrable!

 

Une collaboration avec nos clients

La collaboration et la communication sont clés.

Pour de nouveaux projets, un premier rendez-vous client permet d’effectuer le 20 SECONDS GUT TEST : il s’agit de faire noter rapidement entre 1 et 10 des sites représentatifs de votre industrie par les décisionnaires du projet. Des justifications telles que la typographie, les couleurs, la densité, l’agencement, le style d’illustration seront demandées afin de comprendre vos goûts.

Une seconde rencontre permettra de présenter les Style Tiles : il s’agit d’explorer les couleurs, typographie et l’atmosphère sans se soucier d’un agencement ou peaufinage. Des échantillons seront présentés afin d’aiguiller notre travail de conception du guide de style adapté à l’image de votre compagnie.

Parallèlement à la recherche graphique, un Wireframe desktop et/ou mobile permettra de présenter les interactions et la disposition des éléments de votre site par rapport au contenu que vous souhaitez mettre en avant sur cette plateforme. Ce document permet à nos équipes de concevoir par la suite des composantes graphiques complexes réutilisables autant que possible.

La conception complète du guide de style est une étape fastidieuse pour nos équipes, et nos clients sont impliqués aussi souvent que nécessaire afin de donner leur avis sur les éléments graphiques qui composeront l’interface finale. En contrepartie, l’effort à mettre pour la création de nouveaux templates en cours de projet ou les ajustements seront moindres grâces aux itérations de conception du guide de style et à la documentation associée.

Nous savons que voir des morceaux détachés d’une interface peut être difficile pour la prise de décision de certains de nos clients, c’est pourquoi des contenus intégrés dans des maquettes statiques peuvent être présentés sur demande. Une fois la direction visuelle décidée, ceux-ci permettent de peindre une image complète de ce qu’un morceau d’interface pourrait ressembler, afin de vous impliquer sur des décisions impactant des éléments qui peuvent être modifiés directement dans le guide de style.

 

Auteur

Florent Cima, Développeur Web Front-end, Lead