Después de un año como el que acabamos de vivir, aventurar una perspectiva sobre las próximas tendencias adquiere proporciones casi utópicas. Al fin y al cabo, ¿quién iba a pensar en 2020 lo rápido que puede y va a cambiar el mundo? Y la rapidez con la que podemos adaptarnos a los cambios. ¡Echemos un vistazo juntos a las tendencias de diseño web de 2021!
La nueva normalidad nos tiene a todos/as bien capturados/as: la tecnología se ha vuelto más importante para nosotros/as y está más integrada en nuestra vida cotidiana. En consecuencia, nuestra tecnología debe avanzar en una dirección que permita una mayor personalización, integración e interacción. Y para todas las personas.
El confinamiento, "homeoffice" y demás medidas han cambiado nuestro enfoque hacia lo digital. Sin embargo, esta tendencia también provoca un rápido crecimiento de los productos digitales. Lo mismo se aplica al sector del comercio electrónico. Todo esto requiere más individualidad y habilidad para poder posicionarse frente a un mayor número de competidores.
Ahora mismo es importante centrarse en los usuarios finales. Se trata de sorprenderlos, integrarlos y personalizar internet. Y siempre enfocarse en la máxima funcionalidad.
Entre la dimensión y la interacción
En este nuevo año vemos más oportunidades de personalización. Observamos más a menudo la posibilidad de cambiar entre el modo oscuro/claro o incluso la personalización de colores de un diseño.
Vemos diseños más atrevidos y menos simétricos. Se mantiene la tendencia contraria a la integración de colores y elementos orgánicos. Conseguimos más personalidad a través de collages, medios mixtos y la integración de efectos de animación. Veamos ahora en detalle las tendencias de diseño web para 2021.
Tendencias de diseño web 2021: Scrolling
Animaciones de Parallax y Scroll de Parallax
La técnica "parallax" o paralaje, especialmente con imágenes simples, es algo que hemos estado usando durante varios años. Recientemente, hemos añadido complejas animaciones de desplazamiento de paralaje. Utilizados correctamente, transformarán tu sitio web de un fondo plano en 2D a un mundo digital interactivo, comparable a un escenario de teatro.
¿Qué es el Efecto Paralaje?
Advertencia: para usuarios/as que sufren vértigo, demasiado movimiento puede causar molestias.
Algunos consejos para integrar con éxito el efecto Parallax:
- Asegúrate de que la información importante se presenta siempre de forma clara y no se ve superada por el efecto.
- Asegúrate de que la funcionalidad completa de tu sitio se mantiene en todos los dispositivos, incluso en condiciones desfavorables, como la mala recepción de internet.
- Minimiza el uso de los efectos Parallax.
- Considera la posibilidad de incluir una opción para desactivar el efecto.
El sitio web del juego Firewatch utiliza ocho imágenes PNG diferentes en el header, que se animan juntas para transmitir la sensación de un paisaje real. En la versión móvil, sin embargo, el efecto parallax se sustituye por una imagen estática.
Animaciones scroll (de desplazamiento)
Las animaciones tipo "scrolling" tampoco son totalmente nuevas, pero han recibido menos atención hasta ahora (probablemente porque su composición requiere habilidades de dibujo). Como dice el refrán, "menos es más". Bien utilizado, el "scrolling" dan a tus sitios web un flujo armonioso.
ToyFight es una agencia creativa de Manchester. Mediante el uso inteligente de animaciones que se activan al desplazarse, la agencia da a su sitio web viveza y personalidad. Las animaciones también funcionan en dispositivos más pequeños, aunque el tiempo de carga se vea algo afectado.
La empresa Prevint ofrece un concepto global contra la violencia sexualizada. Mediante el uso mínimo de animaciones de desplazamiento, se visualizan las tres precauciones más importantes para la prevención. Lo especial aquí es el uso del desplazamiento vertical y horizontal: la navegación principal está en un nivel vertical, mientras que el desplazamiento horizontal profundiza en el tema correspondiente.
Las flechas de navegación en la parte inferior de la pantalla proporcionan una orientación adicional. En la vista móvil la navegación se hace pulsando solo los botones.
Scroll horizontal
Aunque las opiniones sobre el desplazamiento horizontal han variado mucho en el pasado, vemos que los sitios web lo utilizan cada vez con más frecuencia. Especialmente desde el punto de vista de la experiencia del usuario, su uso se consideraba antes bastante cuestionable.
El sitio web de Home Société, construido como un localizador, funciona con una orientación completamente horizontal. La navegación adhesiva, que solemos encontrar en la parte superior, está en la izquierda sitio. Funciona de la misma manera con los enlaces de anclaje que en un One Pager orientado verticalmente. En el móvil, se muestra el sitio en orientación vertical.
El sitio web de Kwok Yin Mak es un portfolio de diseño que se desplaza horizontalmente por todas las páginas integradas. La diferencia con Home Société es el uso del desplazamiento infinito: si llegas al final de un sitio, serás transportado de nuevo al principio sin darte cuenta. Este sitio también prescinde del desplazamiento horizontal en el móvil.
Algunos consejos para integrar con éxito el scrolling horizontal:
- Dale a tus usuarios un plan B, como flechas o un menú pegajoso, para la navegación por tu sitio web.
- Considera qué contenidos de tu sitio se beneficiarán del desplazamiento horizontal.
- Intenta ceñirte a una sola dirección en la medida de lo posible. Cambiar de dirección con demasiada frecuencia confundirá a tus usuarios/as.
- Ten cuidado con la mezcla de textos largos y el scrolling horizontal. En determinadas circunstancias, tus textos se vuelven menos legibles debido a esta disposición.
¿Qué fuente de letra se ajusta a mi sitio web?
Scrollytelling
Scrollytelling significa la narración visual de historias a través de un scrolling animado (utilizando la ruedecita entre los botones izquierdo y derecho del ratón). Esto le da al sitio web personalidad y un sentido de interactividad. El contenido largo se presenta de forma fácilmente digerible. Las historias se construyen de una forma más interesante y se comunican de una forma más atractiva. Internet se utiliza cada vez más como medio para la narración interactiva de historias.
The New York Times utiliza aquí un enfoque relativamente minimalista. La imagen de cabecera consiste en un efecto de paralaje seguido de mucho texto. Se presenta en párrafos claros y se apoya visualmente en secciones de parallax en estilo cómic.
Best Practices, consejos y directrices en el diseño web
Un ejemplo interesante es también Webflow. El sitio web te invita a un viaje por la historia del arte en busca de las tendencias de diseño web del futuro.
canals-amsterdam.nl combina el scrollytelling con la navegación horizontal, la animación y el parallax. Un detalle especial: el menú adhesivo cambia su color de fondo en función del color de la posición actual. Puedes encontrar más información sobre este tema en la guía de scrollytelling.
Scrolling Cards
Con "Scrolling cards" nos referimos al desplazamiento vertical u horizontal, que se ajusta a la siguiente ventana antes de seguir navegando. Puedes enfatizarlo visualmente, por ejemplo, mediante separaciones de color, que transmiten la sensación de movimiento de tarjetas, como en el ejemplo de Green Meadow.
Otras características especiales aquí son las animaciones de texto que se siguen recargando, así como el scrolling infinito, que nos da la sensación de un sitio web infinito.
Tendencias de diseño web 2021: Layouts emocionantes
Integración de las características físicas del producto que se vende
Ora London vende esmaltes de uñas, entre otras cosas. Para el diseño de su página web se utiliza la textura de su producto.
En el sitio web de Main Squeeze Juice, hay manchas de color que podrían parecerse a una versión deslavada de sus zumos de frutas. Este efecto también se utiliza para algunos títulos.
Ora The Floral Agency ha destacado visualmente su sitio web con flores de su gama.
Neomorfismo
El neomorfismo (nuevo + morfismo) se ha declarado como tendencia desde hace bastante tiempo, pero la razón por la que los diseños minimalistas han sido tratados con aversión en la escena creativa se debe principalmente a estas dos razones:
- El neomorfismo es difícil de reproducir. Si no se crea correctamente, el diseño se ve a simple viste muy poco profesional.
- Debido a las suaves sombras y al bajo contraste, los elementos del neomorfismo pueden causar problemas al usuario final.
En 2021, la tendencia del neumorfismo va a despegar un poco más. La plantilla Neu Vision muestra una integración de neumorfismo fácil de usar.
Tutorial: Cómo crear elementos de neomorfismo
Composiciones abstractas, collage y técnicas mixtas
Como se mencionó antes, los sitios web pueden mostrar más personalidad. Una forma de lograrlo es a través de composiciones abstractas o collages. También se permite mezclar diferentes medios, ya sea ilustraciones dibujadas a mano con formas geométricas perfectas.
City Circus utiliza collages en todo su sitio web.
Efecto de vidrio borroso y esmerilado ("frosted glass")
El efecto de vidrio esmeriladoo "frosted glass effect" es ideal para hacer legible el texto de las imágenes. También puede utilizarse como efecto hover. Puedes encontrar un tutorial sobre cómo implementar el efecto de vidrio esmerilado en CSS aquí.
Tendencias de diseño web 2021: Colores
Ecológico y discreto
El sitio web pureorganix.ca tiende a utilizar pocos y brillantes colores naturales. Las tonalidades orgánicas han estado presentes desde hace tiempo y seguirán siendo una tendencia en 2021.
Blanco y negro
La completa ausencia de color hace que tu sitio web se vea minimalista, ordenado y claro. El toque serio creado por la omisión de tonos amigables ha sido bien equilibrado por parte de UX Database debido al uso de ilustraciones.
Diseño UX y usabilidad web
Tendencias de diseño web 2021: Efectos 3D
Iconos e imágenes
Al igual que con la realidad virtual (RV), llevamos mucho tiempo esperando que los objetos 3D hagan por fin su gran avance. Como a principios de cada año, se espera que los elementos 3D y la RV desempeñen un papel más importante a partir de ahora. No se prevé que esto sea diferente en 2021.
Los elementos en 3D se utilizarán cada vez más en 2021: por ejemplo, como sustitución de los iconos e ilustraciones en 2D, para representar productos y como elementos geométricos de diseño.
También veremos el 3D como parte interactiva del sitio web, como con la agencia Dogstudio.
O como un elemento estático, o más exactamente animado, como se ve en el siguiente ejemplo.
E-Commerce
La "AR", realidad aumentada, se ha utilizado esporádicamente para fines de comercio electrónico en el pasado.
Diesel, por su parte, apostó más bien por la variante 3D interactiva.
Ambos enfoques tienen sentido para el producto respectivo. Ser capaz de probar los muebles virtualmente en la futura casa no solo reduce las posibilidades de hacer una compra errónea. La aplicación también es divertida y proporciona incentivos para la decoración y las compras.
Por otro lado, Diesel intenta crear una especie de sensación 3D permitiendo a los usuarios finales examinar y sentir virtualmente el producto antes de comprarlo.
En el pasado, la integración de los elementos de realidad aumentada/virtual y los elementos 3D salía en la mayoría de las veces muy costosa y, por lo tanto, estaba reservada a las empresas más grandes. Con las nuevas herramientas, la integración de la realidad aumentada (AR, por sus siglas en inglés) también es ahora posible para las empresas más pequeñas.
Aquí tienes dos ejemplos:
Tendencias de diseño web 2021: Contenido
La web se estaba volviendo más personal, más interactiva y se está adaptando a nuestras necesidades
Google ofrece un ejemplo de interactividad con Blob Opera. También se pueden grabar las propias creaciones y así compartirlas con todo el mundo.
En la página de contacto de Madwell, todos los elementos gráficos son interactivos.
Con mucha personalidad, Sennep ofrece sus servicios.
Diseño web por causas
Además, el año 2020 nos demostró que todos/as podemos conectarnos entre sí e incluso en parte debemos hacerlo. La red se está volviendo más humana. El diseño de páginas web por causas es cada vez más relevante. Los sitios web éticos, los sitios web ecológicos, los sitios web para defenderse a sí mismos y a semejantes (por nombrar solo algunos temas) aumentaron enormemente en importancia el año pasado. Se esperó, así pues, que esta tendencia también tuviera incluso más peso en 2021.
"*"indica que los campos son obligatorios
Conclusión sobre las tendencias de diseño web 2021
Mantenerse en contacto con amistades de todo el mundo, trabajar a distancia, comercializar productos y servicios en línea, no es nada nuevo. Y, sin embargo, ha tendido a ser la realidad para una minoría de la población.
Muchas empresas y habitantes europeos se han acercado hasta ahora al tema de forma bastante tradicional: tenemos posibilidades para reforzar nuestra presencia en la web y la red de contactos, pero las usamos solo de manera secundaria. El contacto personal se situaba en primer plano.
Por tanto, la funcionalidad de nuestros productos online es especialmente importante, también porque la competencia es mucho mayor. Y en el futuro, ya no podemos permitirnos dejar de lado temas como la accesibilidad.
Por supuesto, una videollamada no puede sustituir a una importante reunión cara a cara, pero tal vez estemos aprendiendo con la situación actual a distinguir entre lo que son reuniones realmente importantes y lo que puede hacerse también con la ayuda de una llamada telefónica. Este enfoque suele reflejarse en la calidad de la presencia digital.
Afirmaciones como "quien quiera saber algo, ya llamará o preguntará" es algo que he escuchado más a menudo en el pasado cuando planificaba proyectos en línea. Con el nuevo enfoque en el confinamiento y la oficina en casa, ya no tenemos ese lujo.
Por ello, el diseño móvil, el rendimiento, la usabilidad y otros aspectos similares han seguido siendo factores importantes en la creación de sitios web en 2021.
Tus dudas sobre las tendencias de diseño de la web en 2021
Cuéntanos tus experiencias sobre las tendencias de diseño web 2021 y lo que crees que nos deparará en los próximos años. ¿Quieres estar informado/a sobre nuevas publicaciones WordPress? Entonces sigue a Raidboxes en Twitter, Facebook y a través de nuestra newsletter.
