24 tendencias en diseño web para 2022 + ejemplos

2021 llega a su fin y, siguiendo la tradición de este blog, toca publicar uno de los artículos que como diseñador web más me gusta escribir. Redoble de tambores: señoras y señores, les presento las tendencias en diseño web para 2022.

El diseño web es un sector en constante evolución y transformación, por lo que quienes nos dedicamos a ello estamos en continuo aprendizaje, investigación y prueba de nuevos formatos de diseño.

De modo que en este post recopilaré cuáles son las tendencias en diseño web para 2022 más punteras y que ya se están dejando ver desde hace un tiempo.

¡Empezamos!

Tendencias de diseño web para tener una web original y moderna

---

Entre todas las tendencias en diseño web que veremos en 2022, hay algunas algunas que se mantienen, otras que han evolucionado y otras que cambian.

Empezaré mencionando las que hemos visto a lo largo de 2021 y seguirán vigentes en los próximos meses, produciéndose así cierta continuidad en lo que a tendencias en diseño web se refiere.

#1 Vectores e ilustraciones

Empezamos por los elementos gráficos de una web, como son vectores e ilustraciones, unos recursos visuales muy utilizados desde hace un tiempo y que continuarás viendo.

Ya sabes que existen bancos donde descargar este tipo de recursos, pero si son personalizados para tu marca o proyecto, el diseño de tu web tendrá un plus de valor.

Te dejo un par de ejemplos de ambas opciones:

En la web de este consultor utilizamos una serie de vectores para ilustrar cada uno de sus servicios.

Y en el caso de este desarrollador, utilizamos unos dibujos personalizados que nos diseñó un ilustrador profesional. Como puedes ver, el resultado tiene un toque muy moderno y totalmente singular.

#2 Iconos

Como en el caso anterior, los iconos son un recurso muy utilizado en diseño web desde hace tiempo y que así seguirá siendo, tanto por las múltiples posibilidades que ofrece, como por sus resultados a nivel visual.

Te dejo varios ejemplos con distintos formatos y diseños.

En la web de esta ilustradora utilizamos unos iconos creados por ella misma para reforzar su marca personal y el valor de sus trabajos.

En esta tienda online utilizamos iconos de la biblioteca Font Awesome, que son de acceso libre, para explicar la propuesta de valor del negoio.

#3 Animaciones

Las animaciones son otra tendencia que llevamos tiempo viendo en diseño web y que llegó para quedarse. Estas pueden tener diferentes movimientos, efectos, sentido (de izquierda a derecha, de arriba hacia abajo, etc) o velocidad.

Te dejo un par de ejemplos de distintas animaciones en el mismo sitio web.

Esta animación consiste en un movimiento descendente en los títulos y una animación con efecto rebote en el botón.

En este caso, se trata de una animación con efecto cascada, donde cada una de las columnas de desliza hacia abajo a un ritmo diferente.

#4 Esquemas de colores degradados

Degradar varios colores para crear efectos visuales creativos también es una tendencia en diseño web que ya hemos visto y seguirá estando de moda.

Es una de mis técnicas favoritas, por lo que puedes verla en muchos de mis diseños, incluso en algunas partes de mi web.

Esta tendencia la seguiremos viendo en 2022, pero con cierta evolución, llevando las tonalidades "al límite" para conseguir resultados más potentes.

Te dejo algunos ejemplos:

En este proyecto utilizamos el color principal de la marca para degradarlo con el blanco y utilizarlo como fondo en la cabecera.

En este diseño degradamos varios elementos (cabeceras, separadores, títulos, botones, etc) con los dos colores principales del branding: naranja + amarillo.

Y en este ejemplo puedes ver un fondo degradado algo más diferente a lo habitual, que incluye varios colores que se degradan de tonos más oscuros a otros más claros mediante cortes diagonales.

Y ahora que hemos visto varias de las tendencias en diseño web que se quedarán un tiempo más, es el momento de ver cuáles son las nuevas.

#5 Web-app

Las experiencias similares a las de las aplicaciones móviles han llegado al diseño web y son una tendencia que cada vez iremos viendo más.

