19 tendencias en dise├▒o web para 2020 + ejemplos

Autor: Max Camu├▒as

Fecha: 26/11/2019

El final de 2019 se acerca y, como cada año, es el momento ideal para analizar cuáles serán las tendencias de diseño web para 2020, un tema que me apasiona.

Las tendencias y t├ęcnicas creativas son cada vez m├ís exigentes en dise├▒o web, por lo que requiere de quienes somos dise├▒adores web un estudio y an├ílisis constante para estar siempre actualizados.

Por ese motivo, en este post te mostrar├ę las tendencias en dise├▒o web para 2020, desde las m├ís novedosas a las que ya est├ín vigentes desde hace unos meses, con ejemplos reales de todas ellas.

He querido organizar el post en tres apartados diferentes:

  1. Las tendencias en diseño web más novedosas.
  2. Las tendencias que ya llevan un tiempo en vigor y seguirán vigentes en 2020.
  3. Las tendencias obligatorias.

┬íArranca uno de mis posts preferidos de a├▒o! ­čÖé

Tendencias de dise├▒o web para 2020


Empiezo mencionando las tendencias en diseño web más novedosas, creativas y vanguardistas, en las que te debes fijar si quieres tener una página a la última.

#1 Elementos dinámicos

Los elementos dinámicos, tales como animaciones, ilustraciones, gifs o efectos flexibles, han llegado al diseño web para quedarse durante un tiempo.

Este tipo de dise├▒os consiguen unos resultados muy visuales y creativos siempre que se combinen de forma acertada. Como siempre digo, si algo suma a una web, se queda; si resta, se quita.

Aqu├ş te dejo varios ejemplos con formatos diferentes:

tendencias en diseño web para 2020: elementos dinámicos (ilustraciones)

Como puedes ver, en esta web utilizados ilustraciones de los autores para reforzar el mensaje, acompa├▒adas de colores muy vivos y algunos textos con efecto degradado.

Siempre que utilices este tipo de recursos gráficos, mi consejo es que contrates a un diseñador gráfico para que las ilustraciones sean totalmente personalizadas.

tendencias en diseño web para 2020: elementos dinámicos (movimiento)

Los separadores din├ímicos tambi├ęn est├ín de moda y son una forma de tener un dise├▒o web actualizado.

tendencias en diseño web para 2020: elementos dinámicos (flexibilidad)

Este tipo de elementos con efecto flexible o volteo tambi├ęn es tendencia y los ver├ís a menudo en los pr├│ximos meses.

Recuerda que este tipo de elementos no casan bien en todo tipo de webs, pues sirven para arriesgar a la hora de comunicar. Si tu empresa tiene un perfil más clásico o tradicional (formación, abogados, etc.), no te los recomiendo. Recuerda que cada web tiene su propio gancho y personalidad.

#2 Dise├▒os asim├ętricos

Otra tendencia en dise├▒o web para 2020 son las composiciones asim├ętricas. Hace unos a├▒os, hubieran sido interpretadas como ca├│ticas y desordenadas, al contrario que ahora, siempre que tengan un sentido visual y est├ęn justificadas.

Aqu├ş te dejo un ejemplo de p├ígina de preguntas frecuentes con dise├▒o asim├ętrico y tambi├ęn flexibilidad (como hemos visto en la primera tendencia).

tendencias en dise├▒o web para 2020: dise├▒os asim├ętricos

Y aqu├ş puedes ver un ejemplo de ecommerce mostrando sus productos de forma asim├ętrica con un resultado muy creativo:

tendencias en dise├▒o web para 2020: dise├▒os asim├ętricos

#3 Efecto movimiento

Los efectos en movimiento tambi├ęn han llegado al dise├▒o web y ya hemos empezado a verlos, pues transmiten una imagen de gran dinamismo y creatividad.

Un ejemplo ser├şa ese acorde├│n con movimiento horizontal, ideal para presentar diferentes servicios, por ejemplo:

