El final de 2019 se acerca y, como cada año, es el instante 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, por lo que requiere de quienes somos diseñadores web una investigación 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 dos mil veinte, desde las más novedosas a las que ya están actuales desde hace meses, con ejemplos reales de todas y cada una .
He querido organizar el artículo en tres apartados diferentes:
- Las tendencias en diseño web más novedosas.
- Las tendencias que llevan un tiempo en vigor y seguirán vigentes en 2020.
- Las tendencias obligatorias.
¡Arranca uno de mis posts preferidos de año! 🙂
Tendencias de diseño web para 2020
Empiezo mentando 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 bien efectos flexibles, han llegado al diseño web para quedarse a lo largo de un tiempo.
Este género de diseños logran unos resultados muy visuales y creativos siempre que se combinen de forma atinada. Como siempre y en todo momento 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 usados ilustracionesde los autores para reforzar el mensaje, acompañadas de colores vivísimos 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 absolutamente personalizadas.
Los separadores dinámicostambién están de moda y son una forma de tener un diseño web actualizado.
Este tipo de elementos con efecto flexible o volteotambién es tendencia y los verás de manera frecuente en los próximos meses.
Recuerda que este género de elementos no casan bien en todo tipo de webs, pues sirven para arriesgar en el momento de comunicar. Si tu empresa tiene un perfil más clásico o bien tradicional (formación, abogados, etc.), no te los recomiendo. 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 desordenadas, a la inversa que ahora, toda vez que tengan un sentido visual y estén justificadas.
Aquí te dejo un caso 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, puesto que transmiten una imagen de gran dinamismo y inventiva.
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 2020. Recuerda que este tipo de efectos son un poco arriesgados y, por lo tanto, tienen que 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 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 sobre un factor 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 unas partes de mayor tamaño en la página web, como pueden ser bloques completos, fondos o bien 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 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 produce movimiento al poner el ratón encima.
Como ves, de ahora en adelante será frecuente conjugar el efecto hover con la primera tendencia que he citado (elementos dinámicos y en movimiento).
#7 Desplazamiento vertical
Las webs con desplazamiento vertical también van a ser tendencia en dos mil veinte. De hecho, ya he empleado esta técnica en alguno de mis últimos trabajos.
Este formato consiste en que toda la información del sitio se marcha desplazando de forma vertical sin moverse la pantalla a medida que el usuario hace scroll por la web.
Te dejo un ejemplo a fin de 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 marchan como un menú, mas verdaderamente no lo son.
Es decir, mantenimiento de páginas web , icono o bien botón puede mostrar y enlazar con otros elementos o bien unas 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 bien «equipo» en el que el listado de nombres despliega la información de cada autor.
#9 Barras adhesivas
Otra de las tendencias que se han empezado a ver son las barras adhesivas, singularmente si hablamos de un ecommerce.
Este tipo de elementos que quedan fijos conforme el usuario se desplaza por el lugar (por el producto en este caso) ayudan a acrecentar las conversiones y ventas de la tienda on line.
Otro género de lugar en la que es posible usar barras adhesivas son las landing page en las que el usuario tiene que llenar una acción específica: adquirir una entrada, reservar un producto, darse de alta o registrarse, 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 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 a lo largo de 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 2 últimos años.
Se trata de concederles un papel protagonista al lado del 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 señalado del diseño.
A la hora de elegir combinaciones de , recuerda que han de ser elegantes y casar entre sí (en realidad, no es tarea sencilla).
Te dejo varios ejemplos:
En la página web de Jorge Lázaro hemos utilizado una combinación de 2 tipografías (Montserrat + Oswald), en las que una de ellas es la primordial y ocupa un lugar señalado en cabeceras o secciones con ancho completo.
En el caso de Mamá Esencial, empleamos hasta 4 tipografías diferentes (Nunito Sans, Lora, Oswald y Magic), que tuvimos que conjuntar con sumo cuidado para que no restaran estrellato unas a otras.
No recomiendo usar tantas fuentes diferentes (2 o 3 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 conjuntar tipografías, es esencial 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 empleado en varios sitios.
Aquí tienes dos ejemplos:
En la página web de Nairamkitty empleamos elementos de imagen + texto sobrepuestos en múltiples de sus páginas.
En el caso de Rmove Training empleamos otro tipo de formato, que consiste en superponer 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 lograr un efecto dinámico.
Siempre que las uses, recuerda que deben tener justificación y sumar al diseño. Si restan, no las uses. Cuidado con ellas, las carga el demonio 😅
Aquí puedes ver las animaciones que usamos en la página 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 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 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 utilizamos en la web de ABEO:
#14 Vídeos como fondo
Otro formato para emplear 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 lograr 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 estrellato en diseño web, puesto que permiten mecanizar procesos de marketing y de atención al cliente online.
Son especialmente aconsejables en tiendas on-line para soporte o en webs que ofrecen algún género de servicio como canal para contestar dudas a los usuarios.
Hablamos, por ende, 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, esto es, que tu lugar debe tener sí o bien 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. Semeja 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 alerta si navegas por una web no segura.
Te recuerdo que el certificado Let’s Encrypt SSL es absolutamente gratis, automatizado y abierto. Por tanto, tu debería ofrecértelo gratis.
Si tu hosting te cobra por activar en tu web algo que es sin costo, o bien te pone problemas para hacerlo, mi consejo es que huyas a otro distribuidor.
Ya sabes que el alojamiento para WP que siempre recomiendo por su calidad y soporte técnico es .
#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 si bien 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 sector, negocio o actividad que desarrolle. No es exactamente lo mismo un weblog, que una página de servicios o un ecommerce.
Como dato fundamental, tu web debe tener publicados y perceptibles los próximos 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 en línea, te explica .
Además, si necesitas amoldar tu web a la legalidad actual, te invito a echarle una ojeada a sus kits para RGPD😉
#19 WPO
Por último y no por este motivo menos importante, esta el tema de la velocidad de carga.
A día de el día de hoy, es diseño pagina negocio madrid cargue rápido por varios motivos:
SEO. A Google le agradan 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 cerrará antes de 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 varios factores, mas unos datos estándar serían:
Menos de un segundo: carga óptima. Entre 1 y 3 segundos: carga adecuada. Más de tres segundos: carga negativa.
De modo que, si tu web tarda más de 3 segundos en cargar, te invito a ponerte mano a la obra para reducir ese dato.
Aquí te muestro varios .
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í, lógicamente que lo son, pero te sorprendería saber el número de webs que no se amoldan bien al móvil, no cargan bajo protocolo https o directamente no están adaptadas a la legalidad en lo que se refiere a protección de datos.
Antes de terminar, te dejo un vídeo donde recopilo todas las tendencias que he mentado en el post.
Hasta aquí este repaso a las tendencias en diseño web para dos mil veinte. Espero que, si tienes que lanzar un proyecto nuevo o rediseñar la página web que ya tienes, estos casos te asistan y sean de gran 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 blog post te cuento cuáles son las tendencias en diseño web para dos mil veinte, los formatos y tipos de diseño más actuales, y te muestro ejemplos reales.
|