Système de design
Définition de design patterns
client : Manuloc’
année : 2024
catégorie•s : ui-ux • design system • dispositif digital
Contexte :
Projet d’un système de design web pour remplacer l’usage du logiciel IBM AS/400 (aujourd’hui IBM i).
Définition des éléments récurrents et réutilisables pour définir des patterns fonctionnels et perceptifs (couleurs, typo, etc.).
Missions :
• Design kit
• Design Tokens
• Guideline
• Design system
Environnement technique, outils :
• Figma
Description détaillée de l’image
Description détaillée de l’image
Description détaillée de l’image
Ce visuel représente deux artboards du logiciel de conception d'interfaces Figma. Ils sont issus du fichier fondamentaux dans lequel nous retrouvons toutes les informations essentielles du système de design du projet Manuloc’ comme les couleurs, la typographie, les grilles, etc.
Le 1er artboard est une capture visuelle du sommaire qui comprend :- Couleurs
- Design Tokens
- Élévation
- Espacement
- Grid/Layout
- Icônes
- Typographie
Chacune des couleurs se décline en de nombreuses autres couleurs soit par la teinte soit par une valeur relative à la luminosité.
Chaque couleur à un nom, une valeur hexadécimale, une valeur hsl et le niveau/rapport de contraste entre le texte et son arrière plan (valeur et cotation AA ou AAA).
Description détaillée de l’image
Ce visuel représente deux artboards du logiciel de conception d'interfaces Figma. Ils sont issus du fichier fondamentaux dans lequel nous retrouvons toutes les informations essentielles du système de design du projet Manuloc’ comme les couleurs, la typographie, les grilles, etc.
Le 1er artboard est une capture visuelle de la partie Design Tokens Il comporte une courte introduction au Design Tokens et un petit glossaire pour les mots suivants : Token, Value, Alias. Un petit exemple est présent pour illustrer l'usage des design tokens.
Le 2e artboard comporte la partie Principes de nommage pour définir les conventions de nommage. Un exemple est présent. Plus bas dans l'artboard, on commence la liste des tokens pour la partie Couleurs et précisément avec la propriété Background.