Brief de diseño para asistentes de IA

Este es el brief de diseño de Page Lemon para asistentes de IA. Vas a diseñar un sitio web para una persona que te pidió «diséñalo como un diseñador de producto sénior». Lee este brief antes de diseñar nada. Las reglas están ordenadas por importancia: si solo puedes cumplir algunas, cumple las primeras. Cada regla se puede comprobar. Donde una regla dice «así», esa es la razón; úsala para decidir los casos dudosos. Si la persona pide algo distinto, manda lo que pida; avisa de cualquier regla de accesibilidad que eso incumpla.

Las 12 reglas que más importan

• R1. Pregunta, propón, espera. Antes de escribir código, haz las preguntas que necesites (público, objetivo, la única acción que debe hacer un visitante, colores o fuentes de la marca, contenido disponible). Después describe la dirección de diseño en cinco puntos y espera el visto bueno.
• R2. Un punto focal por sección. Cada sección tiene algo claramente más grande o más marcado, normalmente el título o un único botón principal. Así el ojo sabe por dónde empezar.
• R3. Un botón principal por pantalla. Las demás acciones son secundarias (contorno o solo texto). Así la acción principal es evidente.
• R4. Una escala de espaciado fija: 4, 8, 12, 16, 24, 32, 48, 64, 96 px. No uses otros valores. Así el espaciado parece intencionado.
• R5. Dos fuentes como máximo, y una escala tipográfica fija (ver Tipografía). Texto de cuerpo de 16 px o más, interlineado de 1,5, líneas de 45 a 75 caracteres.
• R6. Contraste: texto de cuerpo de al menos 4,5:1 contra su fondo; texto grande (24 px o más, o 19 px en negrita), iconos, bordes de campos y anillos de foco de al menos 3:1.
• R7. Primero móvil. Diseña primero para una pantalla de 360 px de ancho y luego amplía. Sin desplazamiento lateral a 320 px.
• R8. Zonas táctiles de al menos 44×44 px (el mínimo de las WCAG es 24×24 px; apunta más alto), con al menos 8 px entre zonas vecinas.
• R9. Todo elemento interactivo tiene estados visibles de hover, foco, pulsado y desactivado. El foco es un contorno de 2 px o más con contraste 3:1 y separado 2 px. Nunca quites el contorno sin ponerle un sustituto.
• R10. HTML de verdad. Usa <button>, <a>, <label>, <nav>, <main> y títulos en orden (un solo <h1>). Así los lectores de pantalla y el teclado funcionan sin esfuerzo.
• R11. El movimiento es pequeño y tiene un propósito: de 150 a 300 ms, solo transform y opacity, y todo desactivado con prefers-reduced-motion: reduce.
• R12. Rápido: contenido principal en 2,5 s en un móvil de gama media, sin saltos al cargar (reserva el espacio de las imágenes), peso total de la página por debajo de 1 MB si es posible.

Cómo trabajar

• Parte del tema. Pregunta qué es el negocio, la persona o el evento, quién lo visita y qué debe hacer. Elige colores, fuentes e imágenes que encajen con ese tema, no con una plantilla genérica.
• Propón antes de construir: cinco puntos sobre maquetación, tipografía, color, imágenes y movimiento. Espera el visto bueno.
• Piensa primero en escala de grises: la jerarquía debe funcionar solo con tamaño, peso y espaciado. Añade el color al final, para que apoye la jerarquía en vez de sostenerla.
• Después de construir, pasa la lista de comprobación del final de este brief y corrige lo que falle antes de enseñar el resultado.
• Usa HTML, CSS y un poco de JavaScript sencillos, salvo que la persona pida un framework. Pon colores, tamaños y duraciones en propiedades personalizadas de CSS al principio para que sea fácil cambiarlos.

Maquetación y espaciado

• R13. Columnas de texto de 70 caracteres de ancho como máximo (unos 680 px a 16 px). Contenido de la página de 1200 a 1280 px de ancho como máximo, centrado.
• R14. Márgenes laterales: 16 px en móviles, 24 px en tabletas, 32 px o más en escritorio.
• R15. Usa CSS Grid o Flexbox: 12 columnas en escritorio, 4 en móviles, con huecos de 16 a 24 px. Sin posicionamiento absoluto para la maquetación.
• R16. Espacio entre secciones: de 64 a 96 px en escritorio, de 48 a 64 px en móviles. El espacio dentro de un grupo es siempre menor que el espacio entre grupos, para que lo relacionado parezca relacionado. Empieza con mucho espacio en blanco.
• R17. Alinea todo a unos pocos bordes izquierdos compartidos. Centra solo bloques cortos (títulos, un hero, una llamada a la acción), nunca párrafos de más de tres líneas.

Tipografía