Consiste en aplicar técnicas y elementos similares al de las apps en el diseño de sitios web, especialmente en lo que a botones, experiencia de usuario y funcionalidades se refiere.

Te dejo un par de ejemplos donde puedes ver el uso de botones más típicos de una app:

#6 One-page

Los formatos one-page, e incluso las micro landing, consisten en sitios web de una sola página en la que aparece toda la información organizada en diferentes apartados y suelen incluir un menú superior con enlaces de ancla. Estos permiten al usuario navegar por la página (no en el caso de las micro landing).

Aquí puedes ver un ejemplo:

#7 Contenido anidado

Mostrar contenido anidado es muy habitual en diseño web. Se trata de presentar información en forma de pestañas, desplegables, acordeones, conmutadores o recursos similares.

Es algo que llevamos tiempo viendo, pero que ha ido evolucionando hasta conseguir resultados visuales más impactantes, como puedes ver en este ejemplo, donde el título de la sección va cambiando al hacer scroll a la vez que se queda pegado (efecto sticky).

#8 El vídeo como protagonista

En general, el vídeo ha ido ganando protagonismo en internet durante los últimos años y también ha llegado al diseño web, donde se ha convertido en tendencia y su uso es cada vez más habitual, especialmente utilizado como fondo.

En el ejemplo que te dejo a continuación puedes ver un vídeo como fondo en la cabecera de la página de inicio.

#9 Tipografías en los heros

En diseño web se conoce como hero al elemento de grandes dimensiones que es el que visualmente más destaca dentro de una página. Sería el elemento principal del diseño.

La tendencia en los últimos años era que los heros incluyeran imágenes, vídeos o gráficos como fondo.

Ahora han evolucionado y, en vez de los recursos multimedia, priman las tipografías como elemento protagonista.

Te dejo un par de ejemplos de una web donde utilizamos esta tendencia:

#10 Tipografía gigante

Muy relacionada con la tendencia anterior encontramos el uso de títulos a gran tamaño, donde la tipografía vuelve a convertirse en la protagonista y destaca por encima del resto de elementos de la web.

Puedes verlo en estos dos ejemplos:

#11 Separadores ligeros

Lo habitual en diseño web para separar las diferentes secciones cuando se maqueta una página es utilizar diversos colores o introducir un fondo con imagen o vídeo.

En los últimos años se pusieron de moda los separadores con distintas formas (circulares, curvas, etc), que han ido evolucionando hasta formas más creativas, como en el ejemplo que te muestro a continuación.

En este sitio utilizamos los recursos de branding que teníamos disponibles (unas manchas con varios colores) para separar las diferentes secciones de la página de inicio, consiguiendo una separación más fluida y ligera entre los diferentes apartados.

#12 Collages

El collage es una tendencia que consiste en integrar diferentes elementos web en un mismo apartado del sitio, como pueden ser, por ejemplo, varias imágenes, iconos o ilustraciones. Es decir, se trata de crear una composición con distintos recursos, que juntos forman una composición.

Aquí te dejo un ejemplo de collage web con varias imágenes que a su vez tienen distintas animaciones.

#13 Contenido en diferentes planos

Podríamos decir que esta tendencia consiste en sobreponer distintos elementos entre sí, pero más que una superposición, consiste en colocar dichos elementos en diferentes planos del diseño para conseguir un efecto visual con profundidad.

#14 Predominio de las líneas

El "linework" es una tendencia que se basa en el predominio de las líneas para reforzar algunos elementos de la web: botones, bordes, marcos, separadores, etc.

Para que lo entiendas de forma visual, te dejo varios ejemplos tanto de una tienda online como de un footer.

#15 Pantalla dividida

Esta tendencia consiste en dividir la pantalla en dos para mostrar elementos que están al mismo nivel o son similares. Por ejemplo: dos servicios o dos productos. Es decir, no se aplica si se trata de una imagen y de un texto (eso sería otro tipo de diseño).

