UX-Files #2 : l’harmonisation UI.
Les questions qui se posent souvent lorsque l’on flirte avec l’idée de créer son propre site, ce sont (liste non-exhaustive) :
- “Comment puis-je créer un site harmonieux et cohérent ?”
- “Est-ce qu’il me faut une charte graphique/visuelle ?”
- “Comment dois-je aborder mes pages ?”
Cet article a pour but de répondre à ces différentes interrogations.
Cet article fait partie d’une série proposée par Margaux, dont voici les différentes publications :
- UX-Files #1 : la Page Produit
- UX-Files #2 : l’harmonisation UI (cet article)
Je travaille actuellement sur l’UI Kit et le style guide d’un produit de mon entreprise, pour finir par créer un Design System… Je suis donc à fond dans ce sujet, et j’ai pu expérimenter les difficultés de créer l’UI Kit après coup.
Alors entrons tout de suite dans le vif du sujet ! 💪
Petit avant-propos : j’utilise actuellement Figma et mes propos seront donc orientés vers cet outil.
La base : l’Atomic Design
L’Atomic Design est une notion qui a été mise en place par Brad Frost. Il s’agit d’un prémisse au Design System, sur lequel je reviendrai plus tard. L’idée est simple :
Créer un environnement évolutif.
Au fond, l’Atomic Design, c’est un peu faire du lego. 🧩 Il se scinde en plusieurs branches :
- Atomes : il s’agit des éléments seuls qui composent votre interface. Il peut s’agir des couleurs, des styles de texte, des éléments comme les radio buttons ou encore les checkboxes. Seuls, ils sont très abstraits.
- Molécules : les molécules sont un groupement d’atomes. Typiquement, pour prendre un exemple concret, un champ de formulaire peut être une molécule.
- Organismes : les organismes sont le niveau encore au-dessus. Pour reprendre l’exemple du formulaire, un organisme serait un ensemble de molécules : titre et input.
- Templates : il s’agit d’une page presque complète. L’expérience est déjà significative et beaucoup plus parlante. C’est un groupement d’organismes.
- Pages : est-ce que j’ai vraiment besoin de vous expliquer ce qu’est une page ? 😉 C’est l’ensemble de tout ce que vous avez constitué jusqu’à présent !
En soit, connaître l’Atomic sur le bout des doigts n’est pas primordial tant que vous appliquez la méthode : partir du plus petit élément pour constituer ensuite une page entière.
Et vous me direz : “Mais Margaux, pourquoi c’est important ?”.
Parce que. 😘
L’Atomic Design évite de créer sans cesse de nouveaux styles et de nouveaux composants qui ne seront jamais réutilisés. C’est mieux en terme de maintenabilité niveau Design, mais également en terme de poids de page pour le Développement Web. ✨ L’Atomic Design, c’est magique ! 🧙♂️
Si vous voulez homogénéiser et unifier vos pages, c’est l’Atomic Design votre meilleur allié. D’autant qu’il aide à créer une expérience utilisateur homogène, puisque l’utilisateur sait que ce type de bouton va générer telle action.
Alors on le respecte, on l’aime et on l’utilise au maximum ! 😍
Commençons par le commencement : les couleurs et la typographie
Les couleurs :
Ma section s’appelle “Les couleurs”, mais en tant qu’UX/UI Designer, je ne peux vous conseiller qu’une chose :
Commencez par des maquettes en niveau de gris pour vous focaliser sur la hiérarchie des éléments. 😀 La hiérarchie, c’est la base en design d’interface ! Elle permet d’accéder et de comprendre plus facilement l’information transmise.
Pour en revenir aux couleurs, il faut les utiliser avec parcimonie ! 😉
- 3 couleurs maximum : primaire, secondaire et accentuation.
- On peut se baser sur la roue chromatique pour que les trois couleurs soient éloignées et que ça crée une belle harmonie (la triade d’Adobe Color fait bien le travail).
- On les répartie en 60/30/10 : la couleur primaire prend 60% de la page, la couleur secondaire en prend 30% et la couleur d’accentuation prend 10% pour créer du contraste.
- Les interfaces digitales reprennent toujours les couleurs de la marque.
Je vous conseille le Color Tool de Material Design pour visualiser la répartition de vos couleurs ainsi que leur accessibilité.
- Pour avoir plus de couleurs et créer de la hiérarchie visuelle, on utilise des nuances des couleurs. Je vous conseille EvaDesign et Color Shader. Vous pouvez aussi jouer avec les valeurs HSL/HSB de votre logiciel.
Quand je bouge la valeur de Hue (H), mon curseur va bouger sur l’axe des couleurs. Si je mets 158, je vais partir vers le bleu. 138, je pars vers le jaune.
Si je bouge ma Saturation (S), je vais jouer sur la “vibrance” de ma couleur. En partant vers 0, je me rapproche du gris et des valeurs neutres.
Enfin, si je change la valeur de ma Lightness (L), je vais avoir une couleur plus ou moins lumineuse. Je me rapproche du blanc ou du noir.
Il faut que vous donniez du sens à vos couleurs. Si vous utilisez du bleu pour vos call to action (appels à l’action) à un endroit, continuez d’utiliser le même bleu pour tous vos call to action similaires. (d’où les actions primaires et secondaires)
Et surtout, surtout, pensez à l’accessibilité. Utilisez le plugin Stark sur Figma ou encore Colorable pour voir si vous passez le premier critère du WCAG (AA : 4.5:1). Sans ce premier pallier passé, votre couleur ne sera pas suffisamment contrastée pour être vue par tout un chacun. Et penser à tout le monde, c’est la base du Design Inclusif (et du respect).🥰
Si vous souhaitez explorer plus longuement le lien entre création de palette de couleurs, et accessibilité, un autre article de la publication pourrait vous intéresser :
Enfin, la couleur seule ne doit pas être utilisée pour donner du sens : accompagnez-la d’un pictogramme ou encore une phrase explicite. Je pense notamment aux erreurs : le rouge n’est pas suffisant, expliquez-vous ! 😀
Sur Figma, pour monter votre UI Kit, n’oubliez pas de créer vos styles de couleur pour vous permettre d’en changer plus facilement. Je vous renvoie vers les vidéos de Jessica Trocmé et de Sébastien Wozny pour tout savoir sur Figma. 😀
La typographie :
La deuxième chose primordiale, c’est la typographie.
De la même façon, il faut penser hiérarchie visuelle et penser à créer ses styles de texte dans Figma. Personnellement, j’utilise la 4pt grid (et la 8pt grid) pour mes rapports de proportion mais vous pouvez également utiliser Type Scale.
Je vous invite à lire mon précédent article (avant les UX-Files) pour en savoir plus sur le travail typographique. 😁
Je referai peut-être à l’occasion un article plus complet et dédié uniquement à la typographie. 😉
L’Atomic Design, ça passe par les composants !
Les composants, qu’est-ce que c’est ? 🤔
Ce sont des éléments qui sont réutilisables et qui permettent de créer une maintenabilité optimale. Quand vous changez une propriété du composant de référence (le fameux losange violet dans la petite image ci-dessus), ces changements sont répercutés partout où vous avez utilisé des occurrences de ce composant.
Sur le gif ci-dessous, vous pouvez bien voir qu’en changeant sur le composant (à gauche), ça modifie l’une de ses occurrences (à droite). Ainsi, si je change ma couleur primaire, je peux modifier très facilement la totalité de mon interface. Ici, j’utilise également les styles de couleurs.
Les composants sont créés autant pour les atomes que pour les molécules, organismes et templates. Pour les composants plus complexes, il peut s’agir de composants imbriqués (nesting en anglais).
En fait, nous fabriquons un système de poupées russes 🎎(Oui, elles sont japonaises mais j’ai pas trouvé de russes) :
- J’utilise mon composant d’atome dans mon composant de molécule.
- J’utilise ensuite mon composant de molécule dans mon composant d’organisme.
- J’utilise enfin mon composant d’organisme dans mon composant de template.
Comme ça, si je modifie mon atome, ce sera modifié jusqu’à mon template… Et ainsi de suite. 😉
C’est un concept qui est plus compliqué à expliquer qu’à prendre en main ! Les composants permettent de créer des maquettes très rapidement, puisqu’il n’y a plus qu’à faire un Tetris : assembler les blocs déjà réalisés ensemble. 🧩
Il est possible de “casser” le lien d’un composant enfant (occurrence) avec son composant parent (référence), mais c’est à éviter puisque du coup les changements sur la référence ne seront plus pris en compte sur l’instance. (Vous ne voudriez pas séparer un enfant de son parent, si ? 😱)
On créera un minimum de composants, parce que si vous avez bien suivi… 🥁 … L’idée c’est de réutiliser au maximum ceux qui existent déjà. On privilégie un nombre de styles très faible pour créer un ensemble harmonieux.
Pour terminer sur les composants, veillez à utiliser une convention de nommage. La méthode BEM peut très bien convenir (Bloc/Element/Modifier). Elle est utilisée en Développement Front-End (CSS) et permet d’avoir un nommage commun entre les Devs et les Designers. 😉
Sur Figma, la nomenclature a une incidence sur le rangement des fichiers. On utilise les / pour créer une indentation supplémentaire. Ainsi mon chemin Icon/Payment/American-Express me créera 2 dossiers : Icon, puis Payment. (Je reviendrai sans doute sur le sujet dans un futur article, sinon celui-ci va se transformer en thèse. 😂)
Dans l’idéal, on crée un Style Guide qui explique comment s’utilise chaque composant (surtout dans le cas des composants imbriqués). L’explication sera autant utile niveau Design que niveau Développement. ✨
Et toujours dans l’idéal, l’UI Kit ainsi que le Style Guide sont à mettre en place dès le début du projet, car au plus vous avancerez dans le design graphique de votre application/site web, au plus il sera long de mettre en place un kit.
Et la suite logique des composants et du style guide, c’est le Design System !
L’article est déjà bien long et les Design Systems mériteraient un article entier juste sur eux… Mais sachez en tout cas que ça existe, et je vous conseille de consulter quelques Designs Systems vraiment bien pensés !
Vous pouvez également aller jeter un œil sur ce retour d’expérience de Geoffrey sur le Design System de Foyer.
Mozilla, Material Design (Google) et Shopify :
Les mots de la fin
Cet article est encore une fois très long ! 😅
On n’arrête pas de me dire que je suis bavarde et incapable de synthétiser… 😅Mais sur des sujets aussi complexes, ce n’est pas évident !
Il y a encore beaucoup à dire sur ces sujets, mais j’espère avoir déjà pu vous éclairer un minimum. Vulgariser a été extrêmement compliqué et j’espère ne pas vous avoir trop perdu.
Encore une fois, je vous conseille de suivre les vidéos de Jessica Trocmé et de Sébastien Wozny qui sont plus visuelles et qui vous permettront, je pense, de mieux appréhender les concepts dont j’ai parlé ici.
Merci à Abeba Ngwe pour la suggestion de cet article. 😀
Je ne vous conseillerai jamais assez de vous faire votre propre opinion et de lire un maximum d’articles (en anglais, ils sont bien aussi !) sur Medium ou encore LinkedIn. Le savoir s’acquiert en apprenant des autres et en partageant ses propres connaissances. 😉
Si vous voulez en savoir plus sur mes futurs articles, suivez-moi (ou connectez-vous avec moi) sur LinkedIn. 🥰
Margaux Membré est une UX/UI Designer étudiante à Webstart Lille au moment où elle écrit ces lignes. Passionnée par l’UX et plus particulièrement l’UI, elle a décidé de mettre en place cette série d’articles pour répondre aux questions de son réseau LinkedIn, et en apprendre plus de son côté sur des sujets qui risquent de la toucher un jour ou l’autre.
Encore débutante, Margaux Membré s’est renseignée sur divers sites et des sources les plus récentes possibles. Néanmoins, elle reste junior dans le domaine et elle ne saura être tenue responsable si de fausses idées se sont glissées dans ses mots.
