fbpx
  • L’atelier
  • Expertises
    • Création de sites Web et applications métier
    • Boutique e-commerce sur-mesure
    • Création d’application mobile sur mesure
    • Direction de projets et agilité
    • UX et UI design
    • Contenus optimisés, référencement naturel
  • Réalisations
  • Blog
  • Contact
Menu
  • L’atelier
  • Expertises
    • Création de sites Web et applications métier
    • Boutique e-commerce sur-mesure
    • Création d’application mobile sur mesure
    • Direction de projets et agilité
    • UX et UI design
    • Contenus optimisés, référencement naturel
  • Réalisations
  • Blog
  • Contact
Un projet ? >>

UX Design : un design system moléculaire avec Atomic Design

Atomic design : chimie plutôt qu’alchimie

Nous avons tendance à l’oublier mais le web s’appuie sur un imaginaire ancien, tiré du « monde réel », celui de la page. C’est la page qui structure l’usage aussi bien que la fabrication des outils numériques. Or il apparait que cette unité structurelle n’est plus toujours adaptée pour penser la complexité de nos environnements digitaux. C’est en tout cas le constat fait par le célèbre webdesigner Brad Frost. Il propose de repenser notre approche du web en empruntant à la chimie sa pensée atomique. En décomposant le web en différents composants de petite taille, qui se combinent pour former des ensembles plus grands, on peut repenser la logique fondamentale des interfaces digitales et notre approche de l’expérience utilisateur. L’atomic design démarre donc par l’atome, dont l’assemblage donne naissance aux molécules, qui elles-mêmes se combinent pour donner naissance à des organismes. Au niveau supérieur on trouve les templates qui débouchent sur des pages spécifiques.

À l’étage « microscopique », celui de l’atome, on retrouve des tags HTML, des boutons, des palettes de couleurs. Les molécules en combinant par exemple un bouton et une certaine couleur, peuvent déboucher sur une action spécifique, pour créer un champ de recherche par exemple. Le menu de navigation, espace où se mêlent différentes molécules, correspond à un type particulier d’organisme. L’échelle du template est généralement celle où l’on voit apparaitre le résultat de ce travail de design qui cherche à combiner de manière optimale une multitude d’atomes, de molécules et d’organismes.  Et c’est enfin dans la page que s’incarne une version spécifique du contenu et des interactions propres au dispositif conçu. Comme pour un jeu de Lego, ou un puzzle, on part de la plus petite brique pour aboutir à la construction la plus complexe.

 

Les avantages d’un design system modulaire

Comme le rappelle Brad Frost, ces éléments ne sont pas en eux-mêmes révolutionnaires. Cette approche est déjà présente dans beaucoup de projets digitaux. Mais le principe de l’Atomic Design est de systématiser une philosophie du « design system » qui permet de gagner en efficacité au moment du passage de l’abstrait de la conception, au concret de la création d’un site web, d’une application mobile ou d’un logiciel. Nous pouvons identifier plusieurs avantages :

  • Le découpage en éléments bien identifiés -blocs, fonctionnalités, zones d’interaction, contenus, etc.- permet de gagner du temps en évitant par exemple de designer à l’avance toutes les pages. En découpant le tout de l’interface en une multitude de composants on gagne en souplesse et en fluidité pour répondre à de nouveaux besoins et garantir une expérience utilisateur de qualité.
  • C’est aussi un moyen de rapprocher la phase de création et la phase de développement : l’identification de ces composants facilite l’émergence d’un « langage commun » entre créatifs et équipes techniques.
  • C’est enfin un moyen d’assurer la cohérence de l’expérience et de l’identité visuelle lors du déploiement de nombreux dispositifs pour une marque ou une institution, en intégrant cette démarche dans un Design System.

 

L’Atomic design par sa logique modulaire inverse le processus de création généralement utilisé. Plutôt que de partir d’une unité « macro », la page, on réfléchit d’abord aux unités « micro » et à la combinaison la plus efficace. Le niveau d’utilisation de cette méthode dépendra évidemment du type de projet, du contenu et des utilisateurs. L’Atomic design a aussi ses limites : pour les plus grosses structures, laisser trop de liberté créative au niveau du composant risquerait de menacer l’uniformité de l’expérience produit qu’elle recherche. Comme souvent il faut savoir s’adapter et choisir la méthode la plus pertinente.

 

Si vous avez un projet visant à établir un système de webdesign cohérent et modulaire, n’hésitez pas à nous contacter.

Partager
Facebook
Twitter
LinkedIn
Vous avez un projet ?

Articles à découvrir

Agence Web WordPress

Lire l'article >>

Définition de besoin ou cahier des charges ?

Lire l'article >>

Agence digitale mobile : création d’applications sur mesure

Lire l'article >>

Réalisations récentes

Un site Web participatif pour la Fondation FNEGE

DÉCOUVRIR CETTE RÉALISATION »
Studio rénové par LCI

Refonte du site WordPress Les Compagnons des Investisseurs

DÉCOUVRIR CETTE RÉALISATION »
illustration plateforme QCM MERMOZ

Plateforme e-learning sur mesure (QCM)

DÉCOUVRIR CETTE RÉALISATION »
Vous avez une idée en tête ?

Nous allons la réaliser ensemble.

Parlez-nous de votre projet >>

Travailler avec l’agence digitale Les Artisans Numériques, c’est s’entourer d’experts à votre écoute et créatifs, et réaliser vos projets digitaux les plus ambitieux.

Facebook-f Twitter Linkedin-in

Adresse

15 rue Daubenton – 75005 PARIS – France
contact@artnum.com

© 2021 Les Artisans Numériques. Tous droits réservés.

  • Mentions légales
  • CGV
  • Données personnelles
  • Cookies
Gérer le consentement aux cookies
Nous utilisons des cookies pour optimiser notre site web.
Fonctionnel Toujours activé
Le stockage ou l’accès technique est strictement nécessaire dans la finalité d’intérêt légitime de permettre l’utilisation d’un service spécifique explicitement demandé par l’abonné ou l’utilisateur, ou dans le seul but d’effectuer la transmission d’une communication sur un réseau de communications électroniques.
Préférences
Le stockage ou l’accès technique est nécessaire dans la finalité d’intérêt légitime de stocker des préférences qui ne sont pas demandées par l’abonné ou l’utilisateur.
Statistiques
Le stockage ou l’accès technique qui est utilisé exclusivement à des fins statistiques. Le stockage ou l’accès technique qui est utilisé exclusivement dans des finalités statistiques anonymes. En l’absence d’une assignation à comparaître, d’une conformité volontaire de la part de votre fournisseur d’accès à internet ou d’enregistrements supplémentaires provenant d’une tierce partie, les informations stockées ou extraites à cette seule fin ne peuvent généralement pas être utilisées pour vous identifier.
Marketing
Le stockage ou l’accès technique est nécessaire pour créer des profils d’utilisateurs afin d’envoyer des publicités, ou pour suivre l’utilisateur sur un site web ou sur plusieurs sites web ayant des finalités marketing similaires.
Gérer les options Gérer les services Gérer les fournisseurs En savoir plus sur ces finalités
Préférences
{title} {title} {title}