20 tendencias en dise├▒o web para 2023 + ejemplos

¡No te quedes atrás con tu web! Si quieres estar a la última, te cuento cuáles son las tendencias en diseño web para 2023 con ejemplos reales de cada una de ellas.
tendencias en dise├▒o web para 2023

2022 llega a su fin y, siguiendo la tradici├│n de este blog, toca publicar uno de los art├şculos quecomo 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 2023.

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 2023 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 2023, hay algunas algunas que se mantienen, otras que han evolucionado y otras que cambian.

Empezar├ę mencionando las que hemos visto a lo largo de 2022 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 2023: vectores
ermconsulting.net

En la web de esta consultora utilizamos una serie de vectores para ilustrar las diferentes partes del contenido.

tendencias en dise├▒o web para 2023: ilustraciones
jmsolera.com

Y en el caso de este desarrollador, utilizamos unas ilustraciones 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 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 2023: iconos
clinicamayor.com

En la web de esta cl├şnica utilizamos unos iconos para ilustrar y diferenciar cada una de las especialidades.

tendencias en dise├▒o web para 2023: iconos
viajarengancha.com

Y en el caso de este blog de viajes, utilizamos iconos relacionados con su temática para mostrar varios descuentos, promociones y servicios recomendados.

#3 Movimientos y animaciones

Los elementos en movimiento y las animaciones son otra tendencia que llevamostiempo 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 2023: animaciones
bowtiestreet.es

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 2023: animaciones
bowtiestreet.es

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 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) sin salir de ella.

Aqu├ş puedes ver un ejemplo:

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

#5 El v├şdeo se convierte en protagonista

Es innegable que el v├şdeo ha ido ganando protagonismo en los ├║ltimos a├▒os y tambi├ęn ha llegado al dise├▒o web, donde se ha convertido en tendencia y su uso es muy habitual, especialmente empleado 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 2023: v├şdeo
manelpardopersonaltrainer.es

#6 Tipograf├şas m├ís llamativas y caracter├şsticas

Al igual que pasa con el v├şdeo, la tipograf├şa vuelve a convertirse en la protagonista y destaca por encima del resto de elementos de la web, especialmente tiene un formato llamativo, lo que le otorga al dise├▒o un toque caracter├şstico y diferenciador.

Por lo tanto, su uso y combinaci├│n con el resto de elementos web cobra una especial atenci├│n a la hora de plantear el dise├▒o web.

Puedes verlo en estos ejemplos:

tendencias en dise├▒o web para 2023: tipograf├şas
foodforjoe.es
tendencias en dise├▒o web para 2023: tipograf├şas
comunitatvalenciana.com
tendencias en dise├▒o web para 2023: tipograf├şas
lean-labs.com

#7 Predominio de las l├şneas

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

Para que lo entiendas de forma visual, te dejo varios ejemplos:

tendencias en dise├▒o web para 2023: l├şneas
mkparadise.com
tendencias en dise├▒o web para 2023: l├şneas

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

#9 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
inspirience.es
tendencias en diseño web para 2022: máscara de imagen
divi-pixel.com

#10 Paletas de colores dinámicas

En lo que a colores se refiere, pasamos de tendencias m├ís suaves en las que predominaban mucho los degradados a paletas de colores m├ís din├ímicas y con tonos m├ís potentes. Esto no implica que los degradados hayan dejado de estar de moda (al contrario), pero s├ş se observa cierta evoluci├│n en ese sentido.

Aqu├ş puedes ver varios ejemplos de sitios web con colores m├ís din├ímicos y potentes.

tendencias en diseño web para 2023: colores dinámicos
fecav.es
tendencias en diseño web para 2023: colores dinámicos
clopezpicks.com
tendencias en diseño web para 2023: colores dinámicos

#11 Patrones y máscaras

Una de ellas ya la he mencionado en una de las tendencias anteriores, pero ahora quiero hablarte de los patrones y las m├íscaras, recursos de dise├▒o que permiten crear una gran cantidad de efectos visuales mediante la combinaci├│n de colores, degradados, im├ígenes o v├şdeos.

Adem├ís, puedes combinar el uso de ambos para a├▒adir textura al dise├▒o de tu web, consiguiendo as├ş fondos muy creativos y visuales combinando diferentes elementos.

Te dejo varios ejemplos donde se superponen ambos elementos:

tendencias en diseño web para 2023: patrones y máscaras
tendencias en diseño web para 2023: patrones y máscaras
tendencias en diseño web para 2023: patrones y máscaras

#12 Realidad virtual

Las experiencias de realidad virtual en diseño web serán cada vez más habituales.

Sitios como Airbnb, que te permiten hacer un tour por un alojamiento antes de reservar, o Ikea, en cuya web puedes planificar c├│mo quedar├şa una estancia de tu hogar, ya est├ín usando esta tecnolog├şa.

