20 tendencias en diseño web para 2024 + ejemplos

2023 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 2024.

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

Empezaré mencionando las que hemos visto a lo largo de 2023 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 varios ejemplos de ambas opciones:

En la web de Susana, puedes ver cómo utiliza los vectores como recurso visual con distintos objetivos: acompañar a su propuesta de valor, separar las distintas secciones y reforzar su branding.

En el caso de la web de Ibelís, utiliza las ilustraciones para mostrar sus servicios e incluso los testimonios de sus clientas.

Por último, te dejo una web donde creo que han hecho un uso sublime de las ilustraciones, que además son personalizadas.

#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 de fisioterapia utilizamos iconos para mostrar de forma visual cada uno de sus tratamientos.

En esta web de comida para mascotas, utilizan iconos de forma muy creativa para explicar todo su mensaje: precio, beneficios, funcionamiento, etc.

#3 Movimientos y animaciones

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

Te dejo unos ejemplos donde puedes ver elementos animados y en movimiento.

En este ejemplo, el texto en movimiento se ha empleado como elemento separador, además de mostrar los servicios que ofrecen.

Un ejemplo muy similar es el de la web de Susana que ya hemos visto en uno de los epígrafes anteriores, donde puedes ver un texto en movimiento que precede a mostrar sus servicios y soluciones.

Por último, te quiero mostrar estos textos circulares con movimiento que he utilizado como recurso visual en varias de las páginas de mi web y que me sirven para reforzar elementos concretos del mensaje.

#4 El vídeo es 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.

Te dejo dos ejemplos donde puedes ver vídeos utilizados como fondo de elementos con ancho completo:

#5 Tipografías con personalidad

Al igual que sucede con el vídeo, la tipografía vuelve a convertirse en protagonista y destaca por encima del resto de elementos de la web, especialmente si tiene un estilo 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.

Puedes verlo en estos ejemplos:

En el primer ejemplo puedes ver cómo ha sido integrada la tipografía corporativa (la misma del logo) en el diseño y maquetación de la web.

En la web de Elena puedes ver la combinación de dos tipografías distintas en el diseño: una sin serifa como tipo general y otra de estilo handwriting empleada para destacar algunos copys y reforzar su mensaje.

En el tercer ejemplo, me encanta la combinación de tipografías que han hecho y es una muy buena muestra de que en una web se pueden usar tres o cuatro fuentes diferentes con un buen resultado.

Como puedes ver, utilizan una tipografía con serifa para los títulos, otra sin serifa para el cuerpo de texto, otra handwriting para destacar algunos textos, además de la de su logotipo.

#6 Textos con bordes o relieves

Y hablando de tipografías con personalidad, otra tendencia en diseño web son los textos con bordes o relieves de distinto tipo y grosor.

Te muestro varios ejemplos de tipografías con bordes para que puedas ver su uso y combinación con el resto de elementos de la web.

#7 Predominio de las líneas

Y de los textos con bordes y relieves pasamos al linework, que 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 con distintos formatos de líneas (curvas, rectas, más finas, otras más anchas, etc).

Te aviso que la web de Santi la voy a utilizar de ejemplo en varias de las tendencias porque es una pasada.

#8 Textos destacados

Otra de las tendencias en diseño web que ya hemos empezado a ver y seguiremos viendo son los textos destacados con fondos, sombras o efectos de color de distinto tipo y estilo, como puedes ver en estos ejemplos que te dejo a continuación.

En este sitio web utilizan un fondo de color azul claro con formas rectas para destacar algunos de los textos de sus títulos.

En la web de Santi también hay textos destacados de distintos colores con un efecto "brochazo" que además tiene animación.

Como te dije, la web de Santi Alonso iba a aparecer en varias de las tendencias 😉

Otro ejemplo de textos destacados con un fondo es la web de Lucía, donde utiliza su color corporativo para señalar algunos textos tanto en los títulos como en el cuerpo de texto.

Por último, te dejo como ejemplo mi propia web, en cuyos artículos puedes ver cómo destaco con uno de mis colores corporativos normalmente la temática principal de los posts al inicio de éstos.

#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 muy interesante y creativa es rodearlas de iconos, colores y formas, lo que se conoce como máscaras de imagen, y que te muestro en estos ejemplos:

En este caso, la máscara tiene formas geométricas similares a las del logotipo.

En este ejemplo, la máscara tiene forma de triángulo con los bordes redondeados y además incluye elementos gráficos como son las notas musicales.

Similar a la anterior, esta web incluye una máscara con bordes redondos y algunos iconos o textos.

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

