revisar-diseño-de-página

Revisar Diseño de Página

Resumen

Una revisión de diseño que informa "se ve bien" no vale nada. Una revisión útil nombra el elemento, el valor medido y lo que debería ser.

Principio fundamental: cada hallazgo lleva un número o un selector. Sin adjetivos sin evidencia, y lo que no se pudo verificar se dice en voz alta.

Orden de las pasadas

Ejecuta en este orden. Las pasadas posteriores se pierden si una anterior falla.

1. Estructura: ¿cada sección existe, en el orden previsto, con contenido vinculado?
2. Ritmo: huecos en las uniones de secciones, alineación de cuadrícula, alturas de tarjetas, el sistema de secciones
3. Responsivo: la matriz de ventanas a continuación, móvil y escritorio
4. Tipografía y color: contraste, jerarquía, huérfanos, desbordamiento, anchos de texto con respecto al diseño
5. Movimiento: ver animating-web-pages y choreographing-scroll-stories
6. Afirmaciones y contenido: ver writing-claims-that-hold
7. Accesibilidad y rendimiento: foco, texto alternativo, LCP, cambio de diseño

La matriz de ventanas

Prueba los anchos que la página debe soportar, no uno representativo. Un conjunto que se sostuvo en un lanzamiento real: escritorio a 1024, 1280, 1440, 1920 y 2560, y teléfonos a 320, 360, 390 y 430.

Ancho	Buscar
1440	longitudes de línea superiores a ~75 caracteres, secciones que se centran cuando no deberían
992	cuadrículas de tres columnas que deberían ser de dos, elementos fijos sin recorrido
768	el bloque de tableta que nadie escribió, por lo que los valores de escritorio se aplican a la mitad del ancho
390	medios a sangre que ya no contienen su sujeto, texto oscuro sobre una banda oscura, desbordamiento horizontal
320	el teléfono más pequeño: titulares envueltos, botones recortados
2560	imágenes suaves en una pantalla retina, contenido perdido en el medio de un lienzo ancho

El fallo móvil que vale la pena nombrar: un héroe de altura completa cuyo medio es solo ~55% de la sección deja el resto mostrando el fondo de la sección. Si el fondo de la sección es oscuro y la copia ha cambiado a un tema claro, el texto y los botones se vuelven invisibles. Verifica ambos estados de tema a 390.

Mide, no entrecierres los ojos

Lee los valores de la página en vivo en lugar de juzgar a partir de una captura de pantalla. Esto es más rápido, captura cosas que el ojo pasa por alto y funciona cuando la representación no está disponible.

// Ritmo de sección: el hueco que importa es la SUMA en cada unión
[...document.querySelectorAll('section')].map(s => {
  const c = getComputedStyle(s);
  return { cls: s.className, h: Math.round(s.getBoundingClientRect().height),
           padT: c.paddingTop, padB: c.paddingBottom };
});

// Desbordamiento, el error invisible más común
[...document.querySelectorAll('*')]
  .filter(e => e.scrollWidth > e.clientWidth + 1)
  .map(e => e.className);

// Desbordamiento horizontal de página
document.documentElement.scrollWidth > document.documentElement.clientWidth;

// Uniformidad de tarjetas dentro de una cuadrícula
[...document.querySelectorAll('.card')].map(c => Math.round(c.getBoundingClientRect().height));

tools/page-measure.js en este repositorio agrupa estos y los controles siguientes en un solo fragmento.

Verificaciones medidas adicionales que demostraron su valor:

• Sistema de secciones: cada título de sección de contenido tiene el mismo tamaño de fuente calculado; cada borde izquierdo coincide con el borde del logotipo de navegación.
• Piso de tamaño de texto: ningún texto por debajo de 10px.
• Un h1. Los niveles de encabezado descienden sin saltar.
• Imágenes: todas se decodifican; la relación de píxeles efectiva es igual o inferior a 1.0 en cada posición de desplazamiento y relación de píxeles del dispositivo.
• Contraste por escena: cada nodo de texto dentro de una escena fijada tiene al menos una relación de contraste de 3:1 (grande) o 4.5:1 (cuerpo) con respecto a su primer fondo sólido, en el estado final de la escena.
• Héroe: muestrea fotogramas durante ocho segundos. Falla si hay una imagen duplicada, un mosaico fuera del rectángulo del héroe, una superposición, un mosaico debajo de la copia, o cualquier cambio después de que la introducción se estabilice.
• Sensación de desplazamiento: entrada de rueda real, ver choreographing-scroll-stories.
• La consola está limpia. El script se inicia, la introducción se ejecuta, sin errores pendientes.