El objetivo es ayudar al usuario en el proceso de toma de decisi├│n previa a realizar una acci├│n, ya sea comprar, reservar o pagar.

Te dejo como ejemplo el planificador de la web de Ikea:

tendencias en dise├▒o web para 2023: realidad virtual
ikea.com

#13 Elementos fijos

El uso de elementos que se quedan fijos al navegar, tambi├ęn llamados sticky (pegajosos), es habitual desde hace un tiempo e ir├í aumentando con el tiempo.

Esta t├ęcnica CSS permite fijar un elemento concreto para que, cuando el usuario navega por la web, se quede fijo. Su objetivo puede ser diverso; por ejemplo: mostrar un men├║ secundario, promocionar una oferta o estimular a que se realice determinada acci├│n (visitar otra p├ígina, comprar, reservar, registrarse, etc).

Como puedes ver en este ejemplo, al hacer scroll, hay unas pestañas que se quedan fijas y permiten desplazarte por las diferentes secciones de la misma página.

tendencias en dise├▒o web para 2023: elementos fijos

#14 Micro-interacciones

Las micro-interacciones son peque├▒as acciones o movimientos que se producen al interactuar con alg├║n elemento del dise├▒o: acercar el rat├│n, ponerlo encima, clicar, desplazarse, etc.

En este ejemplo puedes ver la interacci├│n que se produce en esta tarjeta de usuario giratoria: al pasar el rat├│n por encima se da la vuelta y aparece informaci├│n complementaria.

tendencias en dise├▒o web para 2023: micro-interacciones

#15 Micro-animaciones

Y de micro-interacciones, pasamos a una tendencia muy relacionada: las micro-animaciones, que son peque├▒os efectos de movimiento que contribuyen a dar dinamismo al dise├▒o mientras el usuario navega por la web.

Te dejo un par de ejemplos.

El primero es un icono animado que tiene movimiento.

tendencias en dise├▒o web para 2023: micro-animaciones

Y en este ejemplo puedes ver la animación que tiene el fondo, lo que genera un efecto en movimiento al desplazarte por la página.

#16 Men├║s dobles

Los men├║s dobles o mega-men├║s tambi├ęn son una tendencia cada vez m├ís habitual el dise├▒o web, especialmente en webs que tienen una gran estructura o se dedican a la venta (ecommerces grandes).

Te dejo dos ejemplos diferentes:

tendencias en dise├▒o web para 2023: men├║s dobles
made.com/es

El primer ejemplo es una web de venta de muebles con un men├║ doble que incluye una gran cantidad de informaci├│n: las p├íginas principales, las categor├şas de productos, un buscador, un aviso superior, el bot├│n de contacto, el selector de idiomas y los iconos de cuenta, carrito y favoritos,

tendencias en dise├▒o web para 2023: mega men├║
coolbottlesco.com

En el segundo puedes ver una tienda online que dispone de un mega-men├║ interactivo en el que aparecen los productos a medida que pasas el rat├│n por encima de las diferentes pesta├▒as.

Tendencias en dise├▒o web obligatorias


Antes de terminar esta recopilaci├│n con las tendencias en dise├▒o web para 2023, 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.

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

#18 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 2023: 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.

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

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

Parece algo obvio, pero a d├şa de hoy todav├şa me encuentro de vez en cuando sitios que no lo tienen instalado y, por lo tanto, no son seguras.

Espero que esta recopilaci├│n con las tendencias en dise├▒o web para 2023 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
­čÄĘ 20 tendencias en dise├▒o web para 2023 + ejemplos
Article Name
­čÄĘ 20 tendencias en dise├▒o web para 2023 + ejemplos
Description
Descubre las tendencias en dise├▒o web para 2023, los formatos y tipos de dise├▒o actuales, y ejemplos de webs originales y modernas.
Author
Publisher Name
Max Camu├▒as
Publisher Logo

0 comentarios

Enviar un comentario

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

[Informaci├│n B├ísica sobre Protecci├│n de Datos] Responsable: M├íximo Camu├▒as Fern├índez. Finalidad: moderar y responder comentarios. Legitimaci├│n: Consentimiento. Destinatarios: No se ceden a terceros. Se pueden producir transferencias. Derechos: Podr├ís ejercer tus derechos de acceso, rectificaci├│n, limitaci├│n y suprimir los datos en info@maxcf.es as├ş como el derecho a presentar una reclamaci├│n ante una autoridad de control. Informaci├│n adicional: en mi pol├ştica de privacidad encontrar├ís informaci├│n adicional sobre la recopilaci├│n y el uso de su informaci├│n personal ,incluida informaci├│n sobre acceso, conservaci├│n, rectificaci├│n, eliminaci├│n, seguridad, y otros temas.