Los fallos de diseño no se limitan al color, al espaciado o al acabado visual.
Una pantalla puede parecer cuidada y aun así fallar si las personas no pueden elegir la siguiente acción, si el equipo de desarrollo no puede implementar los estados o si un PDF pierde el orden de lectura después de exportarse.
Los sitios web, las aplicaciones, los productos empresariales y los entregables DTP usan medios distintos, pero comparten muchas preguntas de calidad.
Cuando el propósito, la jerarquía de información, los estados de interacción, la accesibilidad, el rendimiento y el mantenimiento se tratan como especificaciones, la revisión deja de depender del gusto personal y se convierte en un juicio compartido.
Qué significa calidad del diseño
Calidad del diseño no significa solo que una página o un documento resulten atractivos.
Significa que el diseño ayuda a cumplir un propósito, resiste la implementación y las actualizaciones, y deja sus decisiones en una forma que el equipo puede comprobar.
Elegir el color de un botón, por ejemplo, no es una decisión puramente decorativa.
Si se definen los estados normal, hover, foco, deshabilitado y error, el equipo de desarrollo puede reproducir la misma decisión de forma consistente.
Si solo se diseña la apariencia inicial, cada persona añade una interpretación distinta durante la implementación.
El resultado es un producto con elementos parecidos que se comportan o se ven de manera ligeramente diferente, y las personas usuarias deben volver a decidir qué se puede pulsar.
Convertir el diseño en especificación no significa producir más maquetas estáticas.
Significa dividir las razones y las condiciones límite de una decisión en unidades que el equipo pueda compartir.
Las mismas preguntas en medios distintos
El trabajo web, de producto y de DTP produce artefactos diferentes.
Sin embargo, las preguntas de revisión tienen una estructura común.
| Objeto | Artefacto visible | Calidad que debe comprobarse |
|---|---|---|
| Sitio web | Páginas, formularios, artículos, landing pages | Si la acción prevista es alcanzable, si el significado se entiende en búsqueda y al compartir, y si la velocidad o la accesibilidad no se han deteriorado |
| Producto | Pantallas, componentes, notificaciones, ajustes | Si los cambios de estado están definidos, si existen rutas de recuperación y si el uso repetido no aumenta la confusión |
| DTP y PDF | Páginas impresas, presentaciones, catálogos, PDF distribuidos | Si el orden de lectura es claro, si la estructura y el texto alternativo se conservan, y si el material funciona tanto impreso como en distribución digital |
Esto no significa que cada medio necesite una sensibilidad visual aislada.
Normalmente es más útil traducir las restricciones de cada medio a las mismas preguntas, porque así aparecen antes los requisitos que faltan.
Empezar por la función, no por la atmósfera
Las conversaciones iniciales de diseño suelen comenzar con palabras como confianza, innovación o cercanía.
Estas palabras pueden orientar la dirección, pero por sí solas no se pueden implementar ni verificar.
La primera decisión debe ser la función de cada pantalla o documento.
- Propósito: Qué debe entender la persona lectora y qué acción debe tomar después.
- Prioridad: Qué información debe verse primero, qué información debe compararse y qué puede consultarse más tarde.
- Estado: Definir carga, entrada, error, finalización, falta de permisos y no disponibilidad.
- Restricción: Considerar frecuencia de actualización, campos del CMS, traducción, tamaño de impresión, proporciones de imagen y esfuerzo de implementación.
- Verificación: Decidir quién evaluará el trabajo, qué inspeccionará y qué cuenta como aprobado.
Este orden da una razón a las decisiones visuales.
Un color de acento fuerte no se justifica por querer más impacto, sino por la necesidad de identificar la acción principal de la pantalla.
La accesibilidad y la velocidad son requisitos de diseño
La accesibilidad no es algo que se añade después de implementar mediante una lista de comprobación.
El orden de los encabezados, el texto de los enlaces, las etiquetas de los formularios, la visibilidad del foco y las diferencias que no dependen solo del color se protegen mejor cuando se diseñan desde el inicio.
W3C organiza la accesibilidad en WCAG 2 con cuatro principios: perceptible, operable, comprensible y robusto.
No son condiciones especiales solo para apoyar a personas con discapacidad.
También importan en el uso móvil al aire libre, los cambios de visión por edad, la navegación con teclado, las lesiones temporales y las conexiones lentas.
El rendimiento pertenece a la misma conversación.
Las imágenes grandes, las fuentes pesadas, las animaciones excesivas y los espacios publicitarios que cargan tarde cambian no solo la apariencia, sino también la facilidad de uso.
web.dev explica Core Web Vitals mediante LCP, INP y CLS, que representan carga, capacidad de respuesta y estabilidad visual.
Las métricas no determinan por sí solas la calidad del diseño, pero ayudan a comprobar que las decisiones visuales no están dañando la experiencia.
Un sistema de diseño no existe para limitar la expresión
Un sistema de diseño no es un reglamento para eliminar creatividad.
Es un activo compartido que convierte decisiones repetidas en piezas reutilizables y reduce el tiempo dedicado a discutir las mismas elecciones.
GOV.UK Design System lo muestra mediante estilos, componentes y patrones que favorecen la consistencia y la reutilización entre servicios.
La misma idea funciona en empresas y equipos pequeños.
No hace falta empezar con una biblioteca grande.
Botones, campos de entrada, tarjetas, tablas, alertas, espaciado, niveles de encabezado y proporciones de imagen ya aportan valor cuando se definen su nombre, propósito, uso apropiado y mal uso.
Las definiciones de estado son especialmente valiosas en productos.
Cuando se diseñan los estados vacío, error, carga y falta de permisos, las pruebas con usuarios después de la implementación permiten aislar mejor los problemas.
Conservar la estructura en DTP y PDF
En DTP, la atención suele dirigirse a la superficie final impresa.
Sin embargo, catálogos, informes, materiales comerciales y documentos de contratación suelen distribuirse también como PDF.
Si el orden visual, el orden de lectura, los encabezados, los enlaces, el texto alternativo y el idioma del documento no coinciden, el documento digital pierde calidad aunque la página parezca terminada.
Section508.gov explica que los PDF no siempre son el formato más accesible ni el más adecuado para móvil, y que deben usarse cuando sea necesario.
Esto no es un argumento contra el DTP.
Significa que los equipos deben separar la información que pertenece a HTML, la información que necesita una forma fija en PDF y la información que debe optimizarse para impresión.
Antes de crear la página, el equipo de diseño debe preguntar dónde se leerá el material.
Un documento impreso para una reunión interna y un documento abierto desde resultados de búsqueda en un teléfono no pueden evaluarse solo con el mismo diseño estático.
Acercar la revisión a una inspección
El trabajo de diseño se desvía cuando las revisiones se quedan en comentarios vagos como se siente débil o debería verse más actual.
El problema no es la reacción, sino que no se ha traducido en un punto de inspección.
Este orden reduce retrabajo.
- ¿La acción principal queda reducida a un camino claro?
- ¿El flujo se entiende leyendo solo los encabezados?
- ¿Los elementos clicables, seleccionables e informativos se distinguen visualmente?
- ¿El significado evita depender solo del color, la forma o la posición?
- ¿La disposición resiste textos largos, traducción, entrada desde CMS y sustitución de imágenes?
- ¿Están diseñados los estados de carga, error, vacío y finalización?
- ¿La persona que mantendrá el contenido podrá conservar la misma calidad después del lanzamiento?
Este enfoque no elimina todas las cuestiones de gusto, pero alinea la base del juicio.
Las elecciones visuales restantes pueden compararse con el propósito, no solo con la preferencia.
Una forma práctica de empezar en pequeño
Los sitios y productos existentes no necesitan reconstruirse de una vez.
Elija una página o un documento que reciba muchas visitas, esté cerca de una consulta o compra, o se reutilice dentro de la organización.
Después, revíselo con cinco lentes: propósito, prioridad, estados, accesibilidad y mantenimiento.
Cuando aparezca una pieza faltante, añada una regla antes de producir más pantallas acabadas.
Ejemplos: usar un solo estilo de botón principal por página, conservar los encabezados de tabla en HTML y no solo de forma visual, o comprobar el orden de encabezados y el texto alternativo antes de distribuir un PDF.
Reglas pequeñas como estas son más fáciles de seguir y de trasladar al siguiente trabajo.
Preguntas frecuentes
¿Debe un equipo crear primero un sistema de diseño completo?
No.
Suele ser mejor empezar definiendo propósito y estados para elementos repetidos como botones principales, campos de entrada, encabezados, espaciado y mensajes de error.
¿Basta con una revisión de accesibilidad antes de publicar?
La revisión previa a la publicación es necesaria, pero no basta.
La estructura de encabezados, la visibilidad del foco, las etiquetas de formularios y las pistas que no dependen del color cuestan menos cuando se diseñan pronto.
¿Los documentos DTP necesitan los mismos estándares que las páginas web?
No exactamente, pero el orden de la información, los encabezados, el texto alternativo, la legibilidad y la mantenibilidad deben revisarse igualmente.
Si un documento se distribuye como PDF, la estructura documental forma parte de la calidad del diseño.
¿Las métricas pueden identificar por sí solas un buen diseño?
No.
Métricas como Core Web Vitals son útiles porque muestran si los recursos pesados o los diseños inestables perjudican la experiencia, pero no sustituyen el juicio editorial y de producto.
Referencias
- W3C WAI: WCAG 2 Overview
- W3C: Web Content Accessibility Guidelines 2.2
- web.dev: Web Vitals
- GOV.UK Design System
- GOV.UK Design System: Components
- W3C WAI: WCAG2ICT Overview
- Section508.gov: Create Accessible PDFs