Cuando no puedes hacer capturas de pantalla

Los paneles de navegador sin cabeza y ocultos pausan la representación, por lo que las capturas de pantalla vuelven en blanco mientras el DOM está perfectamente sano. Eso no es una razón para saltarse la revisión ni una razón para pedir que el usuario verifique por ti.

Verifica numéricamente en su lugar: estilos calculados, rectángulos delimitadores, scrollWidth, estado de obtención de recursos y tipo de contenido. Indica claramente en tu informe qué hallazgos se midieron y cuáles se vieron.

Contenido y afirmaciones

Una revisión de diseño incluye lo que dice la página.

• Cada estadística está atribuida, y la atribución está autorizada para uso de marketing
• Los logotipos de clientes están en la lista autorizada, no solo "logotipos que tenemos"
• El texto alternativo describe la imagen, no es el nombre del archivo y no está vacío en imágenes significativas
• Sin texto de marcador de posición en una lista de CMS; sin tarjeta vacía detrás de una animación
• Sin palabras prohibidas; sin guiones largos si el estilo de la casa los prohíbe

Piso de accesibilidad

• Anillo de foco visible en cada elemento interactivo (:focus-visible, no outline: none)
• Contraste del texto del cuerpo al menos 4.5:1, texto grande 3:1
• Objetivos interactivos de al menos 44x44 en táctil
• Movimiento reducido respetado: la página está completa y estática
• Sin script: todo visible

Piso de rendimiento

• La imagen LCP es eager, todo lo demás lazy
• La imagen del héroe es aproximadamente 2x su ancho CSS, no 4x
• Sin cambio de diseño por imágenes sin dimensiones o un contenedor con aspect-ratio
• El video es un archivo 1x o ligero en teléfonos, con un póster

Cuánto ejecutar

Un hito recibe la suite completa. Una corrección pequeña recibe la única verificación que cubre el cambio, una publicación en el entorno de staging y un informe. Ejecutar toda la suite después de cada ajuste convierte una corrección de una línea en una hora. Cuando alguien dice "QA completo", ejecuta todo.

Después de corregir, publica en staging y haz QA en staging, no solo en la compilación local. Lo que se envía es lo que necesita verificación.

Verifica la ejecución, no el registro

Antes de informar números, confirma que la ejecución que los produjo terminó: el archivo de estado es de hoy, el registro termina limpiamente, la ventana es la que querías. Un bloque de registro obsoleto de una ejecución anterior se ve exactamente igual que uno nuevo.

La puerta fría del revisor

Tu propio QA comparte tus puntos ciegos. Para un hito, entrega a un revisor nuevo que nunca haya visto el trabajo solo los artefactos: capturas de pantalla de página completa en los anchos de la matriz, la hoja de 390, la captura de movimiento y el libro de contabilidad de afirmaciones. Barra: 8 de 10 en cada uno de jerarquía, ritmo, movimiento, imágenes y copia. Como máximo tres rondas, un nuevo revisor cada ronda. Una prueba piloto de esto en un video terminado obtuvo un puntaje general de 7 y encontró un gancho estático y un nombre de marca tardío que todas nuestras propias comprobaciones automatizadas habían aprobado.

Formato de informe

Una tabla. Severidad, ubicación, valor medido, corrección. Clasificada de más severa a menos.

Sev	Dónde	Medido	Corrección
Alto	.hero a 390	medios a 500px dentro de una sección de 812px; área de copia es #0c0c0c	establecer el fondo de la sección por tema
Medio	unión de proof a info	120 + 120 = 240px de blanco vacío	reducir a 80, o colocar el CTA allí

Termina con lo que verificaste y no pudiste encontrar fallos, y una lista de lo que no pudiste verificar (por ejemplo: "no puedo escuchar audio", "el borrador no se puede previsualizar en el dominio de producción"). Una revisión sin una línea limpia se lee como incompleta en lugar de exhaustiva.

Señales de alerta

• "Se ve bien en móvil" sin nombrar el ancho
• Informar una corrección como hecha sin volver a medir
• Saltarse una pasada porque la anterior estuvo limpia
• Pedir al usuario que verifique algo que podrías medir
• Informar números de una ejecución que no confirmaste que terminó
• Ejecutar la suite completa para un cambio de una línea