20 tendencias en dise├▒o web para 2024 + 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 2024 con ejemplos reales de cada una de ellas.
tendencias dise├▒o web 2024

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:

tendencias dise├▒o web 2024: vectores
susanatorralbo.com

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.

tendencias dise├▒o web 2024: ilustraciones
ibelina.com

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

tendencias dise├▒o web 2024: ilustraciones
oatly.com

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.

tendencias dise├▒o web 2024: iconos
fisioterapiaescalante.com

En la web de esta cl├şnica de fisioterapia utilizamos iconos para mostrar de forma visual cada uno de sus tratamientos.

tendencias dise├▒o web 2024: iconos
foodforjoe.es

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.

tendencias dise├▒o web 2024: elementos en movimiento
estudiocomo.com/es

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

tendencias dise├▒o web 2024: elementos en movimiento
susanatorralbo.com

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.

tendencias dise├▒o web 2024: elementos en movimiento
maxcf.es

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:

tendencias dise├▒o web 2024: v├şdeos
dazzclinic.com
tendencias dise├▒o web 2024: v├şdeos
manelpardopersonaltrainer.es

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

tendencias dise├▒o web 2024: tipograf├şas
heurafoods.com

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.

tendencias dise├▒o web 2024: tipograf├şas
elenaganton.com

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.

tendencias dise├▒o web 2024: tipograf├şas
colladosbeach.com

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.

tendencias dise├▒o web 2024: textos con bordes
chillys.com
tendencias dise├▒o web 2024: textos con bordes
escueladecopywriting.com
tendencias dise├▒o web 2024: textos con bordes
maxcf.es

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

tendencias dise├▒o web 2024: l├şneas
sensa.co
tendencias dise├▒o web 2024: l├şneas
labasad.com
tendencias dise├▒o web 2024: l├şneas
elegantthemes.com
tendencias dise├▒o web 2024: l├şneas
salonsoweb.es

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.

tendencias dise├▒o web 2024: textos destacados
lean-labs.com

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

tendencias dise├▒o web 2024: textos destacados
salonsoweb.es

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

tendencias dise├▒o web 2024: textos destacados
luciajimenezvida.es

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.

tendencias dise├▒o web 2024: textos destacados

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:

tendencias diseño web 2024: máscaras de imagen
lean-labs.com

En este caso, la m├íscara tiene formas geom├ętricas similares a las del logotipo.

tendencias diseño web 2024: máscaras de imagen
uxdividemos.com

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.

tendencias diseño web 2024: máscaras de imagen
playinglish.es

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.

tendencias diseño web 2024: paletas de colores dinámicas
tendencias diseño web 2024: paletas de colores dinámicas
tendencias diseño web 2024: paletas de colores dinámicas
escueladecopywriting

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.

tendencias diseño web 2024: paletas de colores dinámicas
mrmarcelschool.com

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.

tendencias dise├▒o web 2024: dise├▒os modulares
labasad.com
tendencias dise├▒o web 2024: dise├▒os modulares
extraordinaria.es

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

tendencias dise├▒o web 2024: sliders o carruseles
hesperides.edu.es

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.

tendencias dise├▒o web 2024: sliders o carruseles
nenadacontemusic.com

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:

tendencias diseño web 2024: máscaras y patrones
wpdemo.archiwp.com (máscaras sobre imágenes de fondo)
tendencias diseño web 2024: máscaras y patrones
ieneabogados.es (fondo con patr├│n)

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

tendencias dise├▒o web 2024: realidad virtual
Ikea

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.

tendencias dise├▒o web 2024: realidad virtual
Renault

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:

tendencias dise├▒o web 2024: interacciones
hellocanaryislands.com

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.

tendencias dise├▒o web 2024: interacciones

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.

Apple

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.

tendencias dise├▒o web 2024: degradados
monopo.london

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

tendencias dise├▒o web 2024: degradados
studiochenchen.com

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.

tendencias dise├▒o web 2024: degradados
sarahguo.com

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:

tendencias dise├▒o web 2024: tipograf├şas sobredimensionadas
aluminium.index.studio

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.

tendencias dise├▒o web 2024: tipograf├şas sobredimensionadas
Apple
tendencias dise├▒o web 2024: tipograf├şas sobredimensionadas
Apple

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.

tendencias dise├▒o web 2024: glassmorphism
Xiaomi
tendencias dise├▒o web 2024: glassmorphism
Samsung
tendencias dise├▒o web 2024: glassmorphism
Revolut

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

tendencias dise├▒o web 2024: inteligencia artificial

Y el resultado del texto generado mediante IA es ├ęste:

tendencias dise├▒o web 2024: inteligencia artificial

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.

tendencias dise├▒o web 2024: inteligencia artificial

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

tendencias dise├▒o web 2024: inteligencia artificial

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 dise├▒o web 2024: inteligencia artificial

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:

Ôťů ┬┐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% 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.

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.

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.

tendencias dise├▒o web 2024
tendencias dise├▒o web 2024

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.

tendencias dise├▒o web 2024
tendencias dise├▒o web 2024

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.

Summary
­čÄĘ 20 tendencias en dise├▒o web para 2024 + ejemplos
Article Name
­čÄĘ 20 tendencias en dise├▒o web para 2024 + ejemplos
Description
Descubre las tendencias en dise├▒o web para 2024, los formatos y tipos de dise├▒o actuales, y ejemplos de webs originales y modernas.
Author
Publisher Name
https://www.maxcf.es/wp-content/uploads/2023/10/tendencias-diseno-web-2024-400x250.jpeg
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.