tendencias en dise├▒o web para 2020: efecto movimiento

Otro ejemplo ser├şa esta composici├│n con cuatro columnas en la que cada una de ellas aparece a medida que el usuario hace scroll por el sitio:

tendencias en dise├▒o web para 2020: efecto movimiento

#4 Dise├▒os 3D

Los dise├▒os en 3D tambi├ęn ser├ín tendencia en dise├▒o web para 2020. Recuerda que este tipo de efectos son un poco arriesgados y, por lo tanto, tienen que tener una justificaci├│n dentro del dise├▒o.

Un ejemplo de uso de 3D y GIFs:

tendencias en dise├▒o web para 2020: 3D

#5 Contenido dividido o fusionado

Los dise├▒os con efecto dividido o fusionado son una de mis tendencias en dise├▒o web favoritas y, de hecho, ya he empezado a usarlos en alguno de mis ├║ltimos trabajos.

Te dejo varios ejemplos para que visualices esta tendencia de dividir los contenidos:

tendencias en dise├▒o web para 2020: contenido dividido o fusionado
tendencias en dise├▒o web para 2020: contenido dividido o fusionado

#6 Efectos hover

En dise├▒o web el hover es la alteraci├│n que se produce cuando pasas el rat├│n por encima de un elemento espec├şfico. Seguro que lo has visto cientos de veces en botones que cambian de color cuando pones el puntero encima.

Pues bien, una de las tendencias de dise├▒o web para 2020 es extender ese efecto o ┬źalteraci├│n┬╗ a otras partes de mayor tama├▒o en la web, como pueden ser bloques completos, fondos o im├ígenes.

Aqu├ş te dejo varios ejemplos ejemplos:

tendencias en dise├▒o web para 2020: efecto hover

En este caso, el efecto hover se produce sobre una imagen que cambia su color y hace efecto espejo.

tendencias en dise├▒o web para 2020: efecto hover

Aqu├ş el hover produce un cambio de color sobre el fondo de una cabecera, invirtiendo sus colores en blanco y negro.

tendencias en dise├▒o web para 2020: efecto hover

El tercer ejemplo se trata con una imagen que genera movimiento al poner el rat├│n encima.

Como ves, a partir de ahora será habitual conjugar el efecto hover con la primera tendencia que he mencionado (elementos dinámicos y en movimiento).

#7 Desplazamiento vertical

Las webs con desplazamiento vertical tambi├ęn van a ser tendencia en 2020. De hecho, ya he utilizado esta t├ęcnica en alguno de mis ├║ltimos trabajos.

Este formato consiste en que toda la informaci├│n del sitio se va desplazando de forma vertical sin moverse la pantalla a medida que el usuario hace scroll por la web.

Te dejo un ejemplo para que lo veas a la perfecci├│n en la web de Charo Guijarro.

tendencias en dise├▒o web para 2020: desplazamiento vertical

#8 Navegaci├│n oculta

Otro formato que verás en los próximos meses (ya lo he utilizado en alguna web) es la navegación oculta, que se trata de elementos que funcionan como un menú, pero realmente no lo son.

Es decir, una imagen, icono o bot├│n puede mostrar y enlazar con otros elementos o partes del sitio.

Te dejo dos ejemplos en los que puedes ver c├│mo funciona la navegaci├│n oculta:

tendencias en dise├▒o web para 2020: navegaci├│n oculta

Este primer ejemplo consiste en varios banners que muestran contenido oculto que despliega debajo de ellos.

tendencias en dise├▒o web para 2020: navegaci├│n oculta

En el segundo ejemplo puedes ver una p├ígina ┬źnosotros┬╗ o ┬źequipo┬╗ en el que el listado de nombres despliega la informaci├│n de cada autor.

#9 Barras adhesivas

Otra de las tendencias que ya se han empezado a ver son las barras adhesivas, especialmente si hablamos de un ecommerce.

