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:
- Las tendencias en diseño web más novedosas.
- Las tendencias que ya llevan un tiempo en vigor y seguirán vigentes en 2020.
- Las tendencias obligatorias.
¡Arranca uno de mis posts preferidos de año! 🙂
Resumen
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:
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.
Los separadores dinámicos también están de moda y son una forma de tener un diseño web actualizado.
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).
Y aquí puedes ver un ejemplo de ecommerce mostrando sus productos de forma asimétrica con un resultado muy creativo:
#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:
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:
#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:
#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:
#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:
En este caso, el efecto hover se produce sobre una imagen que cambia su color y hace efecto espejo.
Aquí el hover produce un cambio de color sobre el fondo de una cabecera, invirtiendo sus colores en blanco y negro.
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.
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:
Este primer ejemplo consiste en varios banners que muestran contenido oculto que despliega debajo de ellos.
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 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:
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.
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:
En la web de Nairamkitty empleamos elementos de imagen + texto superpuestos en varias de sus páginas.
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:
#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:
#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:
#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 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:
- SEO. A Google le gustan los sitios rápidos
- Conversiones. Si tu web carga lento, se verán afectadas negativamente tus tasas de venta y conversión.
- 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.
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 🙂
