L’Atomic Design, la méthode pour un projet digital sans mauvais rêves

méthode de l'atomic design et du guide de style
Vous êtes annonceur, startuper, chef de projet en agence ? Vous travaillez dans un pôle digital ? Alors vous savez qu’un projet de design d’interfaces n’est pas de tout repos… Chez Mille & une UI, nous avons décidé de travailler avec la méthode de l’Atomic Design pour faciliter vos processus de création.

Lors d’un projet digital traditionnel, on a l’habitude de réaliser la direction artistique par pages : l’accueil, la page éditoriale… Sous Photoshop, les webdesigners conçoivent au fur et à mesure tous les éléments : boutons, titres, listes… A la fin, pour aider les développeurs et afin de formaliser l’identité graphique du produit, les designers réalisent un guide de style regroupant les règles graphiques des interfaces. 

Et là, c’est le drame. Lorsqu’il est mené par différents interlocuteurs, décliné sur différents formats d’écrans, et même optimisé en V1, V2, V18…. un projet digital peut générer de nombreuses incohérences graphiques.

Agence UX UI Design méthode de l'atomic design
agence atomic design paris le havre

L’Atomic Design, une méthode plus agile & plus cohérente

L’Atomic Design est une méthode imaginée par le Designer Américain Brad Frost. Il renverse la conception traditionnelle d’interfaces pour apporter plus d’évolutivité et plus de cohérence à un projet digital.

Brad Frost propose une métaphore : en physique, l’organisme est composé de molécules, elles-mêmes composées d’atomes. Dans un site web ou une application mobile, c’est pareil : une page est composé d’un template ; un template est composé de différents blocs fonctionnels, eux-mêmes constitués de composants.

Créer un design de site web en commençant par la page, c’est comme réciter l’alphabet à l’envers ! Pourquoi ne pas créer du plus petit au plus grand, pour ensuite assembler ces éléments dans des ensembles cohérents, comme lorsqu’on jouait aux legos ?

agence atomic design paris le havre

La méthode de l’Atomic Design répond à tant de frustrations vécues lors de projets digitaux, qu’elle nous a donné envie chez Mille & une UI, d’aider nos clients à avoir des process créatifs plus agiles et plus cohérents.

L’Atomic Design en pratique chez l’agence Mille & une UI

Une fois l’étape de l’UX Design finalisée, nous commençons par une recherche de concepts graphiques. Notre UI Designer réalise un moodboard avec de nombreuses inspirations graphiques. Cette planche vous aide, dans un premier temps, à définir l’univers graphique désiré pour votre produit.

Ensuite, notre UI Designer conçoit votre guide de style : couleurs, typographie, boutons, icônes… A partir des wireframes précédemment créés, l’UI Designer réalise les composants de vos interfaces, ou atomes. C’est en soignant ces détails que votre image de marque sera forte et cohérenteCe guide de style sera votre livre sacré ! Il définira les règles graphiques de votre image de marque, que ce soit sur desktop, mobile ou tablette. Ce sera LE document commun à tous vos intervenants, constamment mis à jour. Créé sous Adobe Xd, il sera possible, en quelques clics, de modifier une couleur et de la répercuter sur tous vos composants. 

comment concevoir en atomic design par composants

Une production éclair de toutes vos pages

Une fois la première base de votre guide de style conçu, notre UI Designer assemblera chaque composant en molécules, puis organismes, puis templates.

Exemple : Les atomes “libellé”, “champ de saisie” et “pictogramme” forment la molécule “Champ de recherche”. Ce champ de recherche peut ensuite être inséré dans un organisme “Recherche avancée”, qui sera composé d’autres molécules, comme un bouton, un titre et une boîte déroulante !

Lorsque notre UI Designer aura assemblé chaque composant, la création de vos pages sera plus rapide et plus efficace. Contrairement à la méthode traditionnelle, il y aura moins de place à l’improvisation puisque chaque règle créative aura été définie en amont. Comme une maison en lego, votre produit digital prend forme avec plus de rapidité et plus de cohérence.

Les avantages de l’Atomic Design

Suivi

Vous suivez, étape par étape, la conception de votre site ou application !

Cohérence

Votre image de marque est cohérente sur n’importe quel écran, vos interfaces sont plus intuitives pour l’utilisateur.

Créativité

Tous vos composants auront été pensés. C’est ce qui fait la différence entre une belle interface et une interface… Wahou !

Agilité

Avec un seul guide de style, accessible à l’ensemble de l’équipe, chaque intervenant aura toujours accès à la dernière version.

Travail d'équipe

En quelques clics, les Designers transmettent à l’équipe de développement un lien regroupant toutes les données CSS des interfaces, ainsi que les éléments à exporter.

Evolutivité

Vous avez fait la refonte de votre site en Atomic Design ? Créons votre application en partant de votre guide de style déjà existant. C’est peut-être le début de votre Design System…

Vous souhaitez en savoir plus sur notre méthode de travail ? Vous avez besoin d’aide pour simplifier et harmoniser vos projets digitaux ?