Este tipo de elementos que quedan fijos a medida que el usuario se desplaza por el sitio (por el producto en este caso) ayudan a aumentar las conversiones y ventas de la tienda online.

Otro tipo de sitio en la que es posible usar barras adhesivas son las landing page en las que el usuario tiene que completar una acci├│n espec├şfica: comprar una entrada, reservar un producto, registrarse o darse de alta, etc.

Si vas a usar este recurso, recuerda que no se convierta en algo molesto para el usuario y que no distorsione su navegaci├│n.

tendencias en dise├▒o web para 2020: barra adhesivas

Tendencias de diseño web que vimos en 2019 y seguirán en 2020


Ahora que ya conoces cuáles son las tendencias de diseño web más novedosas, es el momento de echar la vista atrás y hacer un repaso por las que han sido tendencia en el último año y lo seguirán siendo durante un tiempo más.

Veamos cuáles son las tendencias que se quedan entre nosotros.

#10 Tipograf├şas como elemento protagonista

┬íEmpezamos fuerte! Las tipograf├şas han ido ganando terreno en dise├▒o web a lo largo de los dos ├║ltimos a├▒os.

Se trata de otorgarles un papel protagonista junto al resto de elementos (v├şdeos, im├ígenes, textos, etc).

Es decir, ahora las tipograf├şas aparecen en primer plano (en ocasiones con tama├▒o gigante) y son 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 en dise├▒o web para 2020: tipograf├şas

En la web de Jorge L├ízaro hemos utilizado una combinaci├│n de dos tipograf├şas (Montserrat + Oswald), en las que una de ellas es la principal y ocupa un lugar destacado en cabeceras o secciones con ancho completo.

tendencias en dise├▒o web para 2020: tipograf├şas

En el caso de Mam├í Esencial, utilizamos hasta cuatro tipograf├şas diferentes (Nunito Sans, Lora, Oswald y Magic), que tuvimos que combinar con sumo cuidado para que no restaran protagonismo unas a otras.

No recomiendo utilizar tantas fuentes diferentes (dos o tres como mucho) a no ser que tu marca est├ę muy desarrollada a nivel de branding y tenga mucha personalidad, como es este caso.

Recuerda que, a la hora de combinar tipograf├şas, es fundamental que cada una de ellas tenga su propio espacio y justificaci├│n.

#11 Superposiciones

Las estructuras superpuestas tambi├ęn han sido tendencia durante el ├║ltimo a├▒o y continuar├ín si├ęndolo por un tiempo m├ís.

De hecho, si eres seguidor de mis trabajos de diseño web, verás que es un recurso que he utilizado en varios sitios.

Aqu├ş tienes un par de ejemplos:

tendencias en dise├▒o web para 2020: superposiciones

En la web de Nairamkitty empleamos elementos de imagen + texto superpuestos en varias de sus páginas.

tendencias en dise├▒o web para 2020: superposiciones

En el caso de Rmove Training utilizamos otro tipo de formato, que consiste en superponer dos elementos gráficos (el logo encima de la imagen que tiene la cabecera como fondo).

#12 Animaciones

Las animaciones tambi├ęn llegaron hace un tiempo y todav├şa seguiremos vi├ęndolas.

Como ya sabes, consiste en animar determinados elementos de una web para conseguir un efecto dinámico.

Siempre que las utilices, recuerda que deben tener justificaci├│n y sumar al dise├▒o. Si restan, no las uses. Cuidado con ellas, las carga el diablo ­čśů

Aqu├ş puedes ver las animaciones que utilizamos en la web de Verdelima Digital y c├│mo las conjugamos:

tendencias en dise├▒o web para 2020: superposiciones

#13 Parallax

El parallax es otro de los efectos que están de moda en diseño web, pues otorgan un aire de dinamismo a los elementos que lo incorporan.

Este efecto consiste en que, cuando entras en una web, hay determinados elementos o bloques en los que, al hacer scroll, el fondo se mueve a un velocidad diferente a la del resto de contenido.