Si buscas inspiración en lo que se refiere a paletas dinámicas y atrevidas en una web, échale un vistazo a Escuela de Copywriting, donde me parece que han hecho una combinación de colores chulísima. El resultado es muy creativo, moderno y diferente a lo que estamos acostumbrados a ver habitualmente.

Te dejo otro ejemplo donde puedes ver que han integrado muchos colores tanto en el fondo plano (rosa) como en la ilustración que la acompaña a la derecha.

#11 Diseños modulares

Los diseños con formato modular ya fueron tendencia en el pasado y parece que ahora podríamos volver a verlos en diseño web.

Se trata de un tipo de diseño en el que cada elemento se plantea como un módulo independiente, pero integrados en un concepto común.

Es decir, su característica principal es que el diseño se basa en elementos independientes con forma cuadrada.

Te dejo un par de ejemplos con esta técnica para que veas su resultado a nivel visual.

#12 Sliders o carruseles

Aunque no soy muy fan de los sliders, es un elemento que se sigue usando en diseño web y que no termina de irse. De hecho, en los últimos meses veo que hay más sitios que los usan y parece que han vuelto (igual es imaginación mía).

Como digo, no es un recurso que me guste utilizar, pero si está justificado y bien optimizado, sirve para mostrar varios contenidos (fotos, textos, noticias) en una sola visualización.

Te dejo un par de ejemplos donde creo que los carrureles están bien empleados.

En la web de esta universidad utilizan los sliders a dos columnas para mostrar diferentes banners -a modo de anuncio- que enlazan con otras páginas del sitio.

En el caso de Nena Daconte, han recurrido a un carrusel a pantalla completa para mostrar a golpe de vista las fotografías de su último disco.

#13 Máscaras y patrones

Las máscaras ya las he mencionado en una de las tendencias anteriores, pero ahora quiero hablarte también de los patrones.

Ambos son 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 integrando diferentes elementos.

Te dejo varios ejemplos donde puedes ver el uso de estos dos recursos visuales:

#14 Realidad virtual

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

Sitios como Airbnb, que te permite 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 varios ejemplos:

El planificador de Ikea te permite diseñar y organizar una estancia de tu casa con todo tipo de detalles y opciones gracias a la realidad virtual: tamaño, distribución, organización o forma de la habitación. Su objetivo es que puedas imaginar cómo quedarían sus muebles, por ejemplo, en tu cocina.

La web de Renault dispone de un configurador de vehículos con el que puedes elegir todos los detalles personalizados: versión, motor, diseño, equipamiento y accesorios. Además, gracias a la realidad virtual puedes ver el resultado tanto por dentro como por fuera del coche.

#15 Interacciones atractivas

Las interacciones son acciones o movimientos que se producen al interactuar con algún elemento del diseño: acercar el ratón, ponerlo encima, clicar, desplazarse, etc.

Veamos varios ejemplos:

El primer ejemplo es una web turística de las Islas Canarias donde han incluido un mapa interactivo del archipiélago a través del cual te puedes mover con el ratón y, si lo fijas en cualquiera de las islas, aparece un banner con información ampliada (nombre, descripción e imagen), que además, al clicar, te lleva a una ficha de esa isla donde hay información ampliada.

En el segundo 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.

Y por último, un magnífico ejemplo en lo que al uso de interacciones se refiere. Apple muestra sus dispositivos con unos efectos muy realistas y realmente elegantes.

#16 Degradados complejos

Los degradados, aunque no son nuevos, se usan con frecuencia y siguen renovándose y actualizándose. Con su ayuda es posible añadir profundidad a una imagen plana, pues adoptan nuevos estándares de interactividad y creatividad.

Los degradados son muy efectivos y útiles para crear una ilusión de movimiento, pero a la vez manteniendo lo minimalista, pues sustituye a los efectos de movimiento, pero sin llegar a utilizar la animación.

Veamos unos ejemplos.

En este ejemplo puedes ver un uso muy creativo y bonito de fondos en los que usan degradados de varios colores.

En esta web han utilizado sobre fondo claro un degradado con varios colores (verde y naranja), que además tiene movimiento a medida que vas moviendo el ratón.

En este ejemplo han empleado un degradado con varios clores, que además han combinado con tipografías como las que he mencionado en el punto 6.

#17 Tipografías sobredimensionadas

Las tipografías han ido ganando terreno en diseño web a lo largo de los últimos años, convirtiéndose incluso en un elemento protagonista.

Se trata de otorgarles un papel protagonista sobre el resto de elementos (vídeos, imágenes, textos, etc).

Es decir, ahora las tipografías aparecen en primer plano y con formato sobredimensionado, siendo parte destacado del diseño.

