Conception calme et dense
Un goût, pas une peau. Linear et Things 3 sont des références pour le jugement — comment présenter beaucoup d'informations sans bruit, et comment rester calme sans devenir vague. Emprunter leur thème sombre, leur accent violet ou leur couleur de marque bleu/vert, ce n'est pas emprunter le goût.
Deux leçons portent l'essentiel de la valeur :
- Linear — la densité sans bruit. Montrer un travail dense avec une hiérarchie retenue.
- Things — le calme sans faiblesse. Garder la surface principale calme en cachant les détails jusqu'à ce qu'ils aient gagné leur place, pas en vidant l'écran.
Principes
Chacun est une règle plus la coupe qu'elle impose. Appliquez-les lors de la construction ou de la critique d'une surface.
- Ne rivalisez pas pour une attention que vous n'avez pas gagnée. Les chrome, séparateurs, métadonnées, onglets inactifs, icônes répétées s'effacent ; le contenu principal et la seule action primaire se lisent en premier sans crier.
- La structure se ressent, ne se voit pas. Obtenez la hiérarchie par l'alignement optique, un rythme d'espacement cohérent, des séparateurs de 0,5 à 1 pixel, des paliers d'opacité, des fonds de groupe et la typographie — pas par des bordures épaisses, des ombres larges, des dégradés décoratifs, des panneaux saturés ou des conteneurs d'icônes.
- Densité sans encombrement. Lignes compactes avec alignement prévisible et divulgation progressive des détails. Pas : texte minuscule illisible, chaque ligne exposant chaque contrôle, ou espacement gonflé vendu comme « premium ».
- Calme qui clarifie, pas calme qui cache. Le calme vient d'une hiérarchie claire et d'une prochaine action évidente — pas d'espaces blancs pâles, de texte à faible contraste faisant semblant d'être discret, ou d'états vides utilisés comme décoration.
- Couleur sémantique restreinte. L'accent marque la sélection, le focus, un statut important et un état positif/terminé — jamais la décoration. Respectez l'accent du système ; ne repeignez pas tout dans une couleur de marque. Un « vert de complétion » est un repère sémantique, pas la couleur primaire de l'application.
Typographie et animation
- Typographie : polices système sauf raison impérieuse ; hiérarchie par taille, graisse, opacité et position. Direction : titre d'écran (clair, pas surdimensionné) → titre de ligne (graisse moyenne) → métadonnées (plus petites, opacité réduite) → statut (compact, sémantique, pas chargé en badges) → corps (court, lisible).
- Animation : explique la continuité ou le changement d'état (un compositeur qui apparaît, une sélection qui se déplace, une mise à jour de statut en ligne). Jamais ornementale. Toujours honorer la réduction de mouvement.
Deux tests de décision
- Test de drame : si un traitement ajoute du drame visuel mais n'améliore pas l'orientation, la vitesse, la confiance ou l'achèvement de la tâche — supprimez-le.
- Test de calme : si le « calme » rend la hiérarchie, la densité ou la prochaine action plus difficiles à lire — ce n'est pas du calme, c'est du vague. Resserez-le.
Auto-vérification
Lisez un écran en regard de ces critères. Un « non » est une constatation, pas une préférence :
- La tâche principale est-elle évidente en un coup d'œil, sans que l'œil cherche ?
- Le chrome secondaire s'efface-t-il, ou rivalise-t-il ?
- Les lignes/éléments sont-ils alignés sur une grille et une ligne de base prévisibles ?
- L'écran est-il dense parce qu'il est informatif — ou clairsemé parce que l'espacement est gonflé ?
- La couleur communique-t-elle un état, ou est-elle une décoration de marque ?
- Pourriez-vous supprimer un séparateur, une ombre, un dégradé ou un conteneur d'icônes sans rien perdre ?
Pour aller plus loin
references/in-practice.md — valeurs concrètes (illustratives), listes élargies de Préférer/Éviter, et comment appliquer ce goût lors d'une revue.
Ce n'est pas le rôle de cette compétence
Il s'agit d'un goût indépendant de la plateforme. Les conventions, contrôles et architectures de plateforme vivent ailleurs :
- Apple (iOS/iPadOS/macOS) UI + HIG + SwiftUI/AppKit + QA visuelle →
apple-app-design-guidelines. - Architecture de bureau multiplateforme à sensation native (shell + WebView + IPC) →
native-feel-desktop.
Lorsque le goût et la plateforme sont en conflit, la plateforme l'emporte — reportez-vous à ces compétences.