Seguro que lo has visto en un mont├│n de sitios. Adem├ís, aqu├ş te dejo un ejemplo que utilizamos en la web de ABEO:

tendencias en dise├▒o web para 2020: efecto parallax

#14 V├şdeos como fondo

Otro formato para utilizar como fondos es el uso de v├şdeos, algo que hemos visto a lo largo de este a├▒o y que seguir├í presente.

El v├şdeo ha llegado al dise├▒o web para quedarse y una forma de conseguir resultados muy din├ímicos y creativos es emplearlos como fondo.

Aqu├ş puedes ver c├│mo lo hicimos en la web de Laia Divols:

tendencias en dise├▒o web para 2020: efecto parallax

#15 Chatbots

Los chatbots tambi├ęn llevan un tiempo entre nosotros y han ido ganando protagonismo en dise├▒o web, pues permiten automatizar procesos de marketing y de atenci├│n al cliente online.

Son especialmente recomendables en tiendas online para soporte o en webs que ofrecen alg├║n tipo de servicio como canal para responder dudas a los usuarios.

Hablamos, por tanto, de chats de soporte, env├şo de tickets, contacto a trav├ęs de WhatsApp o Telegram, etc.

Un ejemplo de esta ├║ltima opci├│n:

tendencias en dise├▒o web para 2020: chatbots

Tendencias en dise├▒o web obligatorias


Por ├║ltimo, quiero dedicar un peque├▒o apartado para mencionar algunas tendencias de dise├▒o web que son obligatorias, es decir, que tu sitio debe tener s├ş o s├ş para estar a la ├║ltima.

Son t├ęcnicas que han trascendido al resto de tendencias y se han convertido en fundamentales, independientemente del tipo de web que tengas:

#16 Responsive

En 2020 toda web que no sea responsive est├í condenada al fracaso. Parece algo obvio, pero todav├şa quedan muchos sitios en Internet que no tienen una buena adaptaci├│n a los dispositivos m├│viles.

#17 Web segura

Otra regla b├ísica es que toda web debe (o deber├şa, mejor dicho) cargar bajo protocolo HTTPs por temas de seguridad. Adem├ís, la mayor├şa de navegadores ya muestran un mensaje de alerta si navegas por una web no segura.

Te recuerdo que el certificado Let’s Encrypt SSL es totalmente gratuito, automatizado y abierto. Por lo tanto, tu proveedor de hosting deber├şa ofrec├ęrtelo gratis.

Si tu hosting te cobra por activar en tu web algo que es gratis, o bien te pone problemas para hacerlo, mi consejo es que huyas a otro proveedor.

Ya sabes que el hosting para WordPress que siempre recomiendo por su calidad y soporte t├ęcnico es SiteGround.

#18 Legalidad y RGPD

Otro tema fundamental es el RGPD (Reglamento General de Protecci├│n de Datos), que adem├ís es obligatorio. S├ş, es de obligado cumplimiento aunque tengas un simple blog y no vendas nada.

Es decir, que si tienes un blog, ya est├ís recogiendo datos del usuario con las cookies, el formulario de contacto o los comentarios en los art├şculos.

Por supuesto, cada web debe adaptarse a la legalidad de forma diferente, en función del sector, negocio o actividad que desarrolle. No es lo mismo un blog, que una página de servicios o un ecommerce.

Como dato fundamental, tu web debe tener publicados y visibles los siguientes textos legales: aviso legal, pol├ştica de privacidad y pol├ştica de cookies.

Si quieres saber más sobre este tema, puedes leer este post en el que Marina Brocca, experta en legalidad online, te explica cómo conseguir una web legal y 100% RGPD sin morir en el intento.

Adem├ís, si necesitas adaptar tu web a la legalidad vigente, te recomiendo echarle un vistazo a sus kits para RGPD ­čśë

#19 WPO

