El final de 2019 se acerca y, como cada año, es el momento ideal para examinar cuáles serán las tendencias depara 2020, un tema que me apasiona.
Las tendencias y técnicas creativas son cada vez más exigentes en diseño web, con lo que requiere de quienes somos diseñadores web un estudio y análisis constante para estar siempre y en todo momento actualizados.
Por ese motivo, en este blog post te mostraré las tendencias en diseño web para 2020, desde las más novedosas a las que ya están actuales desde hace unos meses, con ejemplos reales de todas y cada una .
He querido organizar el artículo en 3 apartados diferentes:
- Las tendencias en diseño web más novedosas.
- Las tendencias que ya llevan un tiempo en vigor y seguirán actuales en 2020.
- 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 deseas tener una página a la última.
#1 Elementos dinámicos
Los elementos dinámicos, tales como animaciones, ilustraciones, gifs o bien efectos flexibles, han llegado al diseño web para quedarse durante un tiempo.
Este tipo de diseños consiguen creacion de paginas web a medida madrid visuales y creativos toda vez que se combinen de forma acertada. Como siempre y en toda circunstancia 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 empleados ilustracionesde los autores para reforzar el mensaje, acompañadas de colores muy vivos y ciertos 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 plenamente personalizadas.
Los separadores dinámicostambién están de moda y son una forma de tener un diseño web actualizado.
Este género de elementos con efecto flexible o volteotambién es tendencia y los verás de forma frecuente en los próximos meses.
Recuerda que este tipo de elementos no casan bien en todo género de webs, puesto que sirven para arriesgar a la hora de comunicar. Si tu empresa tiene un perfil más clásico o tradicional (formación, abogados, etcétera), no te los aconsejo. Recuerda que cada web tiene su 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, hubiesen sido interpretadas como caóticas y desorganizadas, al revés que ahora, toda vez 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 caso 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 comenzado 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 4 columnas en la que cada una de ellas aparece conforme 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 dos mil veinte. Recuerda que este género de efectos son un tanto arriesgados y, por tanto, deben tener una justificación en el diseño.
Un ejemplo de empleo de 3D y GIFs:
#5 Contenido dividido o fusionado
Los diseños con efecto dividido o bien fusionado son una de mis tendencias en diseño web preferidas y, de hecho, ya he comenzado a utilizarlos en alguno de mis últimos trabajos.
Te dejo múltiples ejemplos a fin de 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 sobre un elemento específico. Seguro que lo has visto cientos y 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 dos mil veinte es extender ese efecto o bien «alteración» a otras unas partes de mayor tamaño en la web, como pueden ser bloques completos, fondos o imágenes.
Aquí te dejo múltiples ejemplos ejemplos:
En este caso, el efecto hover se genera sobre una imagen que cambia su color y hace efecto espéculo.
Aquí el hover genera 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 produce movimiento al poner el ratón encima.
Como ves, de ahora en adelante será habitual conjugar el efecto hover con la primera tendencia que he mentado (elementos dinámicos y en movimiento).
#7 Desplazamiento vertical
Las webs con desplazamiento vertical también serán tendencia en 2020. En verdad, ya he empleado 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 conforme el usuario hace scroll por la web.
Te dejo un caso 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 empleado en alguna web) es la navegación oculta, que se trata de elementos que funcionan como un menú, mas verdaderamente no lo son.
Es decir, una imagen, icono o botón puede enseñar y enlazar con otros elementos o bien partes del sitio.
Te dejo 2 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 comenzado a ver son las barras adhesivas, singularmente si hablamos de un ecommerce.
Este género de elementos que quedan fijos conforme el usuario se desplaza por el lugar (por el producto en un caso así) ayudan a acrecentar las conversiones y ventas de la tienda on line.
Otro género de lugar en la que es posible utilizar barras adhesivas son las página de aterrizaje en las que el usuario tiene que completar una acción específica: comprar una entrada, reservar un producto, darse de alta o bien darse de alta, etc.
Si vas a emplear 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 dos mil diecinueve y seguirán en 2020
Ahora que conoces cuáles son las tendencias de diseño web más novedosas, es el instante 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 durante 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 seleccionar combinaciones de , recuerda que han de ser muy elegantes y casar entre sí (realmente, 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 bien secciones con ancho completo.
En el caso de Mamá Esencial, empleamos hasta 4 tipografías diferentes (Nunito Sans, Lora, Oswald y Magic), que debimos combinar con sumo cuidado para que no restaran estrellato unas a otras.
No aconsejo utilizar tantas fuentes diferentes (2 o bien 3 como mucho) a no ser que tu marca esté muy desarrollada a nivel de branding y tenga mucha personalidad, como es este caso.
planes de posicionamiento web , en el momento de conjuntar tipografías, es fundamental que cada una de ellas tenga su espacio y justificación.
#11 Superposiciones
Las estructuras sobrepuestas también han sido tendencia a lo largo del último año y continuarán siéndolo por un tiempo más.
De hecho, si eres seguidor de , verás que es un recurso que he usado en múltiples sitios.
Aquí tienes un par de ejemplos:
En la página web de Nairamkitty empleamos elementos de imagen + texto sobrepuestos en varias de sus páginas.
En el caso de Rmove Training empleamos otro género de formato, que consiste en sobreponer 2 elementos gráficos (el logo encima de la imagen que tiene la cabecera como fondo).
#12 Animaciones
Las animaciones también llegaron hace ya un tiempo y todavía seguiremos viéndolas.
Como bien sabes, consiste en animar ciertos elementos de una web para conseguir un efecto dinámico.
Siempre que las emplees, 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 empleamos 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, puesto que dan un aire de dinamismo a los elementos que lo incorporan.
Este efecto consiste en que, cuando entras en una web, hay determinados elementos o bien 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 caso que usamos en la web de ABEO:
#14 Vídeos como fondo
Otro formato para usar como fondos es el empleo de vídeos, algo que hemos visto durante este año y que seguirá presente.
El vídeo ha llegado al diseño web para quedarse y una forma de lograr resultados muy dinámicos y creativos es emplearlos como fondo.
Aquí puedes ver cómo lo hicimos en la página web de Laia Divols:
#15 Chatbots
Los chatbots también llevan un tiempo entre nosotros y han ido ganando estrellato en diseño web, puesto que dejan automatizar procesos de marketing y de atención al cliente en línea.
Son singularmente aconsejables en tiendas virtuales para soporte o bien en webs que ofrecen algún tipo de servicio como canal para contestar dudas a los usuarios.
Hablamos, por tanto, de chats de soporte, envío de tickets, contacto a través de WhatsApp o bien Telegram, etc.
Un ejemplo de esta última opción:
Tendencias en diseño web obligatorias
Por último, deseo 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 esenciales, con independencia del tipo de web que tengas:
#16 Responsive
En dos mil veinte 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 bien debería, mejor dicho) cargar bajo protocolo HTTPs por temas de seguridad. Además, la mayoría de navegadores ya muestran un mensaje de alarma si navegas por una web no segura.
Te recuerdo que el certificado Let’s Encrypt SSL es completamente gratuito, automatizado y abierto. Por tanto, tu debería ofrecértelo sin costo.
Si tu alojamiento te cobra por activar en tu página web algo que es gratis, o bien te pone problemas para hacerlo, mi consejo es que escapes a otro proveedor.
Ya sabes que el alojamiento para Wordpress que siempre y en todo momento recomiendo por su calidad y soporte técnico es .
#18 Legalidad y RGPD
Otro tema esencial es el RGPD (Reglamento General de Protección de Datos), que además es obligatorio. Sí, es de obligado cumplimiento aunque tengas un simple weblog y no vendas nada.
Es decir, que si tienes un weblog, 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 amoldarse a la legalidad de forma diferente, en función del campo, negocio o bien actividad que desarrolle. No es exactamente lo mismo un weblog, que una página de servicios o bien un ecommerce.
Como dato esencial, tu página 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 artículo en el que Marina Brocca, especialista en legalidad en línea, te explica .
Además, si necesitas amoldar tu web a la legalidad vigente, te invito a echarle un vistazo a sus kits para RGPD😉
#19 WPO
Por último y no por esta razón menos esencial, esta el tema de la velocidad de carga.
A día de el 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 de forma negativa 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 que termine el proceso de carga. Seguro que tú también lo has hecho en alguna ocasión.
¿Cuál es buen dato de velocidad de carga en una web?
Pues esto depende de múltiples factores, pero unos datos estándar serían:
Menos de un segundo: carga óptima. Entre 1 y tres segundos: carga correcta. Más de tres segundos: carga negativa.
De modo que, si tu página web tarda más de tres segundos en cargar, te invito a ponerte mano a la obra para reducir ese dato.
Aquí te muestro múltiples .
Aquí puedes ver como ejemplo los datos de WPO de mi web, alojada en SiteGroundy con el complemento WP Rocketpara 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í, evidentemente que lo son, mas te sorprendería saber el número de webs que no se adaptan bien al móvil, no cargan bajo protocolo https o bien de forma directa no están adaptadas a la legalidad en lo que se refiere a protección de datos.
Antes de concluir, te dejo un vídeo donde recopilo todas y cada una de las tendencias que he mencionado en el artículo.
Hasta aquí este repaso a las tendencias en diseño web para 2020. Espero que, si debes lanzar un proyecto nuevo o rediseñar la web que tienes, estos casos de ejemplo te ayuden y sean de enorme utilidad. Y si necesitas ayuda con tu página, te animo a echarle una ojeada a mi 🙂
Portada:
19 tendencias en diseño web para 2020 + ejemplos
En este post te cuento cuáles son las tendencias en diseño web para dos mil veinte, los formatos y géneros de diseño más actuales, y te muestro ejemplos reales.
|