iyuyoung/young-design

Young Design

Créez des sites web qui semblent jeunes, écrits et orientés produit sans devenir enfantins, décoratifs ou génériques. Considérez la qualité visuelle et la qualité d'implémentation comme un seul système. Adaptez l'expression visuelle au produit plutôt que d'appliquer un style maison fixe.

Sélectionnez le mode de tâche

Choisissez un mode avant de travailler :

• Direction : définir le langage visuel, la hiérarchie des pages, les jetons et les composants représentatifs.
• Design : créer une page complète ou une maquette avec un contenu réaliste et une intention responsive.
• Implémentation : traduire une direction ou une référence approuvée en code de production.
• Raffinement : auditer un site existant, identifier les lacunes les plus impactantes et l'améliorer sans déstabiliser le comportement.
• Révision : fournir des commentaires visuels fondés sur des preuves sans modifier les fichiers sauf demande.

Si l'utilisateur demande uniquement du design, n'implémentez pas le projet de production. Si l'utilisateur demande de construire ou d'optimiser le site, menez le travail jusqu'à la vérification.

Établissez le contrat de conception

Avant de choisir des couleurs ou des composants, déterminez :

1. Public — qui arrive et dans quel état émotionnel.
2. Promesse — la seule chose que le premier viewport doit rendre claire.
3. Action principale — l'étape suivante la plus précieuse.
4. Personnalité — trois adjectifs utiles et trois qualités à éviter.
5. Contraintes — framework, assets de marque, SEO, performance, accessibilité, impression ou exigences de déploiement.

Déduisez-les du dépôt, du brief et des décisions antérieures lorsque c'est possible. Ne demandez que lorsqu'une réponse manquante modifierait considérablement le design.

Définissez ensuite une empreinte de design de 1 à 5 pour la chaleur, la fantaisie, la tactilité, la densité, la précision et le contraste visuel. Enregistrez les scores et une phrase expliquant la direction résultante. Ne donnez pas par défaut la même empreinte à des produits sans lien.

Utilisez un texte de produit réaliste et des données représentatives. Le lorem ipsum, les tableaux de bord génériques et les preuves sociales inventées masquent les problèmes de hiérarchie.

Construisez le système visuel avant la page

Lisez references/visual-language.md lorsque vous définissez ou modifiez l'apparence. Dérivez un motif visuel dominant du produit, du public ou du workflow ; le papier et le collage sont des options, pas des valeurs par défaut.

Créez un petit système cohérent :

• rôles de couleur, pas un sac de couleurs ;
• typographie d'affichage, de corps et annotation optionnelle ;
• rythme d'espacement et largeurs de contenu ;
• règles de bordure, rayon, ombre et matière ;
• langage des icônes et illustrations ;
• comportement d'interaction et de mouvement ;
• règles de composition pour desktop, tablette et mobile.

Utilisez des jetons de design ou des variables partagées. Évitez de styliser chaque section comme une affiche isolée.

Préservez la distinction entre :

• couche marque — voix, marque, couleurs, typographie reconnaissables ;
• couche produit — flux de tâches, contrôles, états, commentaires ;
• couche contenu — hiérarchie, analyse, confiance, copy SEO ;
• couche matière — papier, ruban adhésif, crayon, texture ou accents de collage.

Les détails de matière doivent soutenir la hiérarchie. Gardez-les suffisamment clairsemés pour que le produit reste crédible et utilisable.

Composez autour du moment produit

Ne vous contentez pas par défaut d'un titre à gauche et d'une capture d'écran de tableau de bord arbitraire à droite. Identifiez le moment qui prouve que le produit fonctionne : une recommandation, un aperçu, un résultat, une transformation, une feuille de travail, une comparaison ou une prochaine étape.

Le premier viewport doit généralement contenir :

• une promesse spécifique ;
• un moment produit lisible ;
• une action principale ;
• des indices concis de confiance ou de contrainte ;
• suffisamment d'asymétrie ou de caractère matériel pour sembler écrit.

Faites en sorte que les sections secondaires répondent à des questions distinctes. Ne répétez pas la même grille de cartes sous différents titres.

Lisez references/component-patterns.md lorsque vous choisissez des motifs hero, chooser, card, tool, directory ou editorial.

Livrez le bon artefact

Lisez references/output-contracts.md et suivez le contrat pour le mode de tâche sélectionné. Rendez les hypothèses, les décisions, l'intention responsive et les preuves de vérification suffisamment explicites pour qu'un autre designer ou ingénieur puisse continuer le travail.

