UI moderne minimale

UI moderne minimaliste : des sites minimalistes qui semblent aboutis

Pour les sites personnels, portfolios, pages d'atterrissage et blogs : des sites petits, centrés sur le contenu, où la retenue et le détail font le travail. Pas pour les applications web, les interfaces produit, les tableaux de bord ou les outils ; leurs problèmes (état applicatif, densité de données, formulaires complexes) nécessitent des conseils différents.

Tout ce qui suit est du HTML, CSS et un peu de vanilla JS, donc cela s'adapte à n'importe quelle stack ou à aucune. Là où le projet a déjà une configuration de build ou de templating, utilisez-la ; les principes ne changent pas.

C'est une boussole, pas un modèle : chaque règle donne le pourquoi et un point de départ à adapter au sujet et au goût de l'utilisateur ou de l'utilisatrice. Les éléments marqués Fermes sont les rares choses à ne pas sauter.

Fichiers de support (lire au besoin) :

• references/snippets.md : blocs de construction copiables (jetons, base, prose, liste de posts, formulaires, animation).
• references/interface-checklist.md : vérifications détaillées d'interaction, de formulaire, de contenu et de performance, adaptées des Directives d'Interface Web de Vercel.
• references/ship-checklist.md : SEO, aperçu social, RSS, analytics, hébergement.
• references/lessons.md : pièges et astuces de vérification navigateur de projets réels.
• references/templates.md : mesures de 10 modèles de pages d'atterrissage Carrd (citées par le numéro du modèle Carrd, ex. #304). Données de référence pour calibrer votre œil, pas des règles.

1. Flux de travail

1. Comprendre le travail. Le site de qui, pour qui, la seule chose qu'un visiteur ou une visiteuse devrait faire ou apprendre, les pages nécessaires, et ce que « terminé » signifie. Demandez quand la réponse change la construction : le domaine final, s'il faut suivre les visiteurs, qui possède le contenu, et s'il y a du contenu existant (articles, projets) à intégrer.
2. Définir la direction (§2) et l'écrire : jetons de couleur, une paire typographique, une échelle d'espacement et de rayon, et une personnalité d'animation, dans les notes du projet (CLAUDE.md, AGENTS.md ou README) pour que les sessions ultérieures restent cohérentes.
3. Configurer les éléments partagés (§3) avant la première page : jetons, styles de base, primitives de mise en page, composants et une source pour l'en-tête, le pied de page et la balise <head>. Chaque page, y compris la première, est construite à partir de ceux-ci.
4. D'abord le vrai contenu. Le texte de remplacement cache les problèmes de mise en page. Suivez la recette de page (§4).
5. Construire statique, responsive et accessible, puis ajouter l'animation, puis peaufiner.
6. Livrer (§11), vérifier dans un navigateur (§12), puis faire la passe de retenue (§13).
7. Itérer par petites étapes visibles. Un changement à la fois, regardez-le, demandez des avis sur le goût plutôt que de deviner, dites clairement ce qui a été et n'a pas été vérifié, et ne validez ou ne publiez que lorsqu'on vous le demande.

2. Choisir une direction

Le minimalisme est le défaut : contenu d'abord, un accent, espace généreux, lignes fines plutôt que boîtes, petite animation. Chaque élément doit porter du sens ; la décoration qui n'en a pas est supprimée.

Famille	Aspect	A tendance à convenir à
Lumière calme	Presque blanc, sans-serif neutre, séparateurs fins, un accent net	Sites personnels, blogs, écriture
Sombre calme	Presque noir, grande police légère, un accent, un monospace pour les métadonnées	Sites d'ingénierie et personnels, lancements
Éditorial	Serif pour l'affichage ou le corps, mesure généreuse, boutons avec contour	Écriture longue, livres, culture ; peut sembler daté pour les publics techniques, donc montrez-le d'abord en direct
Lueur douce	Base calme plus un dégradé subtil ou une lueur radiale, optionnellement surface givrée	Pages d'atterrissage qui ont besoin d'un peu de chaleur
Un bloc audacieux	Base calme plus un bloc de couleur pleine largeur ou une photo encadrée	Portfolios, événements, marques personnelles