En el ejemplo que te dejo a continuación puedes ver como la pantalla está dividida en dos servicios, donde la acción que debe realizar el usuario es elegir entre uno u otro para empezar a navegar por la página.

#16 Diseños interactivos

La interactividad es algo que ya llevamos viendo un tiempo en diseño web, pero ha ido evolucionando con el paso del tiempo hasta conseguir resultados más atrevidos y arriesgados que sorprendan al usuario.

Consiste en crear interacciones entre los diferentes elementos de un sitio web: botones, textos, fondos, etc.

Te dejo un par de ejemplos donde puedes ver cómo los distintos elementos generan una interacción entre sí.

#17 Elementos en movimiento

Muy relacionada con el punto anterior, otra tendencia en diseño web para 2022 consiste en el movimiento de los diferentes elementos del sitio, ya sean textos, iconos, imágenes o fondos, como puedes ver en estos ejemplos:

En este ejemplo, está animado el texto de color verde, que va cambiando de palabra cada varios segundos.

En el segundo ejemplo, varios de los elementos del fondo (el bus, el coche, los globos o las nueves) se mueven y generan un efecto muy creativo.

#18 Scroll horizontal

Tradicionalmente, cuando visitamos una web y hacemos scroll (nos deslizamos) la navegación se realiza de forma vertical, es decir, de arriba hacia abajo.

Esta tendencia consiste en convertir ese scroll vertical en horizontal y que el movimiento se produzca de forma lateral.

Puedes verlo en estos ejemplos:

#19 Pies de página detallados

Los pies de página o "footer" detallados también son tendencia en diseño web, incluso en formato doble o con varios apartados.

Recuerda siempre colocar en el pie el contenido complementario o menos relevante de todo el sitio.

En este post te doy unos consejos para crear un footer efectivo en tu web. Y aquí te dejo varios ejemplos:

#20 Textos en formato circular

Los textos en formato circular también pueden convertirse en una tendencia de diseño web durante los próximos meses. Ideales para títulos o textos cortos, son especialmente interesantes si tu marca tiene un logotipo circular o incorpora elementos de branding con formas redondeadas.

Un ejemplo:

#21 Efectos dinámicos en 3D

El 3D es un efecto que produce un objeto tridimensional en el ojo humano y se crea porque éste tiene anchura, altura y profundidad.

Pues bien, los efectos 3D también han llegado al diseño web, tanto a elementos concretos del sitio como a fondos.

Te dejo un ejemplo de cada uno:

#22 Máscaras de imagen

Las imágenes son fundamentales en una web y los diseñadores siempre buscamos ideas para integrarlas de forma creativa y seguir innovando.

Un opción para las imágenes es rodearlas de iconos, colores y formas, lo que se conoce como máscara de imagen, y que te muestro en estos dos ejemplos:

#23 Imágenes flotantes superpuestas

Otra tendencia para conseguir un efecto dinámico son las imágenes flotantes superpuestas.

Consiste en mostrar varias imágenes con superposición entre ellas y, además, un efecto en movimiento. El resultado es muy pegadizo y atractivo, como puedes ver en este ejemplo.

#24 Animaciones rotativas

Como puedes ver, todo lo que implique animación, interacción y movimiento es una tendencia en diseño web para 2022.

Por ello, quiero hablarte de las animaciones rotativas, que se trata de elementos con movimiento, cuya animación se reinicia o va cambiando.

Puedes verlo en estos dos ejemplos:

Tendencias en diseño web obligatorias

---

Antes de terminar esta recopilación con las tendencias en diseño web para 2022, quiero mencionar algunas que son obligatorias y de las que ya he hablado en ediciones anteriores de este post.

Debes tener en cuenta que, más que tendencias, podríamos decir que son unas normas comunes que debe incluir todo sitio web.

Velocidad / optimización

Una buena velocidad de carga es fundamental en un sitio web por varios motivos:

• Usabilidad: queremos información rápida, no estamos dispuestos a esperar más de unos segundos para que una web cargue. Si tu web es lenta, el usuario se marchará.
• Conversiones: muy relacionado con el punto anterior; a mejor velocidad de carga, aumentará el número de conversiones.
• SEO: la velocidad de carga es uno de los factores clave en el posicionamiento de un sitio web.

