Direcciones como tiles de estilo
Por qué: Un moodboard es demasiado vago para construir sobre él y un mockup de página completa es demasiado literal: la gente empieza a discutir la estructura que ya se decidió en el paso 4. Los tiles de estilo (Samantha Warren) y los collages de elementos (Dan Mall) se sitúan en medio: muestran colores, tipografía y elementos de interfaz sin maquetación de página, por lo que la discusión se mantiene en la apariencia y la sensación. Con IA, las variantes cuestan casi nada, por lo que la elección es el cuello de botella. Este paso, por lo tanto, separa las direcciones a propósito y le da a la elección un punto de referencia.
Necesita: brand.md, taste-profile.md, anti-defaults.md, sitemap.md y un wireframe (para el texto), personas.md.
Produce: 06-directions/tiles/r<round>/*.html, 06-directions/direction.md.
1. Elegir los ejes
Nombra dos o tres ejes a lo largo de los cuales las direcciones difieren, tomados de puntos abiertos en el perfil de gusto. Ejemplos: tranquilo ↔ llamativo, denso ↔ aireado, cálido ↔ frío, editorial ↔ técnico, plano ↔ texturizado. Coloca cada dirección en un punto diferente. Tres direcciones que solo difieren en el color de acento son una sola dirección.
Si la etapa A del moodboard produjo tableros separados, comienza desde ellos.
2. Construir tres tiles
Un archivo HTML autónomo por dirección. Cada tile muestra:
- un nombre y una frase sobre la idea detrás de él (de la marca, no de una tendencia)
- paleta de colores como muestras con roles (fondo, texto, acento, acción) y relación de contraste del texto y botones (WCAG AA: 4.5:1 para texto)
- tipografía: fuente display y de texto con algunos tamaños, titular real y párrafo de los borradores de texto
- elementos de interfaz: botón primario y secundario, enlace, campo de entrada, barra de navegación, una tarjeta
- un fragmento de héroe (no una sección de héroe completa) y otro elemento característico: una cita, un número, una lista, una línea de precio
- imágenes: muestras de estilo o una descripción del tratamiento de foto, ilustración o pantalla
- un detalle que solo esta marca tendría (una forma del logotipo, un término del oficio, una unidad de medida)
Reglas:
- Lee
anti-defaults.mdprimero. Fuentes solo de fuentes con una licencia utilizable (Google Fonts, OFL, las fuentes con licencia del cliente); anota la licencia y el tamaño del archivo. - Texto real del proyecto, nunca lorem ipsum. El texto de muestra de la interfaz usa solo hechos de
facts.md: sin características, ofertas, disponibilidad o números inventados. - Sin maquetación de página completa, sin árbol de navegación completo, sin pie de página.
- Renderiza cada tile a 390 px y 1440 px y míralo antes de mostrarlo.
3. Calificar
En la página de revisión, muestra los tres tiles uno al lado del otro (o uno tras otro en móvil). Para cada tile:
- Prueba de palabras: una pregunta por tile. La persona (y si es posible colegas) eligen tres palabras (casillas de verificación,
data-max="3") de una lista que mezcla los atributos de la marca y sus polos opuestos. Cuenta qué lado gana. - Elemento por elemento: una pregunta por elemento (color, tipografía, botones, imágenes, detalle): de qué tile debe provenir, A, B, C o ninguno, con un campo de motivo. Eso mantiene la hoja en unas ocho preguntas.
- Prueba de cinco segundos opcional: muestra un tile durante cinco segundos a alguien fuera del proyecto y pregunta "¿Qué tipo de empresa es esta? ¿Qué tres palabras te vienen a la mente?"
4. Fusionar
A partir de las calificaciones, escribe direction.md: los elementos elegidos por categoría, de qué tile provienen y por qué, y qué queda abierto para el paso 7. Si la fusión es sustancial, construye un tile combinado y muéstralo de nuevo en la ronda 2. No ejecutes más de tres rondas; si no converge, el problema suele estar en los atributos de la marca, por lo que debes volver al paso 3.
Hecho cuando direction.md está confirmado y la prueba de palabras para la dirección combinada apunta a los atributos de la marca.