Para decidir con criterio
¿Qué tendencia visual merece la pena aplicar a mi web?
La que ayuda a entender, recorrer o utilizar la página sin añadir una barrera. Puedes tener una identidad tecnológica potente con imágenes y movimiento, siempre que no tapen el contenido ni dificulten el contacto. Valora la propuesta con texto real, un móvil y una persona que no conozca el negocio; una maqueta vacía no prueba esa experiencia. [1][2]
- Comprueba el contraste sobre la zona exacta de la imagen donde aparece cada texto.
- Pide una alternativa legible cuando la animación se reduzca o no se reproduzca.
- Usa recursos visuales para explicar una relación o mostrar un trabajo; no como sustituto de la oferta.
Cómo juzgar un recurso antes de incorporarlo
En pantallas pequeñas puedes desplazar la tabla.
| Recurso | Aportación útil | Prueba que pedir |
|---|---|---|
| Imagen de fondo | Identidad y contexto | Texto legible en todos sus recortes |
| Título grande | Jerarquía y mensaje principal | Lectura completa en móvil |
| Animación | Explicar cambio o relación | Contenido accesible sin movimiento |
| Tarjetas visuales | Comparar servicios o trabajos | Destino claro y navegación con teclado |
- Propósito
Escribe qué debe aclarar el recurso.
- Aplicación
Pruébalo con el contenido y los tamaños reales.
- Validación
Comprueba legibilidad, interacción y carga antes de extenderlo.
Una tendencia visual no demuestra que una web sea más útil. Conviene juzgar cada decisión por la comprensión, la interacción y el mantenimiento que exige, no por su novedad.
Seis principios que envejecen mejor
Jerarquía antes que efectos
El usuario debe identificar qué ofrece la página, para quién es y cuál es la siguiente acción sin depender de una animación.
Color con una función
La paleta diferencia fondo, contenido, estados y acciones. El contraste se comprueba; no se da por válido por usar colores de marca.
Responsive por comportamiento
No basta con encoger columnas. Menús, tablas, formularios, diálogos y controles necesitan decisiones específicas para cada ancho.
Movimiento que se pueda reducir
Las animaciones deben apoyar la orientación, evitar cambios de layout y respetar la preferencia de movimiento reducido.
Prueba social comprobable
Portfolio, opiniones y casos deben enlazar a una fuente identificable. Una cifra grande o una cita sin evidencia resta confianza.
Medición sin causalidad inventada
Rendimiento, accesibilidad y eventos ayudan a detectar problemas. Ninguna puntuación aislada garantiza ventas o posiciones.
Preguntas antes de añadir un recurso visual
- ¿Aclara una relación o solo ocupa espacio?
- ¿Se entiende con teclado, lector de pantalla y movimiento reducido?
- ¿Funciona sin depender de un dispositivo o ancho concreto?
- ¿El contenido seguirá siendo correcto cuando cambie el negocio?
- ¿Podemos comprobar su efecto con una métrica bien definida?
El objetivo es una interfaz coherente y mantenible. Si quieres revisar una web existente, empieza por el checklist y confirma después los problemas con pruebas reales.
Fuentes y documentación
Las notas indican qué parte del artículo documenta cada referencia.
- W3C: contraste mínimo (se abre en una pestaña nueva)
Define contraste para texto normal y texto grande; el color de marca no exime de comprobarlo.
- W3C WAI: estructura de página (se abre en una pestaña nueva)
Documenta regiones, encabezados y relaciones comprensibles entre contenidos.
Guía de decisión revisada el .