La phase de “conception” dans un Design System [Part.3]
On continu dans notre série d’articles autour du Design System ! Nous allons maintenant nous concentrer sur la phase de conception d’un Design System qui est la partie la plus “concrète” de la vie d’un design system.
C’est à partir de ce moment là que nous sommes amené à créer les éléments visuels et leurs documentations pour constituer un ensemble cohérent et efficace à long terme d’éléments réutilisables.
Nb : Je parle ici d’éléments visuels (design+dev).
Dans cet article, nous explorerons trois éléments clés de la conception :
- les fondations (globale et design),
- les composants,
- les patterns.
A noter que chaque aspect est essentiel pour constituer un système robuste et intuitif.
Les fondations (globale)
Les fondation dites “globales” constituent le socle sur lequel le design system reposera. On y retrouvera les règles en terme d’accessibilité, de langue et donc de contenu, de hiérarchie d’information et les valeurs de l’entreprise. Eh oui ! Le design system est également un vrai vecteur important de la marque employeur et des valeurs de l’entreprise !
Les fondations (design)
Les fondations design constituent les éléments de base qui servent de référence pour l’ensemble du système. Ce sont sur ces fondations que tout repose et c’est ce qui nous permettra ensuite de créer un tout homogène entre tout nos composants. On y trouve :
- Les couleurs
Les couleurs définissent la palette visuelle de l’application. Il est important de choisir des couleurs qui reflètent l’identité de la marque tout en assurant une bonne lisibilité et accessibilité grâce à des contrastes suffisants (hello les normes RGAA 👋).
- La typographie
La typographie englobe les polices de caractères utilisées dans l’interface. Il est important de sélectionner des polices lisibles et adaptées à différents contextes, tout en maintenant une hiérarchie visuelle claire.
On est souvent amené à choisir une police pour les titrailes et une pour les corps de texte, souvent sérif pour facilité la lecture.
C’est également à ce moment que nous fixons les tailles de ces titres et textes. Un H1 fera telle taille, un H2 et un H3 etc jusqu’aux corps de textes. C’est ce que l’on nomme Typescale.
- Les icônes
Les icônes fournissent des éléments visuels pour guider les utilisateurs et renforcer le sens des actions. Elles doivent être uniformes dans leur style et leur utilisation à travers le système. On choisit donc une librairie et un style d’icones (pleines, filaires, colorées ou noires et blanches) qui sera utilisé partout à travers le produit.
L’idéal serait d’avoir vos propres icones pour refléter le plus possible votre identité ! Cependant il existe aussi de bonnes alternatives qui malheuresement font que vous aurez peut-être les mêmes icones que le voisin..
- Les layouts
Les layouts définissent la structure de la page et la disposition des éléments. Ils doivent être flexibles pour s’adapter à différents types de contenu tout en maintenant une cohérence visuelle. C’est ici que l’on gèrera l’aspect responsive/adaptative/fluide.
- Les Margin et spacing
Les marges et les espacements déterminent les distances entre les éléments de l’interface. Une utilisation homogène garantit une présentation équilibrée et une expérience utilisateur harmonieuse. Se concentrer sur une base de multiple de 4 ou 8px est un bon moyen d’obtenir une harmonie. On se retrouve avec des espacements de 4,8,12,16… jusqu’à 64px à travers tout le produit.
- Les radius
Les radius définissent les coins arrondis des éléments tels que les boutons et les cartes. Une utilisation uniforme crée une esthétique visuelle cohérente à travers le système.
Les composants
Les composants sont des éléments réutilisables qui composent l’interface utilisateur. Ils peuvent être organisés en catégories en fonction de leur objectif : action, containers, communication, navigation, sélection et saisie de texte... A chaque composant design il existe un pendant tech (sinon c’est un styleguide ;) )
Exemple du bouton
Les boutons sont utilisés pour déclencher des actions, comme soumettre un formulaire ou naviguer vers une autre page. Ils peuvent être actifs, inactifs, hover, avec icones ou sans, focus..
Do’s and Don’ts :
Do’s : Les boutons doivent avoir une taille suffisante pour être facilement cliquables et une couleur distinctive pour se démarquer. Doit avoir un label clair et actionable. Etre positionné à des endroits constants dans les interfaces.
Don’t : Évitez les couleurs trop vives qui pourraient distraire l’utilisateur.
Focus sur les Design Tokens :
Les design tokens sont des variables pré-définies qui encapsulent des propriétés de design telles que les couleurs, les tailles, les polices, etc. Ils sont utilisés pour garantir la cohérence et la flexibilité dans un Design System.
Voici comment vous pourriez détailler les design tokens pour un bouton dans un Design System :
Couleur :
- Fond du Bouton : Une variable pour définir la couleur de fond du bouton.
- Texte du Bouton : Une variable pour définir la couleur du texte à l’intérieur du bouton.
- Bordure du Bouton : Une variable pour définir la couleur de la bordure du bouton (le cas échéant).
Taille :
- Largeur du Bouton : Une variable pour définir la largeur du bouton.
- Hauteur du Bouton : Une variable pour définir la hauteur du bouton.
- Padding du Bouton : Une variable pour définir l’espace intérieur du bouton par rapport à son contenu.
Typographie :
- Police du Texte : Une variable pour définir la police de caractères utilisée pour le texte du bouton.
- Taille de Police : Une variable pour définir la taille de police du texte du bouton.
Effets :
- Ombre du Bouton : Une variable pour définir l’ombre portée du bouton (le cas échéant).
- Transition : Une variable pour définir la transition lors du survol ou du clic sur le bouton.
Voici ce que cela pourrait donner concrètement côté tech :
:root {
--button-background-color: #007bff;
--button-text-color: #ffffff;
--button-border-color: #007bff;
--button-width: 150px;
--button-height: 40px;
--button-padding: 10px 20px;
--button-font-family: 'Roboto', sans-serif;
--button-font-size: 16px;
--button-box-shadow: 0 2px 4px rgba(0, 123, 255, 0.2);
--button-transition: background-color 0.3s ease-in-out;
}.button {
background-color: var(--button-background-color);
color: var(--button-text-color);
border: 1px solid var(--button-border-color);
width: var(--button-width);
height: var(--button-height);
padding: var(--button-padding);
font-family: var(--button-font-family);
font-size: var(--button-font-size);
box-shadow: var(--button-box-shadow);
transition: var(--button-transition);
}Avantages des Design Tokens pour les boutons :
- Cohérence : Les design tokens garantissent une cohérence visuelle à travers tous les boutons de l’interface.
- Facilité de Maintenance : En mettant à jour les design tokens, tous les boutons sont mis à jour en conséquence, ce qui facilite la maintenance.
- Flexibilité : Les design tokens permettent une personnalisation facile des boutons en ajustant simplement les valeurs des variables.
- Évolutivité : Ils rendent l’interface évolutif, permettant l’ajout de nouveaux styles de boutons sans impacter les existants.
En intégrant ces design tokens dans votre Design System, vous pouvez créer et maintenir des boutons cohérents et flexibles dans toute votre application. Vous étes également alignés entre ce qui existe en dev comme nomenclature et methodologie.
D’autres exemples de main components dans un design system :
- Inputs
- Tags
- Cards
- etc..
Les patterns
Les patterns sont des solutions UI à des problèmes de conception identifiés, récurrents et éprouvés. Quand vous êtes amené à dire “généralement on retrouve… sur ces pages ” c’est qu’a priori on se retrouve confronté à un pattern :). Les plus réccurents sont les suivants :
Formulaires :
Les formulaires permettent aux utilisateurs d’entrer des informations. Assurez-vous d’inclure des labels clairs et des messages d’erreur informatifs pour guider les utilisateurs sans les noyer dans le “trop”.
Empty States :
Les empty states se produisent lorsque l’interface n’affiche aucun contenu. Utilisez-les pour orienter les utilisateurs sur la prochaine action à prendre, comme inviter à créer un nouveau contenu ou les rediriger vers des paysages connus où ils pourront reprendre une navigation.
Notifications :
Les notifications informent les utilisateurs des actions importantes ou des mises à jour. Elles doivent être succinctes et non intrusives.
Dialogs :
Les dialogues sont des fenêtres contextuelles utilisées pour afficher des informations supplémentaires ou demander une confirmation de l’utilisateur.
Login :
Les écrans de connexion permettent aux utilisateurs de s’authentifier pour accéder à leur compte. On retrouve identifiants, mot de passe et un cta menant vers la création de compte.
Assurez-vous de fournir également des options de récupération de mot de passe et des instructions claires.
D’un point de vu opérationnel le workflow peut ressemble à ça :
On se retrouve avec 👇
Figma pour la conception de composants visuels et de tokens design
Zeplin/Figma Dev mode pour le passage de relai avec la team tech
Github pour l’hébergement du code
Storybook pour la présentation des composants développés
Chomatic pour la review par les designers de composants développés afin de les validés
Zeroheight pour la documentation et la présentation des composants designés
Grâce à cette organisation vous couvrez tous les aspects pratiques de la conception d’un design system.
Conclusion :
La phase de conception d’un Design System est le moment où nous devons mettre les mains à la pate pour concevoir des fondations solides et ensuite construire des composants bien définis avec la documentation approriée et des patterns pour les parcours éprouvés. La mise en musique des différents corps de métiers se fait on assiste la construction concrète de notre systeme.
En adoptant une approche méthodique et en tenant compte des besoins des utilisateurs, les équipes de conception peuvent créer des expériences cohérentes et intuitives.
Dans notre article suivant nous aborderons la partie opérationnelle ou autrement dit la phase de run de notre design system. ✨
Merci de m’avoir lu jusqu’ici ! J’espère que cet article vous aura plu et on se retrouve pour un nouveau chapitre: La phase opérationnelle ! :)
https://medium.com/p/8db31bfefd96
Sources:
