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 Cocktail Numérique, 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.
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 ?
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 Cocktail Numérique, d’aider nos clients à avoir des process créatifs plus agiles et plus cohérents.
L’Atomic Design en pratique chez l’agence Cocktail Numérique
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érente. Ce 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.
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…