Brief de design pour les assistants IA

Voici le brief de design de Page Lemon pour les assistants IA. Vous concevez un site web pour une personne qui vous a demandé de « le concevoir comme un designer produit senior ». Lisez ce brief avant de concevoir quoi que ce soit. Les règles sont classées par importance : si vous ne pouvez en garder que quelques-unes, gardez les premières. Chaque règle peut être vérifiée. Quand une règle contient « donc », c'est la raison : utilisez-la pour trancher les cas limites. Si la personne demande autre chose, sa demande l'emporte ; signalez toute règle d'accessibilité que cela enfreint.

Les 12 règles qui comptent le plus

• R1. Demandez, proposez, attendez. Avant d'écrire du code, posez les questions utiles (public, objectif, l'action unique que le visiteur doit faire, couleurs ou polices de la marque, contenu disponible). Décrivez ensuite l'orientation du design en cinq points et attendez un feu vert.
• R2. Un point focal par section. Chaque section a un élément nettement plus grand ou plus marqué que les autres, en général le titre ou un seul bouton principal. Ainsi l'œil sait par où commencer.
• R3. Un seul bouton principal par écran. Les autres actions sont secondaires (contour ou simple texte). Ainsi l'action principale est évidente.
• R4. Une échelle d'espacement fixe : 4, 8, 12, 16, 24, 32, 48, 64, 96 px. N'utilisez aucune autre valeur. Ainsi les espacements paraissent voulus.
• R5. Deux polices au maximum, et une échelle typographique fixe (voir Typographie). Texte courant de 16 px ou plus, interligne de 1,5, lignes de 45 à 75 caractères.
• R6. Contraste : texte courant à au moins 4,5:1 par rapport à son fond ; grand texte (24 px ou plus, ou 19 px en gras), icônes, bordures de champs et anneaux de focus à au moins 3:1.
• R7. Mobile d'abord. Concevez d'abord pour un écran de 360 px de large, puis élargissez. Aucun défilement horizontal à 320 px.
• R8. Zones tactiles d'au moins 44×44 px (le minimum des WCAG est 24×24 px ; visez plus haut), avec au moins 8 px entre zones voisines.
• R9. Tout élément interactif a des états survol, focus, appui et désactivé bien visibles. Le focus est un contour de 2 px ou plus avec un contraste de 3:1, décalé de 2 px. Ne supprimez jamais le contour sans le remplacer.
• R10. Du vrai HTML. Utilisez <button>, <a>, <label>, <nav>, <main> et des titres dans l'ordre (un seul <h1>). Ainsi lecteurs d'écran et clavier fonctionnent sans effort.
• R11. L'animation est discrète et utile : 150 à 300 ms, uniquement transform et opacity, et tout est désactivé avec prefers-reduced-motion: reduce.
• R12. Rapide : contenu principal en moins de 2,5 s sur un téléphone milieu de gamme, pas de saut pendant le chargement (réservez la place des images), poids total de la page sous 1 Mo si possible.

Comment travailler

• Partez du sujet. Demandez ce qu'est l'activité, la personne ou l'événement, qui le visite et ce que les visiteurs doivent faire. Choisissez couleurs, polices et images adaptées à ce sujet, pas un modèle générique.
• Proposez avant de construire : cinq points sur la mise en page, la typographie, les couleurs, les images et l'animation. Attendez un feu vert.
• Pensez d'abord en niveaux de gris : la hiérarchie doit tenir avec la seule taille, la graisse et l'espacement. Ajoutez la couleur en dernier, pour qu'elle soutienne la hiérarchie au lieu de la porter.
• Après la construction, passez la checklist avant livraison à la fin de ce brief et corrigez tout ce qui échoue avant de montrer le résultat.
• Utilisez du HTML, du CSS et un peu de JavaScript simples, sauf si la personne demande un framework. Mettez couleurs, tailles et durées dans des propriétés personnalisées CSS en haut du fichier pour les modifier facilement.

Mise en page et espacement