• Le ton prime sur la nouveauté. Un sujet sérieux veut du calme et de la crédibilité ; les polices ludiques et les effets bruyants sont généralement rejetés dans ce contexte.
• Correspondre aux conventions du public. Les publics techniques s'attendent généralement à un sans-serif neutre sur un fond presque blanc ou presque noir avec un accent net ; d'autres publics ont les leurs. Lorsque vous proposez plusieurs directions, faites-les différer par la mise en page et les surfaces (page liste, split collant, grille de cartes, un bloc de couleur), pas seulement par la police et la couleur du papier, afin que l'utilisateur ou l'utilisatrice choisisse entre de véritables alternatives.
• Quand le goût est inconnu, essayez-le en direct. Échangez la police, l'accent ou l'espacement dans la page réelle et laissez l'utilisateur ou l'utilisatrice réagir. Attendez-vous à plusieurs tours.
• Le goût de l'utilisateur ou de l'utilisatrice prime sur ce guide. Une fois qu'il ou elle accepte ou rejette une direction, notez-la dans les notes du projet et suivez-la plutôt que toute valeur par défaut ici.

3. Styles et composants partagés

Une deuxième page devrait ressembler à la première parce qu'elle est construite à partir des mêmes éléments, pas parce que les styles ont été copiés.

• Une source pour les jetons. Les couleurs, l'échelle typographique, l'espacement, les rayons, les ombres et les timings d'animation sont des propriétés personnalisées dans un seul fichier. Les pages et les composants utilisent des jetons, jamais de valeurs brutes : un code hexadécimal ou une taille de pixel ponctuelle dans les styles d'une page est un bug à corriger.
• Styliser les composants, pas les pages. .btn, .card, .field, .prose, .post-list, .site-header, pas .about .blue-box. Les variantes sont des modificateurs (.btn--outline), jamais des copies modifiées. Les styles de page ne font que disposer les composants et restent courts.
• Superposer le CSS : jetons → base → primitives de mise en page → composants → disposition de page, déclarés avec @layer pour qu'une règle de page ne puisse pas silencieusement surpasser un composant (voir extraits).
• Écrire l'interface partagée une fois. L'en-tête, la navigation, le pied de page, <head> et le script du site proviennent d'une seule source : les includes, partiels ou templates du projet, ou un petit script de build. Les en-têtes copiés à la main dérivent ; si la copie est inévitable sur un site de deux pages, dites-le et revérifiez chaque copie après chaque changement. Marquez la page courante dans la navigation avec aria-current="page".
• Comportement par balisage. Un script de site unique gère les révélations et les disclosures via des attributs de données et des classes, de sorte qu'une nouvelle page les obtienne sans JS par page.
• Tenir un inventaire. Listez les composants dans les notes du projet (nom, objectif, variantes). Sur une nouvelle page, réutilisez d'abord ; tout nouveau élément va dans les fichiers partagés et la liste, pas dans la page. Un styleguide.html montrant chaque composant dans chaque état et thème est une vérification rapide après les modifications.
• Une seule page aujourd'hui ? Séparez quand même les jetons et les composants des styles de page ; la page suivante deviendra un assemblage.

4. Recettes de page

Page d'atterrissage

