Directions en style tiles
Pourquoi : Un moodboard est trop vague pour construire quelque chose et une maquette de page complète est trop littérale : les gens commencent à discuter d'une structure qui a déjà été décidée à l'étape 4. Les style tiles (Samantha Warren) et les collages d'éléments (Dan Mall) se situent entre les deux : ils montrent les couleurs, la typographie et les éléments d'interface sans mise en page, de sorte que la discussion reste sur l'apparence et la sensation. Avec l'IA, les variantes ne coûtent quasiment rien, donc le choix est le goulot d'étranglement. Cette étape étend donc délibérément les directions et donne au choix un critère de mesure.
Nécessite : brand.md, taste-profile.md, anti-defaults.md, sitemap.md et un wireframe (pour le contenu), personas.md.
Produit : 06-directions/tiles/r<round>/*.html, 06-directions/direction.md.
1. Choisir les axes
Nommez deux ou trois axes le long desquels les directions diffèrent, tirés des points ouverts du profil de goût. Exemples : calme ↔ frappant, dense ↔ aéré, chaud ↔ froid, éditorial ↔ technique, plat ↔ texturé. Placez chaque direction à un point différent. Trois directions qui ne diffèrent que par la couleur d'accent sont une seule direction.
Si l'étape A du moodboard a produit des planches séparées, partez de celles-ci.
2. Construire trois tiles
Un fichier HTML autonome par direction. Chaque tile montre :
- un nom et une phrase sur l'idée derrière (tirée de la marque, pas d'une tendance)
- une palette de couleurs sous forme d'échantillons avec des rôles (fond, texte, accent, action) et le rapport de contraste du texte et des boutons (WCAG AA : 4,5:1 pour le texte)
- typographie : police d'affichage et de corps avec quelques tailles, un vrai titre et un paragraphe tirés des brouillons de contenu
- éléments d'interface : bouton principal et secondaire, lien, champ de saisie, barre de navigation, une carte
- un fragment de hero (pas une section hero complète) et un autre élément caractéristique : une citation, un nombre, une liste, une ligne de prix
- imagerie : échantillons de style ou description du traitement de la photo, de l'illustration ou de l'écran
- un détail que seule cette marque aurait (une forme du logo, un terme du métier, une unité de mesure)
Règles :
- Lisez
anti-defaults.mden premier. Polices uniquement à partir de sources avec une licence utilisable (Google Fonts, OFL, les polices sous licence du client) ; notez la licence et la taille du fichier. - Contenu réel du projet, jamais de lorem ipsum. Le texte d'échantillon de l'interface utilise uniquement des faits provenant de
facts.md: pas de fonctionnalités, offres, disponibilité ou chiffres inventés. - Pas de mise en page complète, pas d'arborescence de navigation complète, pas de pied de page.
- Rendez chaque tile à 390 px et 1440 px et regardez-la avant de la montrer.
3. Évaluer
Sur la page de révision, montrez les trois tiles côte à côte (ou l'une après l'autre sur mobile). Pour chaque tile :
- Test de mots : une question par tile. La personne (et si possible des collègues) choisit trois mots (cases à cocher,
data-max="3") dans une liste qui mélange les attributs de la marque et leurs pôles opposés. Comptez quel camp gagne. - Élément par élément : une question par élément (couleur, typographie, boutons, imagerie, détail) : de quel tile doit-il provenir, A, B, C ou aucun, avec un champ de raison. Cela maintient la feuille à environ huit questions.
- Test de cinq secondes optionnel : montrez un tile pendant cinq secondes à une personne extérieure au projet et demandez : « Quel genre d'entreprise est-ce ? Quels trois mots vous viennent à l'esprit ? »
4. Fusionner
À partir des évaluations, écrivez direction.md : les éléments choisis par catégorie, ce qui provient de quel tile et pourquoi, et ce qui reste ouvert pour l'étape 7. Si la fusion est substantielle, construisez un tile combiné et montrez-le à nouveau au round 2. Ne faites pas plus de trois rounds ; si cela ne converge pas, le problème se situe généralement dans les attributs de la marque, alors revenez à l'étape 3.
Fait lorsque direction.md est confirmé et que le test de mots pour la direction combinée pointe vers les attributs de la marque.