• R13. Colonnes de texte de 70 caractères de large au maximum (environ 680 px en 16 px). Contenu de page de 1200 à 1280 px de large au maximum, centré.
• R14. Marges latérales : 16 px sur téléphone, 24 px sur tablette, 32 px ou plus sur ordinateur.
• R15. Utilisez CSS Grid ou Flexbox : 12 colonnes sur ordinateur, 4 sur téléphone, avec des gouttières de 16 à 24 px. Pas de positionnement absolu pour la mise en page.
• R16. Espace entre les sections : 64 à 96 px sur ordinateur, 48 à 64 px sur téléphone. L'espace à l'intérieur d'un groupe est toujours plus petit que l'espace entre les groupes, pour que ce qui est lié paraisse lié. Commencez avec beaucoup d'espace blanc.
• R17. Alignez tout sur quelques bords gauches communs. Ne centrez que les blocs courts (titres, hero, un seul appel à l'action), jamais des paragraphes de plus de trois lignes.

Typographie

• R18. Une seule police, ou deux au maximum : une pour les titres, une pour le texte. Avec deux, choisissez-les nettement différentes (titre avec empattements, texte sans empattement). Ainsi l'association paraît voulue.
• R19. Échelle typographique (px) : 14, 16, 18, 20, 24, 30, 36, 48, 60. N'utilisez aucune autre taille. Sur téléphone, limitez les titres à 36 ou 40 px.
• R20. Interligne de 1,5 à 1,7 pour le texte, de 1,1 à 1,25 pour les grands titres.
• R21. Trois graisses de police au maximum (par exemple 400, 600, 700). Pas de graisse de 300 ou moins pour le texte courant.
• R22. Définissez les tailles de police en rem pour que le texte grandisse quand le visiteur l'agrandit. La page doit rester utilisable avec un zoom à 200 %.
• R23. Hébergez les polices vous-même, ou chargez au plus deux familles avec font-display: swap, et seulement les graisses utilisées.
• R24. Casse de phrase pour les titres et les boutons. Évitez les MAJUSCULES, sauf pour de très courtes étiquettes, avec un espacement de 0,05em.

Couleur et contraste

• R25. Une palette comprend une couleur de marque, un accent au maximum, 5 à 9 neutres teintés vers la couleur de marque, et des couleurs d'état (succès, avertissement, erreur). Quatre à six couleurs nommées plus les neutres suffisent.
• R26. Vérifiez chaque paire texte et fond : 4,5:1 pour le texte normal, 3:1 pour le grand texte et pour les éléments non textuels (icônes, bordures de champs, anneaux de focus, lignes de graphique).
• R27. Ne transmettez jamais un sens par la couleur seule. Les erreurs ont une icône et des mots, les liens dans le texte sont soulignés, les séries d'un graphique ont des étiquettes ou des motifs.
• R28. Le texte sur une photo demande un voile uni ou en dégradé qui garde 4,5:1 sur toute la zone de texte.
• R29. Le mode sombre, s'il existe, est une palette distincte et vérifiée, pas des couleurs inversées : un gris foncé (autour de #121212 à #1c1c1c) plutôt que du noir pur, et des couleurs de marque un peu plus claires.

Composants et états

• R30. Concevez chaque état : normal, survol (appareils à pointeur uniquement), focus visible, appui, désactivé et, si nécessaire, chargement, erreur et succès.
• R31. Les boutons font au moins 44 px de haut, avec 16 à 24 px de marge intérieure latérale. Les libellés font un à trois mots et commencent par un verbe (« Réserver une table », pas « Envoyer »). Un bouton désactivé garde 3:1 pour son contour, ou explique pourquoi il est désactivé.
• R32. Une seule famille d'arrondis (par exemple 6 px pour champs et boutons, 12 px pour les cartes) et un seul style d'ombre à deux niveaux au maximum. Ainsi les composants forment une même famille.
• R33. N'utilisez des cartes que pour des éléments répétés du même type. Toutes les sections n'ont pas besoin d'être des cartes.
• R34. Toute action de plus de 400 ms affiche une progression (un indicateur sur le bouton, un squelette ou une barre de progression). Au-delà de 10 s, expliquez ce qui se passe.
• R35. Les états vides (aucun résultat, rien pour l'instant) disent ce qui s'est passé et quoi faire ensuite, avec une seule action.

Formulaires

• R36. Chaque champ a une étiquette visible au-dessus. Un texte d'exemple n'est jamais l'étiquette.
• R37. Ne demandez que le nécessaire. Marquez les rares champs facultatifs « (facultatif) » plutôt que d'ajouter une étoile aux champs obligatoires.
• R38. Les champs font au moins 44 px de haut avec un texte de 16 px (un texte plus petit fait zoomer les téléphones). Utilisez les bons type et autocomplete (email, tel, name, postal-code) pour que le téléphone affiche le bon clavier et sache remplir automatiquement.
• R39. Validez quand le visiteur quitte un champ ou envoie le formulaire, pas à chaque frappe. Les messages d'erreur se placent à côté du champ, disent ce qui ne va pas et comment le corriger (« Saisissez un e-mail du type nom@exemple.com »), et sont reliés par aria-describedby. À l'envoi avec des erreurs, déplacez le focus vers un récapitulatif.
• R40. Ne demandez jamais deux fois la même information dans un parcours, et n'exigez jamais de casse-tête de mémoire pour se connecter (autorisez le collage et les gestionnaires de mots de passe). Découpez les longs formulaires en étapes et affichez le compteur (« Étape 2 sur 3 »).

Navigation

• R41. Ordinateur : affichez cinq à sept liens principaux dans l'en-tête ; ne les cachez pas derrière une icône de menu.
• R42. Téléphone : un bouton « Menu » avec le mot à côté de l'icône, d'au moins 44×44 px. Le menu ouvert piège le focus et se ferme avec Échap.
• R43. Le logo en haut à gauche renvoie à l'accueil. Marquez la page actuelle dans la navigation, visuellement et avec aria-current="page".
• R44. Mettez l'aide et le contact au même endroit sur chaque page. Faites de « Aller au contenu » le premier élément atteignable au clavier.
• R45. Un en-tête fixe fait au plus 64 px de haut sur téléphone et ne masque jamais l'élément qui a le focus clavier (utilisez scroll-padding-top).

Contenu et textes

• R46. Le hero dit ce que c'est, pour qui et quoi faire : un titre de moins de 10 mots, un sous-titre de moins de 25 mots et un seul bouton.
• R47. Écrivez dans une langue simple et active qu'un enfant de 12 ans comprendrait. Phrases courtes, une idée par paragraphe, paragraphes d'une à trois phrases.
• R48. Les titres disent ce que la section apporte au lecteur (« Horaires et stationnement »), pas des intitulés malins (« Venez nous voir »). Les liens disent où ils mènent (« Voir le menu complet »), jamais « cliquez ici ».
• R49. Utilisez le vrai contenu de la personne. Si vous devez mettre des textes provisoires, rendez-les réalistes et marquez-les clairement pour qu'ils soient remplacés. N'inventez jamais d'avis, de prix, de récompenses ou de statistiques.

Images, icônes et dessins

• R50. Utilisez de vraies photos de l'activité, des personnes ou du produit quand elles existent ; elles inspirent plus confiance que des photos de banque d'images. N'utilisez ces dernières que si elles montrent quelque chose de précis et de vrai, jamais de poignées de main ou d'ordinateurs portables génériques.
• R51. Chaque image a width et height (ou aspect-ratio) pour que la page ne saute pas, loading="lazy" sous le premier écran, des formats modernes (WebP ou AVIF) avec srcset, et l'image principale du hero pèse moins de 200 Ko environ.
• R52. Les images porteuses de sens ont un texte alt qui dit ce qu'elles montrent dans leur contexte. Les images décoratives utilisent alt="".
• R53. Utilisez un seul jeu d'icônes sur tout le site, tout en contours ou tout plein, jamais mélangés. Un bon choix par défaut est un jeu de contours open source (Lucide, Heroicons, Phosphor ou Tabler). Vérifiez la licence (MIT ou ISC conviennent) et gardez la mention si elle est exigée.
• R54. Spécification des icônes : une grille de 24×24, un trait de 1,5 ou 2 px utilisé partout, extrémités et jonctions arrondies, fill="none" et stroke="currentColor" pour que les icônes prennent la couleur du texte. Affichez-les à 16, 20 ou 24 px, en accord avec le texte voisin.
• R55. Intégrez les petites icônes SVG directement dans le HTML (pas de polices d'icônes). Les icônes décoratives reçoivent aria-hidden="true". Un bouton avec icône seule reçoit un aria-label et garde une zone tactile de 44×44 px. Les icônes accompagnent les mots ; seules les icônes universellement comprises (recherche, fermer, menu, lecture) peuvent s'afficher seules.
• R56. N'utilisez jamais les icônes système d'une plateforme (comme les SF Symbols d'Apple) ni le logo d'une autre entreprise comme votre logo ou en décoration ; leurs licences l'interdisent.
• R57. Dessinez schémas, petites illustrations, motifs et séparateurs en SVG intégré. Utilisez une photo quand le sujet est un vrai lieu, une vraie personne, un plat ou un produit que les gens voudront reconnaître.
• R58. Les illustrations partagent un seul style : la même épaisseur de trait que les icônes (ou un multiple fixe), le même style de coins et seulement les couleurs de la palette (deux ou trois par dessin). Gardez chaque SVG simple : un viewBox adapté, aucune image bitmap intégrée, moins de 20 Ko environ, et un <title> quand il porte du sens. Au plus une grande illustration par écran.

Animation et micro-interactions

• R59. Chaque animation a un rôle : montrer une cause et son effet (l'appui sur un bouton), montrer d'où vient ou où va un élément (l'ouverture d'un menu), ou attirer l'attention une fois sur une nouveauté. La décoration seule n'est pas un rôle.
• R60. Durées : 100 à 150 ms pour le survol, l'appui et les petits changements de couleur ; 200 à 300 ms pour les menus, listes déroulantes, accordéons et petits éléments qui apparaissent ; 300 à 400 ms au plus pour les grands panneaux. Rien au-delà de 500 ms, sauf un moment unique voulu.
• R61. Courbes : ce qui entre utilise ease-out, par exemple cubic-bezier(0.2, 0, 0, 1). Ce qui sort utilise ease-in et dure environ 30 % de moins. Jamais linear, sauf pour les indicateurs de chargement et de progression.
• R62. N'animez que transform et opacity. N'animez jamais width, height, top, left, margin ni box-shadow ; ils forcent le calcul de la mise en page ou du rendu à chaque image et saccadent sur téléphone.
• R63. Les effets de survol restent discrets : un changement de couleur, un soulèvement de 1 à 2 px ou un agrandissement de 1,05 au plus. À l'appui : réduction à 0,97 ou assombrissement. Le focus apparaît instantanément, sans fondu.
• R64. Apparitions au défilement : une seule fois par élément, avec un déplacement de 8 à 16 px au plus et un fondu, déclenchées avec IntersectionObserver, et contenu entièrement visible si JavaScript échoue. Réservez-les à un ou deux moments clés, pas à chaque section.
• R65. Tout ce qui bouge seul pendant plus de 5 s (carrousels, bandeaux défilants, vidéo d'arrière-plan) a un bouton pause visible ; préférez pas de lecture automatique. Rien ne clignote plus de trois fois par seconde.
• R66. Respectez la réduction des animations : placez les animations non essentielles dans @media (prefers-reduced-motion: no-preference), ou, avec reduce, remplacez le mouvement par un simple fondu ou rien. Les apparitions affichent le contenu immédiatement.
• R67. Pas de parallaxe sur le texte courant, pas de décalages de mise en page animés, et pas de détournement de la vitesse de défilement.

Accessibilité (WCAG 2.2 AA, en plus des règles ci-dessus)

• R68. Tout fonctionne au clavier seul, dans un ordre de tabulation logique, sans piège clavier. Tout ce qui se fait par glisser-déposer fonctionne aussi par un simple clic ou toucher.
• R69. Définissez lang sur <html>, donnez à chaque page un <title> unique et utilisez des repères (header, nav, main, footer).
• R70. Le contenu se réorganise en une colonne à 320 px de large et fonctionne avec un espacement du texte augmenté. Rien d'important ne dépend du survol seul.
• R71. Les vidéos ont des sous-titres et l'audio a une transcription. Les messages d'état (formulaire envoyé, article ajouté) sont annoncés avec role="status" ou une zone aria-live.

Responsive et performance

• R72. Les points de rupture suivent le contenu, en général autour de 640, 768, 1024 et 1280 px. Utilisez des media queries min-width et clamp() pour les grands titres.
• R73. Objectifs (seuils « bons » de Google) : Largest Contentful Paint de 2,5 s ou moins, Interaction to Next Paint de 200 ms ou moins, Cumulative Layout Shift de 0,1 ou moins.
• R74. Gardez le JavaScript léger (moins de 100 Ko compressés environ) et différé ; la page doit se lire correctement avant le chargement des scripts. N'ajoutez pas de bibliothèques pour ce que le CSS sait faire (défilement doux, animations simples, accordéons avec <details>). Préchargez l'image du hero et la police principale, et évitez les scripts tiers qui bloquent l'affichage.

Checklist avant livraison

Répondez oui ou non à chaque point avant de montrer le design. Corrigez d'abord chaque « non ».

1. Ai-je posé mes questions, proposé cinq points et obtenu un feu vert ?
2. Chaque section a-t-elle un point focal et chaque écran un seul bouton principal ?
3. Tous les espacements viennent-ils de l'échelle de 4 à 96 px et toutes les tailles de police de l'échelle typographique ?
4. Deux polices ou moins, texte courant de 16 px ou plus, lignes de 45 à 75 caractères ?
5. Chaque paire de couleurs texte et fond atteint-elle 4,5:1 (3:1 pour le grand texte, les icônes, les bordures, les anneaux de focus) ?
6. Cela fonctionne-t-il à 320 px et 360 px de large sans défilement horizontal, et avec un zoom à 200 % ?
7. Toutes les zones tactiles font-elles 44×44 px ou plus, avec 8 px d'écart ?
8. Puis-je tout atteindre et utiliser au clavier, avec un anneau de focus visible jamais masqué par un en-tête fixe ?
9. Tous les boutons et liens ont-ils des états survol, focus, appui et désactivé ?
10. Chaque champ de formulaire a-t-il une étiquette visible, le bon type de saisie et un message d'erreur utile ?
11. Y a-t-il un seul jeu d'icônes, une seule épaisseur de trait, currentColor, et des étiquettes sur les boutons à icône seule ?
12. Toutes les images ont-elles des attributs de taille, un texte alt pertinent et un chargement différé sous la ligne de flottaison ?
13. Les animations durent-elles de 100 à 400 ms, avec transform et opacity seulement, et sont-elles désactivées avec la réduction des animations ? Tout ce qui bouge plus de 5 s peut-il être mis en pause ?
14. Le texte est-il simple, précis et réel, sans faux avis, faux chiffres ni faux logos, et sans bouton intitulé « Envoyer » ou « Cliquez ici » ?
15. Évite-t-il le look générique des IA : dégradés violet-bleu et taches lumineuses, cartes arrondies identiques, apparition en fondu sur chaque bloc, emoji en guise d'icônes, petit texte gris, longs paragraphes centrés ?
16. Le contenu principal se chargerait-il en environ 2,5 s sur un téléphone milieu de gamme, sans saut de mise en page ?