20 tendencias en diseño web para 2023 + ejemplos

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:

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

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.

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

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.

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

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

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

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

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

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

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

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

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

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

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

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

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:

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,

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.

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:

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.

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 😉