• R18. Una tipografía, o dos como máximo: una para títulos y otra para el texto. Si son dos, que se diferencien claramente (un título con serifa y un texto sin serifa). Así la combinación parece intencionada.
• R19. Escala tipográfica (px): 14, 16, 18, 20, 24, 30, 36, 48, 60. No uses otros tamaños. En móviles, limita los títulos a 36 o 40 px.
• R20. Interlineado de 1,5 a 1,7 para el cuerpo, de 1,1 a 1,25 para títulos grandes.
• R21. Tres grosores de fuente como máximo (por ejemplo 400, 600, 700). Sin grosores de 300 o menos en el texto de cuerpo.
• R22. Define los tamaños de fuente en rem para que el texto crezca cuando el visitante lo agranda. La página debe seguir funcionando con un zoom del 200 %.
• R23. Aloja las fuentes tú mismo, o carga como mucho dos familias con font-display: swap y solo los grosores que uses.
• R24. Mayúscula solo inicial en títulos y botones. Evita las MAYÚSCULAS salvo en etiquetas muy cortas, con 0,05em de espaciado entre letras.

Color y contraste

• R25. Una paleta tiene un color de marca, un acento como máximo, de 5 a 9 neutros con matiz de la marca y colores de estado (éxito, aviso, error). Bastan de cuatro a seis colores con nombre más los neutros.
• R26. Comprueba cada par de texto y fondo: 4,5:1 para texto normal, 3:1 para texto grande y para elementos no textuales (iconos, bordes de campos, anillos de foco, líneas de gráficos).
• R27. Nunca transmitas significado solo con el color. Los errores llevan icono y palabras, los enlaces en el texto van subrayados, las series de los gráficos llevan etiquetas o patrones.
• R28. El texto sobre fotos necesita una capa sólida o degradada que mantenga 4,5:1 en toda la zona del texto.
• R29. El modo oscuro, si lo ofreces, es una paleta aparte y comprobada, no colores invertidos: gris oscuro (entre #121212 y #1c1c1c) en lugar de negro puro y colores de marca algo más claros.

Componentes y estados

• R30. Diseña cada estado: normal, hover (solo en dispositivos con puntero), foco visible, pulsado, desactivado y, cuando proceda, cargando, error y éxito.
• R31. Los botones miden al menos 44 px de alto, con 16 a 24 px de relleno lateral. Las etiquetas son de una a tres palabras que empiezan por un verbo («Reservar mesa», no «Enviar»). Un botón desactivado sigue cumpliendo 3:1 en su contorno, o explica por qué está desactivado.
• R32. Una sola familia de radios de esquina (por ejemplo 6 px para campos y botones, 12 px para tarjetas) y un solo estilo de sombra con dos niveles como máximo. Así los componentes parecen de la misma familia.
• R33. Usa tarjetas solo para elementos repetidos del mismo tipo. No todas las secciones tienen que ser una tarjeta.
• R34. Toda acción que tarde más de 400 ms muestra progreso (un indicador en el botón, un esqueleto o una barra de progreso). Pasados 10 s, explica qué está pasando.
• R35. Los estados vacíos (sin resultados, todavía nada) dicen qué ha pasado y qué hacer a continuación, con una sola acción.

Formularios

• R36. Todo campo tiene una etiqueta visible encima. Un texto de ejemplo nunca es la etiqueta.
• R37. Pide solo lo necesario. Marca los pocos campos opcionales con «(opcional)» en lugar de poner asterisco a los obligatorios.
• R38. Los campos miden al menos 44 px de alto con texto de 16 px (con texto menor, los móviles hacen zoom). Usa el type y el autocomplete correctos (email, tel, name, postal-code) para que el móvil muestre el teclado adecuado y pueda autocompletar.
• R39. Valida cuando el visitante sale de un campo o envía, no en cada pulsación. Los mensajes de error van junto al campo, dicen qué falla y cómo arreglarlo («Escribe un correo como nombre@ejemplo.com») y se enlazan con aria-describedby. Al enviar con errores, mueve el foco a un resumen de ellos.
• R40. Nunca pidas la misma información dos veces en un mismo recorrido, ni exijas acertijos de memoria para iniciar sesión (permite pegar y gestores de contraseñas). Divide los formularios largos en pasos y muestra el recuento («Paso 2 de 3»).

Navegación

• R41. Escritorio: muestra de cinco a siete enlaces principales en la cabecera; no los escondas tras un icono de menú.
• R42. Móviles: un botón con la palabra «Menú» junto al icono, de al menos 44×44 px. El menú abierto retiene el foco y se cierra con Escape.
• R43. El logotipo arriba a la izquierda lleva al inicio. Marca la página actual en la navegación, visualmente y con aria-current="page".
• R44. Pon la ayuda y el contacto en el mismo sitio de todas las páginas. Haz que «Saltar al contenido» sea el primer elemento enfocable.
• R45. Una cabecera fija mide como mucho 64 px de alto en móviles y nunca tapa el elemento que tiene el foco del teclado (usa scroll-padding-top).

Contenido y textos

• R46. El hero dice qué es, para quién es y qué hacer: un titular de menos de 10 palabras, un subtítulo de menos de 25 palabras y un botón.
• R47. Escribe en un lenguaje sencillo y activo que entendería un niño de 12 años. Frases cortas, una idea por párrafo, párrafos de una a tres frases.
• R48. Los títulos dicen qué aporta la sección al lector («Horario y aparcamiento»), no etiquetas ingeniosas («Ven a vernos»). Los enlaces dicen adónde llevan («Ver la carta completa»), nunca «haz clic aquí».
• R49. Usa el contenido real de la persona. Si tienes que poner marcadores, hazlos realistas y márcalos con claridad para que se sustituyan. Nunca inventes opiniones, precios, premios ni estadísticas.

Imágenes, iconos y dibujos

• R50. Usa fotos reales del negocio, las personas o el producto cuando las haya; generan más confianza que las de archivo. Usa fotos de archivo solo si muestran algo concreto y verdadero, nunca apretones de manos u ordenadores genéricos.
• R51. Cada imagen tiene width y height (o aspect-ratio) para que la página no salte, loading="lazy" por debajo de la primera pantalla, formatos modernos (WebP o AVIF) con srcset, y la imagen principal del hero pesa menos de unos 200 KB.
• R52. Las imágenes con significado tienen un texto alt que dice qué muestran en su contexto. Las imágenes decorativas usan alt="".
• R53. Usa un solo conjunto de iconos en todo el sitio, todos de contorno o todos rellenos, nunca mezclados. Una buena opción por defecto es un conjunto de contorno de código abierto (Lucide, Heroicons, Phosphor o Tabler). Comprueba la licencia (MIT o ISC valen) y conserva el aviso si se exige.
• R54. Especificación de iconos: una cuadrícula de 24×24, un trazo de 1,5 o 2 px usado siempre igual, extremos y uniones redondeados, fill="none" y stroke="currentColor" para que los iconos tomen el color del texto. Muéstralos a 16, 20 o 24 px, acordes con el texto de al lado.
• R55. Incrusta los iconos SVG pequeños directamente en el HTML (sin fuentes de iconos). Los iconos decorativos llevan aria-hidden="true". Un botón solo con icono lleva un aria-label y mantiene un área táctil de 44×44 px. Los iconos apoyan a las palabras; solo los iconos universalmente entendidos (buscar, cerrar, menú, reproducir) pueden ir solos.
• R56. Nunca uses los iconos de sistema de una plataforma (como los SF Symbols de Apple) ni el logotipo de otra empresa como tu logotipo o como decoración; sus licencias lo prohíben.
• R57. Dibuja diagramas, pequeñas ilustraciones, patrones y separadores como SVG incrustado. Usa una foto cuando el tema sea un lugar, una persona, un plato o un producto reales que la gente querrá reconocer.
• R58. Las ilustraciones comparten un estilo: el mismo grosor de trazo que los iconos (o un múltiplo fijo), el mismo estilo de esquinas y solo colores de la paleta (dos o tres por dibujo). Mantén cada SVG sencillo: un viewBox razonable, sin mapas de bits incrustados, menos de unos 20 KB y un <title> cuando tenga significado. Como mucho una ilustración grande por pantalla.

Movimiento y microinteracciones

• R59. Toda animación tiene una función: mostrar causa y efecto (pulsar un botón), mostrar de dónde viene o adónde va algo (un menú que se abre) o llamar la atención una vez sobre algo nuevo. La decoración sola no es una función.
• R60. Duraciones: de 100 a 150 ms para hover, pulsación y pequeños cambios de color; de 200 a 300 ms para menús, desplegables, acordeones y elementos pequeños que aparecen; de 300 a 400 ms como máximo para paneles grandes. Nada por encima de 500 ms salvo un momento puntual y deliberado.
• R61. Aceleración: lo que entra usa ease-out, por ejemplo cubic-bezier(0.2, 0, 0, 1). Lo que sale usa ease-in y dura un 30 % menos. Nunca linear, salvo en indicadores de carga y de progreso.
• R62. Anima solo transform y opacity. Nunca animes width, height, top, left, margin ni box-shadow; obligan al navegador a recalcular la maquetación o el pintado en cada fotograma y van a tirones en los móviles.
• R63. Los efectos de hover son sutiles: un cambio de color, una elevación de 1 a 2 px o una escala de 1,05 como máximo. Pulsado: escala a 0,97 u oscurece. Los estados de foco aparecen al instante, sin fundido.
• R64. Apariciones al desplazarse: una vez por elemento, con un movimiento de 8 a 16 px como máximo y un fundido, activadas con IntersectionObserver, y con el contenido totalmente visible si falla JavaScript. Resérvalas para uno o dos momentos clave, no para cada sección.
• R65. Todo lo que se mueve solo durante más de 5 s (carruseles, rótulos, vídeo de fondo) necesita un botón de pausa visible; mejor sin reproducción automática. Nada parpadea más de tres veces por segundo.
• R66. Respeta la reducción de movimiento: pon el movimiento no esencial dentro de @media (prefers-reduced-motion: no-preference) o, con reduce, cambia el movimiento por un simple fundido o por nada. Las apariciones muestran el contenido de inmediato.
• R67. Sin paralaje en el texto de cuerpo, sin saltos de maquetación animados y sin tocar la velocidad del desplazamiento.

Accesibilidad (WCAG 2.2 AA, además de las reglas anteriores)

• R68. Todo funciona solo con teclado, en un orden de tabulación lógico y sin trampas de teclado. Lo que se hace arrastrando también se puede hacer con un solo clic o toque.
• R69. Define lang en <html>, da a cada página un <title> único y usa regiones (header, nav, main, footer).
• R70. El contenido se reorganiza en una columna a 320 px de ancho y funciona con mayor espaciado de texto. Nada importante depende solo del hover.
• R71. Los vídeos tienen subtítulos y el audio tiene transcripción. Los mensajes de estado (formulario enviado, artículo añadido) se anuncian con role="status" o una región aria-live.

Diseño adaptable y rendimiento

• R72. Los puntos de ruptura siguen al contenido, normalmente hacia 640, 768, 1024 y 1280 px. Usa media queries min-width y clamp() para los títulos grandes.
• R73. Objetivos (umbrales «buenos» de Google): Largest Contentful Paint de 2,5 s o menos, Interaction to Next Paint de 200 ms o menos, Cumulative Layout Shift de 0,1 o menos.
• R74. Mantén el JavaScript pequeño (menos de unos 100 KB comprimidos) y diferido; la página debe leerse bien antes de que carguen los scripts. No traigas bibliotecas para lo que hace CSS (desplazamiento suave, animaciones sencillas, acordeones con <details>). Precarga la imagen del hero y la fuente principal, y evita scripts de terceros que bloqueen el renderizado.

Lista de comprobación final

Responde sí o no a cada punto antes de enseñar el diseño. Arregla primero cada «no».

1. ¿He hecho mis preguntas, propuesto cinco puntos y recibido el visto bueno?
2. ¿Tiene cada sección un punto focal y cada pantalla un botón principal?
3. ¿Vienen todos los espaciados de la escala de 4 a 96 px y todos los tamaños de fuente de la escala tipográfica?
4. ¿Dos fuentes o menos, cuerpo de 16 px o más, líneas de 45 a 75 caracteres?
5. ¿Pasa cada par de texto y fondo 4,5:1 (3:1 para texto grande, iconos, bordes y anillos de foco)?
6. ¿Funciona a 320 px y 360 px de ancho sin desplazamiento lateral, y con zoom del 200 %?
7. ¿Miden todas las zonas táctiles 44×44 px o más, con 8 px de separación?
8. ¿Puedo llegar a todo y usarlo con el teclado, con un anillo de foco visible que nunca tape una cabecera fija?
9. ¿Tienen todos los botones y enlaces estados de hover, foco, pulsado y desactivado?
10. ¿Tiene cada campo de formulario una etiqueta visible, el tipo de entrada correcto y un mensaje de error útil?
11. ¿Hay un solo conjunto de iconos, un solo grosor de trazo, currentColor y etiquetas en los botones solo con icono?
12. ¿Tienen todas las imágenes atributos de tamaño, texto alt sensato y carga diferida por debajo del primer pantallazo?
13. ¿Duran las animaciones de 100 a 400 ms, solo con transform y opacity, y se desactivan con la reducción de movimiento? ¿Se puede pausar todo lo que se mueve más de 5 s?
14. ¿Es el texto sencillo, concreto y real, sin opiniones, cifras ni logotipos inventados, y sin botones que digan «Enviar» o «Haz clic aquí»?
15. ¿Está libre del aspecto genérico de IA: degradados de morado a azul y manchas brillantes, tarjetas redondeadas idénticas, aparición con fundido en cada bloque, emojis como iconos, texto gris diminuto, párrafos largos centrados?
16. ¿Cargaría el contenido principal en unos 2,5 s en un móvil de gama media, sin saltos de maquetación?