Por lo tanto, te recomiendo optimizar tu web para reducir al máximo posible su velocidad de carga y además hacer un buen aprovechamiento de los recursos del servidor (ahorras espacio en tu hosting y tiempo de carga).

¿Algunos consejos rápidos?

1. Optimiza muy bien tus imágenes: súbelas siempre a tu web con las dimensiones requeridas por tu tema y comprimidas para reducir su tamaño sin perder calidad.
2. Utiliza un buen sistema de caché: para ello, existen plugins específicos, o bien puedes servirte del sistema de caché que te ofrezca tu propio servidor (si lo tiene). En el caso de SiteGround, mi proveedor de hosting, dispone de SuperCacher, su propio servicio de caché para optimizar el rendimiento.
3. Activa el lazyload (carga perezosa) en imágenes, vídeos e iframes para que este tipo de contenido sólo cargue cuando el usuario necesite visualizarlo. Con ello reducirás el número de solicitudes y mejorarás el tiempo de carga de tu web.
4. Comprime, combina y minifica los archivos CSS y JavaScript.

Mobile first

Como ya habrás imaginado, la navegación desde dispositivos móviles es prioritaria en estos momentos (y desde hace unos años ya). El propio Google ha reconocido que centra su indexación en la versión móvil del buscador.

Por lo tanto, esta tendencia, que prioriza la navegación (y la indexación) desde los teléfonos móviles, hace que, a la hora de diseñar y desarrollar sitios web, se priorice a este tipo de dispositivos.

Ten en cuenta que ya no hablamos tanto de diseño responsive, pues es un concepto que ha ido evolucionando en los últimos años. Ahora es habitual que una web tenga un diseño para la versión de escritorio y otro específico para la versión móvil, como puedes ver, por ejemplo, en mi propia web.

Esta es la comparativa entre mi página de inicio en versión escritorio y móvil, donde puedes ver las diferencias:

🖥 En escritorio, la imagen principal forma parte del fondo de la cabecera y los distintos textos están encima de ella sobre un fondo semitransparente.

📱 En móvil, esa imagen se convierte en un elemento independiente y los textos no están colocados encima, sino a continuación y sobre fondo totalmente blanco. Además, aparecen dos llamadas a la acción que en escritorio no existen.

Legalidad y RGPD

De nada sirve tener un sitio con un diseño a la última si no es una web legal, es decir, si no cumple rigurosamente con el Reglamento General de Protección de Datos (RGPD) y la LOPD (Ley Orgánica de Protección de Datos).

Este es un tema imprescindible en toda página web, ya que la privacidad del usuario es algo fundamental.

Por lo tanto, tener una web legal es totalmente obligatorio, sí o sí.

Te dejo un resumen para que lo entiendas de forma más gráfica:

Este es un resumen "grosso modo". Si necesitas más información sobre legalidad web, te recomiendo echarle un vistazo a los kits de Marina Brocca para legalizar tu web, mi profesional de confianza en esta materia.

Seguridad

Terminamos este repaso hablando de seguridad, un tema fundamental tanto por la privacidad de tus usuarios como por la protección de tu sitio para evitar ataques.

Para tener un sitio seguro, es fundamental disponer un certificado SSL que cargue tu web bajo protocolo HTTPs (y no http).

Estos certificados puedes descargarlos y activarlos directamente desde tu proveedor de hosting (el 95% lo incluyen de forma gratuita).

Ten en cuenta que, desde hace un tiempo, la mayoría de navegadores muestran un mensaje que indica que el sitio no es seguro si la web no cuenta con el certificado SSL.

Además, si tienes una tienda online, el protocolo HTTPs es obligatorio para que funcionen las pasarelas de pago.

Espero que esta recopilación con las tendencias en diseño web para 2022 te sea de mucha utilidad si estás pensando en crear una web o ya tienes una y quieres actualizarla. Recuerda que, si necesitas ayuda con este proceso, tienes a tu disposición mi servicio de diseño web 😉