19 tendencias en diseño web para 2020 + ejemplos |
El final de dos mil diecinueve 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 incesante para estar siempre actualizados.
Por ese motivo, en este post te mostraré las tendencias en diseño web para dos mil veinte, desde las más novedosas a las que están vigentes desde hace meses, con ejemplos reales de todas y cada una ellas.
He querido organizar el blog post en tres apartados diferentes:
¡Arranca uno de mis posts preferidos de año! 🙂
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.
Los elementos dinámicos, como animaciones, ilustraciones, gifs o efectos flexibles, han llegado al diseño web para quedarse durante un tiempo.
Este género de diseños logran unos resultados muy visuales y creativos siempre y cuando se combinen de forma atinada. Como siempre y en toda circunstancia digo, si algo suma a una web, se queda; si resta, se quita.
Aquí te dejo múltiples ejemplos con formatos diferentes:
Como puedes ver, en esta web utilizados
ilustracionesde los autores para fortalecer el mensaje, acompañadas de colores vivísimos y ciertos textos con efecto degradado.
Siempre que uses este tipo de recursos gráficos, mi consejo es que contrates a un diseñador gráfico a fin de que las
ilustraciones sean completamente personalizadas.
Los
separadores dinámicostambién están de moda y son una forma de tener un diseño servicios google analytics .
Este tipo de
elementos con efecto flexible o bien volteotambién es tendencia y los verás de forma 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 a la hora de comunicar. Si tu empresa tiene un perfil más clásico o bien tradicional (formación, abogados, etcétera), no te los recomiendo.
Recuerda que cada web tiene su gancho y personalidad.
Otra tendencia en diseño web para 2020 son las composiciones asimétricas. Hace unos años, hubieran sido interpretadas como caóticas y desorganizadas, al revés que ahora, siempre que tengan un sentido visual y estén justificadas.
Aquí te dejo un caso de página de preguntas usuales 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:
Los efectos en movimiento también han llegado al diseño web y ya hemos empezado 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 cuatro columnas en la que cada una de ellas aparece conforme el usuario hace scroll por el sitio:
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 peligrosos y, por lo tanto, deben tener una justificación en el diseño.
Un ejemplo de empleo de 3D y GIFs:
Los diseños con efecto dividido o bien fusionado son una de mis tendencias en diseño web favoritas y, en verdad, ya he empezado a usarlos en alguno de mis últimos trabajos.
Te dejo varios ejemplos a fin de que visualices esta tendencia de dividir los contenidos:
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 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 página web, como pueden ser bloques completos, fondos o bien 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 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 genera 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 mentado (elementos dinámicos y en movimiento).
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 lugar se marcha 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 usado en alguna web) es la navegación oculta, que se trata de elementos que marchan como un menú, mas realmente no lo son.
Es decir, una imagen, icono o bien botón puede mostrar y enlazar con otros elementos o partes del sitio.
Te dejo 2 ejemplos en los que puedes ver cómo marcha la navegación oculta:
Este primer ejemplo consiste en múltiples banners que muestran contenido escondo 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.
Otra de las tendencias que 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 online.
Otro género de sitio en la que es posible emplear barras adhesivas son las landing en las que el usuario tiene que llenar una acción específica: adquirir una entrada, reservar un producto, darse de alta o bien darse de alta, etc.
Si vas servicios informáticos madrid , recuerda que no se transforme en algo molesto para el usuario y que no distorsione su navegación.
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.
¡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 entregarles un papel protagonista junto al resto de elementos (vídeos, imágenes, textos, etc..
Es decir, ahora las tipografías aparecen en primer plano (a veces con tamaño gigante) y son parte destacado del diseño.
A la hora de elegir combinaciones de
, recuerda que han de ser elegantes y casar entre sí (realmente, no es labor sencilla).
Te dejo múltiples ejemplos:
En la web de Jorge Lázaro hemos usado una combinación de dos tipografías (Montserrat + Oswald), en las que una de ellas es la primordial y ocupa un sitio señalado en cabeceras o secciones con ancho completo.
En el caso de Mamá Esencial, utilizamos hasta 4 tipografías diferentes (Nunito Sans, Lora, Oswald y Magic), que debimos combinar con mucho cuidado a fin de que no restaran estrellato unas a otras.
No recomiendo usar tantas fuentes diferentes (dos 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, en el momento de conjuntar tipografías, es fundamental que cada una de ellas tenga su espacio y justificación.
Las estructuras sobrepuestas 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
, verás que es un recurso que he usado en varios sitios.
Aquí tienes dos ejemplos:
En la web de Nairamkitty empleamos elementos de imagen + texto sobrepuestos en varias de sus páginas.
En el caso de Rmove Training utilizamos otro género de formato, que consiste en sobreponer 2 elementos gráficos (el logotipo sobre la imagen que tiene la cabecera como fondo).
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 emplees, recuerda que deben tener justificación y sumar al diseño. Si quitan, no las emplees. Cuidado con ellas, las carga el diablo 😅
Aquí puedes ver las animaciones que empleamos en la página web de Verdelima Digital y cómo las conjugamos:
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 usamos en la página web de ABEO:
Otro formato para usar 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:
Los chatbots también llevan un tiempo entre nosotros y han ido ganando estrellato en diseño web, pues dejan automatizar procesos de marketing y de atención al cliente del servicio en línea.
Son singularmente recomendables en tiendas on line para soporte o bien en webs que ofrecen algún género de servicio como canal para contestar dudas a los usuarios.
Hablamos, en consecuencia, 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:
Por último, quiero dedicar un pequeño apartado para mentar 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, con independencia del tipo de web que tengas:
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.
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 ende, tu
debería ofrecértelo sin costo.
Si tu hosting te cobra por activar en tu web algo que es sin coste, o te pone inconvenientes para hacerlo, mi consejo es que escapes a otro distribuidor.
Ya sabes que el alojamiento para Wordpress que siempre y en todo momento aconsejo por su calidad y soporte técnico es
.
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 blog 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 ámbito, negocio o bien actividad que desarrolle. No es exactamente lo mismo un weblog, que una página de servicios o un ecommerce.
Como dato esencial, tu web debe tener publicados y visibles 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 presupuesto seo valencia en el que Marina Brocca, experta en legalidad on line, te explica
.
Además, si necesitas adaptar tu página web a la legalidad vigente, te invito a echarle una ojeada a sus
kits para RGPD😉
Por último y no por ello 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:
¿Cuál es buen dato de velocidad de carga en una web?
Pues esto depende de varios factores, pero unos datos estándar serían:
De modo que, si tu página web tarda más de 3 segundos en cargar, te invito a ponerte mano a la obra para reducir ese dato.
Aquí te muestro múltiples
.
Aquí puedes ver como un ejemplo los datos de WPO de mi web, alojada en
SiteGroundy con el plugin
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 adaptan 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 y cada una de las tendencias que he mentado en el blog post.
Hasta aquí este repaso a las tendencias en diseño web para 2020. Espero que, si tienes que lanzar un proyecto nuevo o bien rediseñar la página web que tienes, estos casos te asistan y sean de gran utilidad. Y si necesitas ayuda con tu página, te animo a echarle un vistazo 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 2020, los formatos y géneros de diseño más actuales, y te muestro ejemplos reales.
| Êîììåíòèðîâàòü | « Ïðåä. çàïèñü — Ê äíåâíèêó — Ñëåä. çàïèñü » | Ñòðàíèöû: [1] [Íîâûå] |