• Hero : un titre, une phrase d'accroche, l'action principale (ou le formulaire d'inscription lui-même) dans la première fenêtre.
• Ensuite, des sections qui répondent aux questions du visiteur ou de la visiteuse dans l'ordre : ce que c'est, comment ça marche (étapes numérotées plus une petite image), preuve (citations courtes, logos, chiffres réels), FAQ, pied de page.
• Ne répétez pas l'argumentaire : si le hero contient le formulaire, un bloc de fin le répétant n'ajoute rien.

Site personnel / Portfolio

• Nom et une ligne sur ce que fait la personne, puis des sections courtes : travail ou projets, écriture, à propos, contact.
• Les listes avec lignes fines sont meilleures que les grilles de cartes pour les projets et les articles ; une photo encadrée suffit comme imagerie.
• Le contact est un lien simple (email, profils), pas un formulaire, sauf si l'utilisateur ou l'utilisatrice en demande un.

Index de blog

• Une liste, pas des cartes : titre, date (<time datetime>), éventuellement un résumé d'une ligne. Regroupez par année une fois qu'il y a beaucoup d'articles. La ligne entière est le lien, sans zones mortes.
• Pas de vignettes génériques. La pagination ou une longue page fonctionnent toutes les deux ; dites laquelle dans les notes.

Article de blog

• Une colonne de lecture d'environ 60–72 caractères, corps de 17–19 px avec une hauteur de ligne de 1.6–1.75 (§5).
• Titre, date et temps de lecture optionnel en haut ; titres avec ancres et scroll-margin-top ; une table des matières uniquement pour les longs articles.
• Les figures avec légendes peuvent dépasser la largeur du texte ; les blocs de code défilent à l'intérieur d'eux-mêmes, jamais la page.
• Terminez par une prochaine étape : articles précédents/suivants ou une courte liste de plus, plus le lien RSS.

Partagés entre les types

• En-tête : une navigation ou rien. Un seul bouton isolé en face de la marque semble inachevé.
• Pied de page en bas, même sur les pages courtes (colonne flex pleine hauteur), sans marge errante en dessous.
• Concevez chaque état : vide (pas encore d'articles), titres très longs, images manquantes, une page 404 dans le look du site.

5. Typographie

• Une ou deux familles : un visage de corps neutre (une pile système convient) plus au plus un visage d'affichage. Un monospace pour les dates, le code et les métadonnées est un troisième visage seulement s'il le mérite.
• Les titres se lisent comme modernes, grands, légers et avec un suivi serré : environ 40–72 px pour le hero, poids 300–500, espacement des lettres −0.02 à −0.05 em pour le néo-grotesque, hauteur de ligne 1.1–1.25, dimensionnés avec clamp().
• Titres de section sur une page courte (site personnel, index de blog) : environ 1.25× le corps (≈20 px), semi-gras, dans la couleur du texte. Les étiquettes en majuscules faibles sont trop faibles ; les tailles d'affichage concurrencent le hero.
• Texte de lecture. 17–19 px, hauteur de ligne 1.6–1.75, mesure 60–72 ch, paragraphes espacés d'environ 1 em. Le texte secondaire utilise une couleur atténuée, pas une taille plus petite.
• Lignes soignées : text-wrap: balance sur les titres, text-wrap: pretty sur les paragraphes pour éviter les mots isolés.
• Détails typographiques : guillemets courbes (« »), le caractère points de suspension (…), un espace insécable entre un nombre et son unité (10 MB), tabular-nums pour les dates et les chiffres dans les listes. Marquez les noms de marque et de produit translate="no" pour que la traduction du navigateur les laisse tranquilles.
• Wordmark : assez grand pour tenir le coup à côté des titres de section (souvent 1.2–1.6×) ; un contraste de poids à l'intérieur d'un mot (léger + extra-gras) ajoute du caractère à moindre coût.
• Texte justifié uniquement avec lang défini et hyphens: auto, et jamais dans des colonnes étroites.

6. Couleur et surfaces

• Jetons sur :root : arrière-plan, surface, texte, atténué, couleur de fine ligne, un accent (optionnellement un deuxième arrêt de dégradé) et une couleur sur l'accent.
• Contraste (Ferme). Texte du corps d'au moins 4.5:1 (WCAG 2) sur la surface réelle, vérifié à l'endroit le plus clair des surfaces translucides ou dégradées. Les polices d'affichage légères ont besoin de plus. L'APCA est un deuxième avis utile pour les polices fines, pas un remplacement. Définissez toujours les couleurs des liens ; le bleu par défaut du navigateur a l'air faux sur presque tous les designs.
• Accent pour quelques petites marques : un mot dans un titre, les liens, le survol et le focus, l'élément de navigation en cours. Pas un grand bloc de couleur, et pas pour la numérotation des listes.
• Surfaces : plates avec fines lignes par défaut. Les ombres, lorsqu'elles sont utilisées, ont deux couches (ambiance douce plus une directionnelle plus serrée) ; les bordures peuvent être semi-transparentes pour que les bords restent nets sur n'importe quel arrière-plan. Les rayons intérieurs ne sont jamais plus grands que ceux de leur conteneur. Sur un fond coloré, teintez les bordures et les ombres vers sa teinte.
• Le survol et le focus augmentent le contraste par rapport à l'état de repos.
• Clair, sombre ou les deux. Décidez tôt. Un seul schéma fixe convient : définissez color-scheme et theme-color en conséquence. Pour les deux, redéfinissez les mêmes jetons sous prefers-color-scheme: dark (plus un remplacement [data-theme] s'il y a un basculement) et vérifiez le contraste, les ombres, les images et les blocs de code dans chacun.
• Arrière-plans : solides, ou un dégradé doux ou une lueur ; un motif seulement à ≤10 % de contraste. Jamais deux choses fortes.

7. Animation

L'animation devrait aider quelqu'un à voir ce qui a changé ou où regarder. Sur ces sites, moins est généralement mieux.

• Par défaut : un court fondu du contenu principal au chargement (quelques pixels de montée) et un retour au survol/focus. Une page avec seulement cela est un résultat complet et calme.
• Les révélations au défilement sont optionnelles et restent subtiles : opacité plus 6–20 px de mouvement, ease, 0.3–1 s, jouées une fois à environ 25 % de visibilité. Cascade par distance (le titre bouge le moins, les boutons le plus) ; étalement de 100–150 ms, limite de 6–8 éléments. Jamais sur le contenu de lecture long.
• D'abord CSS, puis l'API Web Animations, puis une bibliothèque JS seulement si vraiment nécessaire.
• Animer uniquement opacity et transform , listez explicitement les propriétés transitionnées (jamais transition: all), et définissez transform-origin là où le mouvement commence physiquement. Pour SVG, animez un <g> avec transform-box: fill-box.
• Interruptible : des transitions, pas des timelines fixes, de sorte qu'un survol sortant ou un deuxième clic s'inverse en douceur.
• Survol/focus : les boutons passent à l'échelle d'environ 1.02–1.06 ou se soulèvent ; les liens de navigation et de texte reçoivent un soulignement de 2 px glissant depuis la gauche, également sur :focus-visible.
• Animation ambiante : au plus une boucle lente, ou aucune. Les médias en boucle sont une <video> en sourdine, pas un GIF, et une animation de plus de 5 secondes nécessite un contrôle de pause.
• Scintillement du verre (Chrome) : ne fondez pas les enfants d'un élément backdrop-filter et n'animez pas son flou (voir leçons).

8. Modèles d'interaction

• Les liens sont des liens. La navigation utilise <a> pour que le nouvel onglet, le copie-lien et le clic central fonctionnent. Pas de zones mortes : si une ligne a l'air cliquable, elle l'est entièrement.
• Formulaires (inscription, contact) : chaque champ étiqueté ; type, name, autocomplete et inputmode corrects ; vérification orthographique désactivée pour les e-mails ; validation native d'abord. Ne bloquez pas le collage ou les frappes, et ne désactivez pas l'envoi avant que l'utilisateur ou l'utilisatrice n'essaie. Les erreurs se trouvent à côté du champ, disent comment corriger le problème, et le focus se déplace vers la première erreur lors de l'envoi. Plus dans la checklist d'interface.
• Soumission : le bouton garde son libellé et gagne un spinner, affiché seulement après ~200 ms et ensuite pendant au moins ~400 ms pour que les réponses rapides ne scintillent pas (voir extraits). Le succès remplace le formulaire par une prochaine étape claire.
• Disclosures (FAQ, « voir plus ») : un <button aria-expanded aria-controls>, animé avec l'astuce des rangées de grille, état fermé seulement quand JS s'exécute.
• Aide en ligne plutôt que infobulles. Expliquez d'abord dans le texte. Si une infobulle est nécessaire, ne vous fiez jamais à title ; utilisez une infobulle personnalisée au survol et au focus, avec un court délai avant la première et aucun lors du déplacement entre voisins.
• Copie : dites ce que la page offre dans les mots du visiteur ou de la visiteuse ; les boutons disent exactement ce qu'ils font ("Obtenir la newsletter", pas "Soumettre") ; les messages d'erreur disent comment récupérer.

9. Ligne de base qualité (Ferme)

• Mouvement réduit : avec prefers-reduced-motion: reduce, les révélations s'affichent instantanément et les boucles et le défilement fluide sont désactivés.
• Sûr sans JS : les états cachés jusqu'à révélation vivent derrière une classe .js, de sorte que rien ne reste invisible si JS échoue.
• Clavier et focus : un lien "Skip to content", des niveaux de titres logiques,

…

[tronqué pour la traduction]