PC, smartphone, tablette et même montre connectée : les supports sur lesquels vos clients ou prospects consultent votre site web n'en finissent pas de se multiplier. Un constat qui contraint les webdesigners d'aujourd'hui à redéfinir leur façon de concevoir les interfaces pour conserver une expérience utilisateur à la hauteur. Et c'est là que l'atomic design entre en scène.
Mais avant de rentrer dans le vif du sujet, revenons rapidement sur l'objectif premier de cette démarche : offrir au visiteur de votre site web une expérience utilisateur de qualité, quel que soit le device par lequel il est entré. Et pour y parvenir, vous allez faire appel à deux supers héros du web : l'UX et l'UI designer.
Il est bien loin le temps où l'on différenciait les deux disciplines de cette façon :
Et pour cause, c'est prendre un vilain raccourci et passer sous silence toute la complexité de ces deux métiers, certes complémentaires et pourtant bien distincts.
En résumé, appliqué au webdesign, retenez ceci :
En conclusion, les deux disciplines ne peuvent exister l'une sans l'autre et sont toutes deux indispensables pour créer une expérience utilisateur optimale. Si vous voulez aller plus loin dans la définition, prenez 4 minutes pour visionner cette vidéo :
Et l'atomic design dans tout ça ? On vous explique…
L'atomic design a vu le jour grâce à Brad Frost. Ce webdesigner, speaker, écrivain, musicien et artiste (rien que ça) a bouleversé l'univers du design modulaire. Son concept : ne plus construire les pages d'un site web mais plutôt des systèmes de composants évolutifs, des chartes graphiques digitales en somme.
Plus concrètement cette méthode de conception modulaire scinde l'interface en 5 éléments distincts :
Cette méthodologie permet de construire, pas à pas, son site Internet tout en prenant le recul suffisant pour créer des éléments évolutifs sur le long terme.
Il existe 3 avantages majeurs d'une conception en atomic design.
L'atomic design permet de créer des éléments de manière décomposée. En prenant du recul dès le début de la conception de ces éléments, cette méthodologie propose d'homogénéiser les interfaces afin de conserver une cohérence globale pour les utilisateurs.
Bien mis en œuvre, le concept développé par Brad Frost représente un réel avantage en matière de productivité. Grâce à lui, designers et développeurs travaillent en parfaite collaboration, favorisant ainsi le travail d'équipe et les effets de synergie. L'atomic design évite également de devoir développer tous les éléments pour chaque écran. Il offre, en outre, la possibilité de réaliser des tests en environnement réel afin d'expérimenter rapidement chaque prototype.
La bibliothèque d'éléments ainsi construite devient flexible et s'adapte facilement aux besoins des designers, développeurs et des utilisateurs au fil du temps. La liberté de langage que permet l'atomic design est également un atout de taille qui s'intègre naturellement dans le projet.
La mise en place d'une méthodologie atomic design ne s'improvise pas. Voici quelques conseils à mettre en pratique avant de vous lancer dans la démarche :
En bref, l'atomic design apporte une réelle valeur ajoutée à la mise en œuvre d'une expérience utilisateur optimisée. Pour faciliter la réussite de votre projet, intégrez ce nouveau concept dès la création de votre site web. Cela dit, il est également possible de s'appuyer sur l'atomic design dans le cadre de la refonte d'un site web déjà existant. Alors, prêt à entrer dans le design system ?