Resultado visible
Crearás una auditoría visual que separa identidad, jerarquía y utilidad. Corregirás un patrón cada vez sin pedir un rediseño completo.
Estado roto
Usa una copia con estos síntomas: degradado violeta sin relación con la marca, todas las secciones dentro de tarjetas, tres botones principales, iconos sin etiqueta, selectores nativos sin coherencia, texto intercambiable y animación en cada bloque.
Reproduce y observa
Haz capturas a 390 y 1440 px. Oculta el logotipo y pregunta a otra persona de qué sector parece la web. Marca como defecto todo elemento que podría pertenecer sin cambios a diez negocios distintos. No penalices un componente por ser común: penaliza que no exprese prioridad o contenido.
Prompt de diagnóstico
No rediseñes todavía. Audita la interfaz con BRIEF.md y CONTENT.md.
Clasifica cada hallazgo como identidad, jerarquía, contenido, interacción
o adorno. Para cada uno indica evidencia, impacto en la tarea y corrección
mínima. Conserva patrones convencionales que ayuden a entender la página.
Propón dos direcciones visuales usando los mismos contenidos y componentes.
Implementa la dirección elegida mediante tokens: color por función, dos familias tipográficas como máximo, escala de espacio, anchura de lectura y tres niveles de superficie. Sustituye adjetivos genéricos por contenido concreto. Deja una sola acción prioritaria por contexto.
Verificación y restauración
Repite las capturas, navegación por teclado y prueba de cinco segundos. Comprueba que no aparecieron problemas de contraste ni un aumento grande de CSS/JavaScript. Si la nueva identidad reduce claridad, revierte el último cambio y conserva solo los tokens aprobados.
Fuentes oficiales
Si has guardado la evidencia de esta lección, continúa con «Laboratorio: reproduce y repara un móvil roto». Si no, repite la comprobación antes de avanzar.