Nuestro resumen de tendencias de diseño web para 2022: imágenes en capas, color atrevido, tipografía cinética, scrollytelling, scroll horizontal y vídeo de fondo, con consejos de Webflow.
Actualización, octubre de 2026: las cosas han cambiado desde que escribí esto. El enfoque más reciente está en The Top Web Design Trends for 2023. El resto de este artículo sigue en pie como registro de cómo lo hacíamos en su momento.
Cada año, un puñado de tendencias de diseño web empieza a aparecer en los briefs de nuestros proyectos. Estas son las que veíamos y construíamos en Webflow en 2022, desde las imágenes en capas y el color atrevido hasta el texto en movimiento, el scrollytelling y el scroll lateral.
Imágenes en varias capas
Lo hemos comprobado en algunos diseños web propios de Milk Moon Studio, por ejemplo Swellendam Heritage Society, y hemos visto que esto hace que los usuarios pasen más tiempo explorando un sitio web. Para la Heritage Society usamos modos de fusión CSS con una combo class en Webflow. Hemos escrito un artículo breve sobre cómo hacerlo con modos de fusión CSS y combo classes. Webflow ya admite modos de fusión al superponer elementos, pero el soporte es algo limitado y hemos comprobado que, aunque la función integrada sirve por ahora, algunos expertos en Webflow siguen prefiriendo la libertad de nuestro método de combo classes.
Colores de contraste divertidos
¿Hay millennials por aquí? ¡Esta va para vosotros!
El color es una herramienta básica que ayuda a captar la atención del usuario y también a despertar emociones.
Dirigido normalmente a un público concreto, este estilo ha evolucionado hasta convertirse en una estética de diseño web vibrante y llamativa, repleta de formas ácidas underground, neón sobre negro, contrastes intensos y degradados. Aquí volvemos a sacar partido de las estupendas funciones de Webflow. El CMS permite un campo de color con selector de color, hex, etc., y tantos campos de color como quepan en tu elemento del CMS, lo que te permite añadir colores a juego o de contraste a tus artículos, páginas de equipo o productos de tu tienda con unos pocos clics. Para quienes se atrevan un poco más, hay scripts que toman el color de una imagen y lo aplican a un elemento. Puedes encontrar ejemplos aquí o buscarlos en stackoverflow.com.
Espíritu lúdico y nostalgia
Este enfoque propone bajar el ritmo y dar una sensación más analógica a través de la tipografía y las imágenes, con filtros de imagen clásicos, fuentes retro, desenfoque, grano, texturas, luz suave y paletas de colores pastel. Todo ello son solo algunos ejemplos de las prácticas que usan los diseñadores web para crear experiencias cercanas.
Animación tipográfica / tipografía cinética
El texto en movimiento puede captar la atención, establecer un tono, resaltar los fragmentos importantes y guiar la mirada del usuario por la página. Si vas a animar texto en Webflow, nuestra guía visual de las funciones de easing en Webflow te ayuda a elegir la curva de movimiento adecuada. Es una tendencia que, en realidad, existe desde los años cincuenta, cuando las películas empezaron a usar títulos de crédito animados en lugar de texto estático.
Diseño para todos
El diseño inclusivo afecta a cada paso del proceso de diseño de un sitio web, desde las decisiones estratégicas sobre el público objetivo hasta el tono de voz y la personalización, así como la definición del lenguaje gráfico de tu marca para que dé cabida a todos los géneros, puntos de vista, experiencias y situaciones. Mirar el diseño inclusivo desde otras perspectivas significa también atender a distintas discapacidades haciendo tu sitio más accesible, algo a lo que todo estudio de Webflow debería aspirar.
Otro elogio para Webflow: ha avanzado mucho en diseño más inclusivo. Puedes previsualizar tu proyecto para distintos tipos de daltonismo y recibir avisos cuando los elementos no tienen suficiente contraste, cuando te has saltado un nivel de encabezado (lo que dificulta que los lectores de pantalla entiendan la estructura), cuando falta el texto alternativo, cuando hay enlaces poco descriptivos, etc., etc.
Para saber más sobre tono, imágenes, etc., consulta el breve artículo de Webflow sobre contenido inclusivo y pásate por Webflow University para ver consejos sobre cómo hacer tu sitio más accesible.
Scrollytelling
Una forma cada vez más popular de aprovechar al máximo una interfaz digital y contar una historia compleja.
Efectos visuales que buscan cautivar al público y servirle contenido atractivo en bandeja de plata. El scrollytelling también se conoce como “visualización narrativa”: una serie de elementos visuales secuenciados y organizados cronológicamente para transmitir un mensaje concreto a los visitantes.
Scroll horizontal
Un diseño con desplazamiento lateral puede generar interacciones sorprendentes entre textos e imágenes.
Esto es especialmente cierto en sitios de portfolio, catálogos, mapas y similares. Descubrir proyectos, explorar ciudades y visitar galerías en línea resulta mucho más atractivo con una navegación lateral. Bien hecho, el scroll horizontal puede hacer que un sitio web sea más atractivo, divertido y memorable, como ilustra de maravilla el ejemplo de NOVA+ que verás a continuación.
Aquí hay que decir que Webflow puede ser un verdadero dolor de cabeza, porque la plataforma no lleva bien el desplazamiento lateral, pero quién dice que no se le pueda dar un pequeño hackeo. Lo hicimos para NOVA+, así que es algo perfectamente factible con el diseño en Webflow si hace falta. Echa un vistazo al proyecto NOVA+, donde usamos dos métodos distintos. El primero se basa en la posición del ratón y se desplaza a izquierda o derecha según dónde pases el cursor sobre la sección; el segundo te obliga a recorrer la sección mientras avanzas por la página.
Vídeo de fondo
¿Qué no te va a gustar? Con los avances en velocidad de banda ancha y el despliegue del 4G y el 5G prácticamente en todas partes, tener un buen vídeo en bucle detrás de tu contenido tiene todo el sentido. Incluso hemos creado un tutorial sobre cómo añadir vídeos de fondo a elementos del CMS en Webflow, algo que no se admite de serie. Así que échale un vistazo a nuestro tutorial sobre vídeos de fondo con CMS en listas de colección si te interesa. También hay un método más reciente que usa el Custom Element, que explicamos en nuestro artículo sobre vídeos de fondo con CMS usando el Custom Element.
