cubxxw/deepen-design

Approfondir le Design

Créez un design plus personnel, pas simplement un design plus décoré.

Lisez references/recursive-tree.md avant de commencer. Si l'utilisateur réagit à un résultat insatisfaisant antérieur, lisez également references/failure-patterns.md.

Distinction fondamentale

La granularité a des niveaux :

1. vérité du produit et croyance souhaitée ;
2. théorème de marque et métaphore narrative ;
3. architecture de page et tempo ;
4. composition de section et interaction ;
5. langage des composants ;
6. typographie, couleur, espacement, bordures, ombres et polissage du mouvement.

Descendez toujours dans cet ordre. Un ensemble de tokens plus grand, plus d'ombres ou plus de micro-interactions ne constitue pas un design plus profond lorsque les niveaux 1 à 4 restent inchangés.

Commencez par des preuves rendues

Pour une interface existante :

1. Conservez l'implémentation actuelle et les modifications de l'utilisateur.
2. Capturez la vue actuelle du premier écran (desktop et mobile).
3. Inspectez au moins deux sections ultérieures et une interaction significative.
4. Énoncez ce qui fonctionne objectivement.
5. Expliquez pourquoi la page est oubliable en cinq secondes.
6. Séparez les contraintes fonctionnelles des jugements de goût.

Considérez « toujours médiocre » comme un test de design échoué. Ne défendez pas un score antérieur ou ne continuez pas dans la même direction par défaut.

Construisez un arbre binaire borné

À chaque nœud changeant de direction, créez exactement deux branches matériellement différentes. Une branche valide modifie l'argument visuel, la structure de l'information ou l'interaction signature. Un changement de palette n'est pas une branche.

Utilisez la recherche par faisceau :

• développez deux branches ;
• rendez les deux visibles à la fidélité utile la moins coûteuse ;
• comparez-les par paires ;
• conservez la branche la plus forte et un challenger crédible ;
• descendez d'un niveau ;
• revenez en arrière lorsque les deux enfants héritent de la même faiblesse.

Ne construisez pas chaque feuille possible. Investissez la profondeur dans les décisions importantes, pas dans le volume combinatoire.

Portes de profondeur requises

Profondeur 0 : invariant produit

Écrivez :

• le visiteur ;
• le moment de tension ;
• ce qu'ils doivent comprendre, ressentir et faire ;
• la vérité du produit que les concurrents ne peuvent pas revendiquer honnêtement de la même manière.

Ne mettez pas en œuvre tant que cela n'est pas spécifique.

Profondeur 1 : deux théorèmes de marque

Créez deux positions en une phrase avec des implications différentes. Chacune doit fournir :

• une métaphore narrative ;
• une grammaire spatiale ;
• une priorité de contenu ;
• une mécanique signature ;
• une contre-référence explicite : ce à quoi cette direction ne doit pas ressembler.

Recherchez trois à cinq références actuelles et pertinentes lorsque des recherches externes sont disponibles. Extrayez des mécanismes, pas un collage de styles. Aucun candidat ne peut copier l'identité visuelle complète d'une seule référence.

Profondeur 2 : deux architectures

Pour le théorème principal, divisez la page en deux parcours différents. Définissez le travail, la famille de disposition, le tempo, l'événement de contraste, la preuve et l'action de sortie pour chaque section.

Rejetez une architecture lorsque :

• la plupart des sections répètent « grand titre + paragraphe + image/carte » ;
• la preuve du produit est interchangeable avec une capture d'écran SaaS générique ;
• la suppression du logo rend la catégorie ou la marque méconnaissable ;
• la seule distinction visible est la palette ou la typographie.

Profondeur 3 : prototypes visuels

Rendez les deux directions survivantes avant la mise en œuvre complète. Préférez :

• deux prototypes du premier écran ;
• une section représentative de mi-page pour chacun ;
• d'abord le desktop, puis une vérification de l'affaissement mobile.

Comparez les captures d'écran côte à côte. Ne sélectionnez pas uniquement sur la base de la prose.

Si l'utilisateur est disponible et que les directions codent des goûts véritablement différents, posez une question de bifurcation concise. Si l'utilisateur a demandé l'autonomie, choisissez à partir des preuves et conservez le challenger.

Profondeur 4 : système et implémentation

Maintenant seulement, définissez :

• les rôles et l'échelle typographiques ;
• la palette et le contraste ;
• le langage des actifs ;
• la grille, l'espacement et les règles de forme ;
• la sémantique du mouvement ;
• les primitives de composants.

Utilisez ui-ux-pro-max pour les données pertinentes du système de design lorsqu'elles sont disponibles. Utilisez design-taste-frontend après la sélection de la direction comme un linter de pré-vérification. Ses règles peuvent rejeter les clichés, mais elles ne peuvent pas choisir le concept.

Profondeur 5 : micro-détails

Ajustez les bordures, les ombres, le matériau, le survol, l'espacement optique et les performances uniquement après que les portes de direction et d'architecture sont passées.

Chaque micro-changement doit nommer la décision parente qu'il renforce. Supprimez-le lorsqu'il n'altère pas la hiérarchie, le sens, le feedback ou la cohérence matérielle.

Évaluez la bonne chose

Tenez deux registres séparés.

Porte fonctionnelle

• vérité du produit ;
• comportement réactif ;
• accessibilité ;
• performances ;
• santé du code et des tests.

Ce sont des contraintes de réussite/échec. Elles ne prouvent pas le goût.

Jugement de design

• compréhension en cinq secondes ;
• caractère distinctif sans logo ;
• mémorisation visuelle après un délai ;
• distance par rapport au modèle de catégorie ;
• visibilité de la mécanique produit ;
• contraste et tempo sur toute la page ;
• préférence utilisateur.

Utilisez des preuves par paires issues du workflow de référence. N'attribuez pas un 95/100 ou 98/100 absolu à partir d'une rubrique auto-établie. Si l'utilisateur dit que le résultat est générique, l'affirmation de distinction a échoué, quel que soit le score Lighthouse.

Terminez avec des preuves

Retournez :

1. l'arbre exploré et l'endroit où il a effectué un retour en arrière ;
2. la direction gagnante et le challenger survivant ;
3. des captures d'écran avant/A/B ou une preuve visuelle équivalente ;
4. les trois plus grands changements visibles, classés par profondeur ;
5. les résultats des portes fonctionnelles ;
6. les décisions non résolues concernant le goût ou le produit.

Ne décrivez pas le volume de micro-détails comme le résultat principal. Le résultat est un argument de design reconnaissable qui survit sans le logo.