Por ├║ltimo y no por ello menos importante, esta el tema de la velocidad de carga.

A d├şa de hoy, es obligatorio tener una web que cargue r├ípido por varios motivos:

  1. SEO. A Google le gustan los sitios rápidos
  2. Conversiones. Si tu web carga lento, se verán afectadas negativamente tus tasas de venta y conversión.
  3. Usabilidad. Si tu p├ígina tarda m├ís de lo normal en cargar, el usuario la va a cerrar antes de que termine el proceso de carga. Seguro que t├║ tambi├ęn lo has hecho en alguna ocasi├│n.

¿Cuál es un buen dato de velocidad de carga en una web?

Pues esto depende de varios factores, pero unos datos est├índar ser├şan:

  • Menos de un segundo: carga ├│ptima.
  • Entre 1 y 3 segundos: carga correcta.
  • M├ís de 3 segundos: carga negativa.

De modo que, si tu web tarda más de 3 segundos en cargar, te recomiendo ponerte mano a la obra para reducir ese dato.

Aqu├ş te muestro varios plugins para optimizar WordPress y acelerar la velocidad de carga.

Aqu├ş puedes ver como ejemplo los datos de WPO de mi web, alojada en SiteGround y con el plugin WP Rocket para la gesti├│n de la cach├ę, optimizaci├│n y base de datos.

tendencias en dise├▒o web para 2020: WPO (velocidad de carga)

Y me dir├ís: Max, estas tendencias son algo mega b├ísico. S├ş, por supuesto que lo son, pero te sorprender├şa saber el n├║mero de webs que no se adaptan bien al m├│vil, no cargan bajo protocolo https o directamente no est├ín adaptadas a la legalidad en cuanto a protecci├│n de datos.

Antes de terminar, te dejo un v├şdeo donde recopilo todas las tendencias que he mencionado en el post.

Hasta aqu├ş este repaso a las tendencias en dise├▒o web para 2020. Espero que, si tienes que lanzar un proyecto nuevo o redise├▒ar la web que ya tienes, estos ejemplos te ayuden y sean de gran utilidad. Y si necesitas ayuda con tu p├ígina, te animo a echarle un vistazo a mi servicio de dise├▒o web en WordPress personalizado ­čÖé

Portada: freepik

Summary
19 tendencias en dise├▒o web para 2020 + ejemplos
Article Name
19 tendencias en dise├▒o web para 2020 + ejemplos
Description
En este post te cuento cuáles son las tendencias en diseño web para 2020, los formatos y tipos de diseño más actuales, y te muestro ejemplos reales.
Author
Publisher Name
Max Camu├▒as
Publisher Logo

4 Comentarios

  1. Guillermo

    Muchas gracias Max, excelente como siempre !

    Sabes, si con DIVI se puede lograr el Desplazamiento Vertical ?

    Saludos

    Responder
    • Max Camu├▒as

      Hola Guillermo,

      S├ş, con un par de scripts es posible hacerlo y no es especialmente complicado.

      De hecho, todos los ejemplos que he puesto en el post est├ín dise├▒ados con Divi ­čśë

      Saludos

      Responder
  2. Mariano

    Hola. He descubierto tu blog recientemente y me parece muy ├║til y con buen contenido. Por lo menos para los que estamos empezando en este mundillo. Gracias

    Responder
    • Max Camu├▒as

      Hola Mariano,

      Me alegro de que te sea ├║til. Muchas gracias ­čÖé

      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.

Soy Max Camu├▒as y te doy la bienvenida a mi blog (mi casa).

Por aqu├ş hablo sobre los temas que me apasionan: WordPress, Marketing, Social Media o Blogging.

Me encanta ayudar a otras empresas a marcas a crear el dise├▒o de su web desde cero.

┬íM├üS SOBRE M├Ź!

masterclass
CÓMO PLANIFICAR TU PÁGINA WEB PARA QUE TU NEGOCIO BRILLE
¡accede gratis!