Catégorie du lexique
Le design d’un site ne se limite pas à l’esthétique. UX, UI, hiérarchie visuelle, contraste, typographie ou design system aident à construire une interface claire, cohérente et utilisable.
L’accessibilité vise à rendre un site utilisable par tous, y compris avec un handicap (vision, motricité, cognition). Cela concerne la structure, les contrastes, le clavier, les textes alternatifs et les composants.
Exemple
Un bouton accessible doit être atteignable au clavier et avoir un intitulé clair.
Termes liés
Une carte est un composant qui regroupe une information en bloc : titre, texte, visuel, lien. Les cartes facilitent les grilles et les listes scannables.
Exemple
Une carte “Service” avec un titre et un CTA vers une page dédiée.
Termes liés
Le contraste est la différence visuelle entre deux éléments (texte/fond, bouton/fond). Un bon contraste améliore la lisibilité et l’accessibilité.
Exemple
Du texte gris clair sur fond blanc manque de contraste et fatigue la lecture.
Termes liés
La couleur principale est une couleur dominante d’une identité visuelle utilisée pour guider l’attention (liens, boutons, éléments clés). Elle doit fonctionner avec des contrastes suffisants.
Exemple
Utiliser une couleur principale pour les CTA aide à les repérer rapidement.
Termes liés
Un design system est un ensemble de règles et composants (couleurs, typographies, boutons, grilles, blocs) pour construire des pages cohérentes. Il améliore la qualité, la vitesse et la maintenance.
Exemple
Un même composant “CTA” réutilisé sur toutes les pages évite les incohérences.
Termes liés
L’espacement (marges, paddings) organise les éléments et donne du rythme. Un bon espacement améliore la lisibilité et la hiérarchie visuelle.
Exemple
Ajouter de l’espace autour d’un titre le rend plus important et plus lisible.
Termes liés
Une grille structure la mise en page en colonnes et alignements. Elle crée de la cohérence et facilite l’adaptation responsive.
Exemple
Une grille 12 colonnes permet d’aligner titres, visuels et cartes.
Termes liés
La hiérarchie visuelle indique ce qui est le plus important via la taille, le contraste, l’espacement et la position. Elle permet de scanner une page sans effort.
Exemple
Un titre plus grand, suivi d’un sous-titre, puis d’un CTA crée une hiérarchie claire.
Termes liés
L’identité visuelle regroupe les éléments qui rendent une marque reconnaissable : logo, couleurs, typographies, styles d’images, règles d’usage. Elle vise la cohérence sur tous les supports.
Exemple
Une identité cohérente rend un site plus lisible et plus homogène.
Termes liés
Liens internes
Le logo est un signe graphique qui identifie une marque. Il doit être lisible à différentes tailles et fonctionner en version claire/sombre.
Exemple
Un logo trop fin peut devenir illisible sur mobile ou dans un header compact.
Termes liés
La typographie désigne les polices et leurs usages (tailles, graisses, interlignage). Une typographie bien réglée améliore la lisibilité et la hiérarchie.
Exemple
Utiliser 2 polices maximum et des tailles cohérentes évite l’effet “patchwork”.
Termes liés
L’UI (User Interface) concerne l’interface : boutons, formulaires, composants, styles, interactions. L’objectif est une interface claire, cohérente et agréable.
Exemple
Une UI cohérente garde les mêmes styles de boutons d’une page à l’autre.
Termes liés
L’UX (User Experience) est l’expérience vécue par l’utilisateur : compréhension, effort, confiance, efficacité. Elle dépend de la structure, du contenu, du design et des performances.
Exemple
Si un visiteur trouve l’info en 10 secondes, l’UX est meilleure que s’il cherche 2 minutes.
Termes liés
Le lexique aide à comprendre les mots. Le diagnostic aide à repérer les priorités de votre site ou de votre présence digitale.