Haz la prueba de utilidad, no una lista de tendencias
El informe 2026 de Figma registra 3D inmersivo, navegación experimental, paletas vívidas, motion, gamificación y experiencias asistidas por IA. Eso es exploración, no prueba de que cada sitio deba copiarlas. Las páginas de servicio y cuenta suelen beneficiarse más de rutas predecibles.
Escribe el trabajo de la página antes de elegir un tratamiento. Compara versiones convencionales y lideradas por la tendencia sobre la misma tarea y medida de éxito. La atención por sí sola no es éxito.
Nombra la acción principal y haz que su etiqueta, ubicación y resultado sean entendibles sin hover, un gesto o un tutorial.
Mantén una ruta convencional hacia el contenido central y una forma fácil de eliminar una mejora si la evidencia es débil.
Construye sistemas responsivos alrededor del contenido y los componentes
El diseño responsivo sigue teniendo alto valor porque el tamaño de pantalla no predice la intención ni el método de entrada. Google recomienda breakpoints guiados por contenido, evitar el desbordamiento horizontal y no ocultar información únicamente porque el diseño sea estrecho. Comienza pequeño y luego amplía cuando el contenido necesite más espacio.
Las container queries adaptan un componente al espacio que le proporciona su padre, por lo que una tarjeta puede funcionar en una columna principal y en una barra lateral. No sustituyen a las media queries: MDN describe las consultas de media para grid, flex y viewport como enfoques de reserva.
Restringe las líneas de texto largas en pantallas anchas y confirma que el zoom no genere columnas recortadas ni desplazamiento horizontal.
Proporciona dimensiones de imagen para que el navegador pueda asignar espacio antes de que las imágenes carguen y reducir el movimiento de diseño.
Haz que la interacción accesible sea una dirección duradera
El diseño con accesibilidad como prioridad aborda cómo las personas operan un sitio, por lo que perdura más que la moda visual. WCAG 2.2 es una Recomendación del W3C. Sus criterios más recientes dan casos de revisión concretos: el foco de teclado no debe quedar completamente oculto por contenido creado por el autor en Level AA; el arrastre requiere una alternativa sencilla con puntero; y los objetivos de puntero tienen un mínimo de 24 por 24 CSS-píxeles en Level AA a menos que aplique una excepción.
Convierte estos casos en reglas de sistema. No permitas que encabezados, controles de cookies, lanzadores de chat o banners cubran el foco. Muestra un estado de foco claro. Donde una lista pueda reordenarse arrastrando, ofrece otra operación sencilla. WCAG 2.2 también aborda ayuda, reingreso repetido y autenticación accesible. Pueden aplicar excepciones relacionadas con seguridad; obtén una revisión cualificada de seguridad y accesibilidad.
Recorre con Tab los viajes clave en cada diseño y confirma que el control enfocado sea visible e identificable.
Mide los controles de iconos compactos y el espacio entre ellos, especialmente en menús y formularios.
Soportar gestores de contraseñas y pegar puede reducir la carga cognitiva; no debilites controles sin una revisión cualificada de seguridad.
Usa el motion como orientación opcional
El motion puede aclarar una confirmación guardada, un panel expandido o el siguiente paso. Daña la usabilidad cuando retrasa una elección, atrae repetidamente la atención del contenido o es la única forma de entender un cambio de estado. Estas experiencias son direcciones, no requisitos.
Honra una petición de menos motion no esencial. MDN documenta `prefers-reduced-motion` para detectar una preferencia del usuario y eliminar, reducir o reemplazar motion. Conserva la información y la retroalimentación de finalización, pero reemplaza efectos a gran escala, paneos, parallax o reproducción automática por cambios visuales discretos.
Indica la información que cada animación transmite; elimínala si no aporta una respuesta.
Habilita la reducción de motion a nivel del sistema operativo y verifica que la página siga teniendo sentido.
Haz del rendimiento y la estabilidad criterios de aceptación de diseño
El rendimiento es una restricción de diseño, no una tarea final. Los Core Web Vitals actuales de Google son Largest Contentful Paint para carga, Interaction to Next Paint para capacidad de respuesta y Cumulative Layout Shift para estabilidad visual. Los objetivos recomendados son LCP de 2.5 segundos o menos, INP de 200 milisegundos o menos y CLS de 0.1 o menos en el percentil 75, segmentados por móvil y escritorio. Son objetivos útiles, no sustitutos de las pruebas de tarea.
Define un presupuesto antes de añadir un video hero, fuente personalizada, secuencia de imágenes, efecto del lado del cliente o asistente de terceros. Las pruebas de laboratorio detectan regresiones antes del lanzamiento, pero la medición en campo es esencial porque las condiciones varían.
Reserva espacio para imágenes, embed, anuncios y elementos de interfaz que cargan tarde.
Usa comprobaciones de laboratorio durante la construcción y datos de usuarios reales tras el lanzamiento; revisa móvil y escritorio por separado.
Trata las interfaces inmersivas, experimentales y dirigidas por IA como experimentos condicionales
3D, navegación no lineal, narración visual y asistencia conversacional pueden ayudar cuando reducen la incertidumbre que el contenido estático no puede. Son malos predeterminados cuando un visitante necesita un precio, un destino conocido, un formulario o una respuesta. Preserva una ruta directa, una descripción en texto plano y un camino usable mientras una mejora carga o falla.
Prototipa la versión más pequeña primero. Define qué justificaría conservarla, como menos selecciones erróneas o encontrar respuestas más rápido. Registra el peso de los assets, la ejecución de scripts, el mantenimiento, la dependencia del proveedor, la revisión de privacidad y las alternativas accesibles. Una demo llamativa no establece causalidad.
Mantén el texto central, la navegación primaria y la acción principal utilizables sin la capa inmersiva o el asistente.
Limita la exposición temprana, compara resultados y conserva una decisión de reversión.
Ejecuta los cambios de diseño como cambios de producto resilientes
Un diseño puede alterar la entrega de assets, el comportamiento de JavaScript, las herramientas de consentimiento y los servicios externos. Trata un rediseño como un cambio en producción. Status Is UP apoya la optimización proactiva de disponibilidad y la remediación: identifica dependencias débiles antes del lanzamiento, fija comprobaciones, prepara rollback y arregla riesgos recurrentes de entrega. Esto difiere de esperar a detectar tiempos de inactividad después de que los usuarios se vean afectados.
Mantén la ruta anterior hasta que la nueva pase las comprobaciones de tarea, accesibilidad y rendimiento. Especifica quién puede pausar una función. Revisa de nuevo tras cambios de contenido, navegador, proveedor o campaña.
Comprueba los viajes clave, assets, formularios, comportamiento de consentimiento y dependencias antes del despliegue amplio.
Documenta la ruta de reversión probada, el responsable de la decisión y el estado de visitante esperado.