Implémentez en tant que système réel

Lisez references/implementation-playbook.md avant de modifier un dépôt ou de traduire une référence en code.

Lorsque vous travaillez dans un projet existant :

1. Inspectez le framework, les routes, les layouts partagés, les jetons, les composants, les tests et les assets générés.
2. Séparez les modifications intentionnelles de la source du bruit de formatage et de sortie généré.
3. Préservez les contrats de comportement, les URL, les hooks d'analyse, les sélecteurs de test, la sémantique et les règles d'impression.
4. Ajoutez ou révisez les fondations partagées avant les surcharges spécifiques aux pages.
5. Implémentez des composants réutilisables pour les motifs visuels et comportementaux répétés.
6. Vérifiez tous les états significatifs : initial, sélectionné, survol, focus, chargement, vide, erreur, succès et impression le cas échéant.
7. Validez aux largeurs desktop, tablette et mobile étroit.

Préférez les polices locales ou auto-hébergées, les marques SVG et une bibliothèque d'icônes cohérente. N'utilisez des images générées que lorsqu'elles ont une véritable valeur narrative. Ne compensez pas une hiérarchie faible par des images décoratives.

Raffinez par ordre d'impact

Lorsqu'un site semble « vieux », « générique » ou « pas comme le design », corrigez les problèmes dans cet ordre :

1. caractère et hiérarchie typographiques ;
2. composition du premier viewport ;
3. rythme d'espacement et densité du contenu ;
4. géométrie des composants et états d'interaction ;
5. rôles de couleur et contraste ;
6. détails de matière et micro-décoration ;
7. mouvement et finition.

Ne commencez pas par ajouter des ombres, des dégradés, des blobs ou des animations. Ceux-ci réparent rarement une composition faible.

Vérifiez avant de déclarer terminé

Lisez references/quality-gates.md pour l'implémentation ou la révision finale. Lisez references/review-rubric.md lorsque vous décidez si un résultat est prêt à être présenté, livré ou publié.

Au minimum, vérifiez :

• aucun débordement horizontal accidentel de la page ;
• le texte de l'interface visible est d'au moins 14 px sauf s'il s'agit d'un artwork non essentiel ;
• le contraste du texte normal atteint 4,5:1 et le grand texte atteint 3:1 ;
• le focus clavier est clair et les contrôles interactifs sont confortablement tactiles ;
• le mobile est recomposé plutôt que simplement réduit ;
• la typographie, les rayons, les ombres, les icônes et les matières restent cohérents ;
• le premier viewport implémenté préserve la hiérarchie du design approuvé ;
• la fonctionnalité, la structure SEO, les fichiers générés, les téléchargements et la sortie d'impression fonctionnent toujours ;
• les vérifications de type, les tests, la construction et les vérifications du navigateur passent lorsque le projet les fournit.

Exigez un score d'au moins 85/100 sans blocage critique avant de déclarer un résultat prêt pour la publication. Utilisez le score à des fins de diagnostic ; ne le gonflez pas pour satisfaire le seuil.

Si l'exécution du navigateur n'est pas disponible localement, indiquez la limitation environnementale et utilisez le CI du projet plutôt que de prétendre à une vérification visuelle.

Évitez les modes d'échec de Young Design

Ne par défaut jamais à :

• les dégradés de startup génériques et les cartes en verre flottantes ;
• un empattement old-fashioned comme principale source de « personnalité » ;
• des formes de pilules excessives, des rayons surdimensionnés ou des grilles de cartes uniformes ;
• des couleurs pastel partout avec un contraste insuffisant ;
• des rotations aléatoires, du ruban adhésif, des gribouillages ou des textures de papier sur chaque élément ;
• des métadonnées et étiquettes minuscules utilisées pour fabriquer de la sophistication ;
• des mises en page mobiles qui cachent la valeur principale du produit ou forcent un défilement horizontal au niveau de la page ;
• la réécriture de la logique fonctionnelle du produit uniquement pour s'adapter à une refonte visuelle ;
• copier littéralement une référence à travers des marques sans lien.
• appliquer du papier chaud, des couleurs pastel ou des cartes arrondies lorsque le domaine nécessite une expression plus nette, plus dense ou plus technique.

Le résultat doit sembler écrit, utile et actuel : amical sans être enfantin, expressif sans être bruyant, et poli sans être stérile.