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!
Resumen
- Tendencias de diseño web para tener una web original y moderna
- #1 Vectores e ilustraciones
- #2 Iconos
- #3 Animaciones
- #4 Esquemas de colores degradados
- #5 Web-app
- #6 One-page
- #7 Contenido anidado
- #8 El vídeo como protagonista
- #9 Tipografías en los heros
- #10 Tipografía gigante
- #11 Separadores ligeros
- #12 Collages
- #13 Contenido en diferentes planos
- #14 Predominio de las líneas
- #15 Pantalla dividida
- #16 Diseños interactivos
- #17 Elementos en movimiento
- #18 Scroll horizontal
- #19 Pies de página detallados
- #20 Textos en formato circular
- #21 Efectos dinámicos en 3D
- #22 Máscaras de imagen
- #23 Imágenes flotantes superpuestas
- #24 Animaciones rotativas
- Tendencias en diseño web obligatorias
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?
- 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.
- 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.
- 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.
- 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:
✅ ¿Qué es una web legal?
- Tiene todos los textos legales actualizados y visibles desde cualquier página.
- Informa a sus usuarios sobre qué datos recoge y qué tratamiento hace de ellos.
- Tiene todos los formularios adaptados, ya sean de contacto, suscripción, registro o comentarios: check con la política de privacidad y capa informativa.
- Doble-optin: reconsentimiento cuando el usuario se suscribe.
- Las cookies cargan cuando el usuario las acepta y, en el caso de rechazarlas, no se produce dicha carga.
❌ ¿Qué NO es una web legal?
- Falta alguno de los textos legales, están desactualizados o no son accesibles desde cualquier parte de la web (errores muy comunes).
- No se explica el tratamiento que se hace con los datos personales recogidos.
- Los formularios no están correctamente adaptados.
- La suscripción se realiza directamente, sin el doble opt-in.
- Las cookies cargan sin que sean aceptadas, el usuario no puede rechazarlas o ajustarlas, o directamente se asume su aceptación cuando empieza a navegar.
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 😉
Artículo muy completo, ¡enhorabuena!
Llegué buscando algo de inspiración y me ha sido de mucha ayuda.
Me encanta la tendencia de letras gigantes y separadores ligeros, aunque considero que los elementos interactivos y sobre todo rotatorios y de scroll horizontal tampoco aportan mucho al usuario y pueden ralentizar la carga de la página.
Bueno.... a no ser que seas Apple o Nike y puedas crear páginas 100% de código que no dé problemas en ese sentido.
Un saludo
Hola, Antonio.
Me alegro de que te haya gustado el post y te sirva de inspiración 🙂
A mí las tipografías grandes me encantan también, coincido contigo.
Respecto a las las rotaciones y el scroll horizontal, si se optimizan bien, no deberían ser un problema.
¡Muchas gracias por pasarte!
Saludos
Post muy inspirador. Enhorabuena