A la hora de elegir combinaciones de tipografías para web, recuerda que deben ser elegantes y casar entre sí (en realidad no es tarea sencilla).

Te dejo varios ejemplos:

En este sitio se combinan dos tipografías diferentes (una con y otra sin serifa), que además está bordeada en color blanco, como ya vimos en el punto 6.

Como puedes ver en estos dos ejemplos de Apple, las tipografías están sobredimensionadas y toman un papel principal, al mismo nivel que las fotos y los vídeos.

#18 Glassmorphism

El "glassmorphism" es lo que traduciríamos como formas o efectos de cristal (he intentado traducir su nombre, pero no he sabido cómo).

Todos los elementos de este estilo tienen un aspecto translúcido o transparente que, al integrarse sobre fondos de colores, ese efecto de cristal queda enfatizado.

Este efecto sirve para dar profundidad y jerarquía visual al usuario, y es muy útil para centrar la atención en contenidos que deben destacar por encima de otros.

Como puedes ver en los ejemplos que te dejo a continuación, esta técnica es muy habitual en sitios de tecnología, especialmente para mostrar dispositivos.

#19 Modo escuro

Como puedes ver en los últimos ejemplos que te he dejado para ilustrar varios epígrafes, el modo oscuro también es tendencia en diseño web y ha llegado para quedarse desde hace un tiempo.

#20 Inteligencia artificial

Antes de pasar a las tendencias que sí o sí son obligatorias, tengo que hablar obligatoriamente de la IA (Inteligencia Artificial), que al igual que en otros sectores y aspectos, también ha llegado al mundo del diseño web.

Aunque la IA es algo muy potente, creo que, de momento, al menos en lo que a web se refiere, puede utilizarse como complemento junto a otras herramientas de diseño.

¿Cómo podemos beneficiarnos de la IA en el sector del diseño web? (lo que he probado a día de hoy):

• Creando determinados contenidos escritos (textos).
• Escribiendo código (revisando más bien dicho).
• Generando imágenes, iconos o ilustraciones.

Te dejo algunos ejemplos de la integración que ha hecho Divi (otros editores visuales también la han integrado) para que veas el funcionamiento de la IA actualmente en diseño web para generar contenidos.

En el primer ejemplo, he creado un texto de presentación ficticio para mi página de inicio a partir de estas indicaciones:

Y el resultado del texto generado mediante IA es éste:

En el segundo ejemplo, he generado unas imágenes para la supuesta web de una cafetería y pastelería, también a partir de unas indicaciones concretas.

Como ves, se puede elegir el tamaño y formato según tus necesidades.

Éstas son las 4 imágenes que genera la IA:

Y este sería el resultado en el front-end con la imagen que menos "irreal" parece de las 4 que ha generado la IA.

Tendencias en diseño web obligatorias

Antes de terminar esta recopilación con las tendencias en diseño web para 2024, 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 a que el sitio 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 un sistema de triple 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, HTML y JavaScript.

Mobile first

Como ya habrás imaginado, la navegación desde dispositivos móviles es prioritaria desde hace unos años. El propio Google ha reconocido que prioriza la indexación de la versión móvil.

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

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.

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 todo sitio web, ya que la protección y privacidad del usuario es 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% los 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.

Cómo combinar estas tendencias de diseño web entre sí

Por último, quiero terminar esta entrada añadiendo un apartado que nunca había incluido para enseñarte unos ejemplos donde se combinan varias de las tendencias entre sí, que es algo muy habitual en diseño web.

En pudding.studio puedes ver combinadas entre sí muchas de las tendencias en diseño web que he mencionado:

• Ilustraciones personalizadas.
• Movimiento y animaciones.
• Vídeos.
• Tipografías con gran tamaño y otras personalizadas.
• Líneas.
• Textos destacados en otro color al pasar el ratón por encima.
• Paletas de colores dinámicas.
• Elementos modulares.
• Sliders.
• Interacciones.
• Efectos de cristal (glassmorphism).
• Modo oscuro.

Veamos otro ejemplo.

En el caso de pebblelife.com me encanta cómo han combinado de forma muy creativa y elegante diferentes tendencias entre sí:

• Movimientos y animaciones.
• El vídeo es protagonista en todo momento.
• Tipografías con personalidad (me gusta mucho la combinación de una fuente sin serifa y otra de tipo monospace).
• Uso de líneas, aunque de forma más discreta.
• Elementos con formato modular.
• Sliders muy creativos.
• Interacciones muy atractivas.
• Tipografías sobredimensionadas.
• Efectos de cristal (glassmorphism) en algunos elementos.

Y hasta aquí este repaso. Espero que esta recopilación con las tendencias en diseño web para 2024 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 a medida.