tendencias en dise├▒o web para 2022
tendencias en dise├▒o web para 2022

24 tendencias en dise├▒o web para 2022 + ejemplos

24/11/2021

Shutterstock Inspiring

24/11/2021
Tiempo lectura:

Shutterstock Inspiring

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:

tendencias en dise├▒o web para 2022: vectores

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

tendencias en dise├▒o web para 2022: ilustraciones

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.

tendencias en dise├▒o web para 2022: iconos

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

tendencias en dise├▒o web para 2022: iconos

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.

tendencias en dise├▒o web para 2022: animaciones

Esta animaci├│n consiste en un movimiento descendente en los t├ştulos y una animaci├│n con efecto rebote en el bot├│n.

tendencias en dise├▒o web para 2022: animaciones

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:

tendencias en dise├▒o web para 2022: colores degradados

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

tendencias en dise├▒o web para 2022: colores degradados

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

tendencias en dise├▒o web para 2022: colores degradados

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:

tendencias en dise├▒o web para 2022: web-app
tendencias en dise├▒o web para 2022: web-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:

tendencias en dise├▒o web para 2022: one-page

#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).

tendencias en dise├▒o web para 2022: contenido anidado

#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.

tendencias en dise├▒o web para 2022: v├şdeo

#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:

tendencias en dise├▒o web para 2022: hero
tendencias en dise├▒o web para 2022: hero

#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:

tendencias en dise├▒o web para 2022: tipograf├şa gigante
tendencias en dise├▒o web para 2022: tipograf├şa gigante

#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.

tendencias en dise├▒o web para 2022: separadores

#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.

tendencias en dise├▒o web para 2022: collages

#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.

tendencias en dise├▒o web para 2022: contenido en diferentes planos
tendencias en dise├▒o web para 2022: contenido en diferentes planos

#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.

tendencias en dise├▒o web para 2022: l├şneas
tendencias en dise├▒o web para 2022: l├şneas
tendencias en dise├▒o web para 2022: l├şneas

#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.

tendencias en dise├▒o web para 2022: pantalla dividida

#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├ş.

tendencias en dise├▒o web para 2022: dise├▒os interactivos
tendencias en dise├▒o web para 2022: dise├▒os interactivos

#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:

tendencias en dise├▒o web para 2022: movimiento

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

tendencias en dise├▒o web para 2022: movimiento
bluecompass.com

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:

tendencias en dise├▒o web para 2022: scroll horizontal
tendencias en dise├▒o web para 2022: scroll horizontal

#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:

tendencias en diseño web para 2022: pies de página detallados
tendencias en diseño web para 2022: pies de página detallados
tendencias en diseño web para 2022: pies de página detallados

#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:

tendencias en dise├▒o web para 2022: textos circulares

#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:

tendencias en dise├▒o web para 2022: 3D
fondo con efecto 3D
tendencias en dise├▒o web para 2022: 3D
efecto 3D al pasar el rat├│n por el objeto

#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:

tendencias en diseño web para 2022: máscara de imagen
tendencias en diseño web para 2022: máscara de imagen
divi-pixel.com

#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.

tendencias en diseño web para 2022: imágenes flotantes superpuestas
divilover.com

#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 para 2022: animaciones rotativas
tendencias en dise├▒o web para 2022: animaciones rotativas
bluecompass.com

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.

tendencias en dise├▒o web para 2022: m├│vil
tendencias en dise├▒o web para 2022: m├│vil

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.

tendencias en dise├▒o web para 2021: seguridad
Aviso de web no segura
tendencias en dise├▒o web para 2021: seguridad
Mensaje que aparece si tu web es segura

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 ­čśë

Summary
­čÄĘ 24 tendencias en dise├▒o web para 2022 + ejemplos
Article Name
­čÄĘ 24 tendencias en dise├▒o web para 2022 + ejemplos
Description
Descubre las tendencias en dise├▒o web para 2022, los formatos y tipos de dise├▒o actuales, y ejemplos de webs originales y modernas.
Author
Publisher Name
Max Camu├▒as
Publisher Logo

2 Comentarios

  1. Antonio Luis Leiva

    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

    Responder
    • Max Camu├▒as

      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

      Responder

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Para cumplir con el nuevo RGPD y que tus datos est├ęn a salvo, debes leer y aceptar mi pol├ştica de privacidad. Tus datos ser├ín guardados en SiteGround y WordPress, mi proveedor de hosting y el CMS que utilizo en esta web.

¿Necesitas una página web, blog, landing o tienda online?
¡PIDE TU
PRESUPUESTO!

Dise├▒a
tu web

Dise├▒a
tu imagen

Impulsa
tu proyecto

Optimiza
y posiciona

masterclass

10 CLAVES PARA QUE TU WEB BRILLE CON LUZ PROPIA

MASTERCLASS: 10 claves para que tu web brille con luz propia

gu├şa

PARA DISE├ĹAR LOGOTIPOS MEMORABLES

GU├ŹA para dise├▒ar logotipos memorables