El parallax crea una ilusión de profundidad al desplazarse, un efecto atemporal que todavía tiene mucho valor en el mundo del diseño web.
Por supuesto, el parallax tiene sus problemas, desde la usabilidad hasta la capacidad de respuesta en dispositivos móviles, pero también es una forma interesante de hacer que un sitio web destaque cuando se hace correctamente.
Echemos un vistazo a algunas de las formas en que el desplazamiento de paralaje sigue funcionando en 2021…
Contenidos
Parallax para contar una historia
Empecemos con algo sencillo.
Una de las formas más eficaces de utilizar el desplazamiento de paralaje en la era moderna es contar una historia. Los consumidores de hoy quieren tener una conexión emocional con las marcas que compran, ahora más que nunca. Hace cinco años, los estudios mostraron que alrededor del 80% de los clientes quieren que las marcas cuenten historias, y esa tendencia se mantiene hasta hoy.
En la era del consumo digital, en la que la gente no puede conocer una empresa en persona a través de las interacciones cara a cara con sus vendedores, las empresas necesitan nuevas formas de conectar con sus clientes. Contar historias basadas en la marca es una forma de resaltar que su empresa es algo más que una entidad sin rostro: es algo con alma real.
Veamos el sitio web «Recap After Use», un portafolio perteneciente al innovador Louie Sellers. Este sitio web muestra las habilidades de Louie con elementos visuales que llaman la atención, incluida una animación de paralaje que hace que parezca que Louie está dibujando la página mientras te desplazas por ella.
Este es el tipo de animación excepcional que hace que el desplazamiento de paralaje sea más atractivo. La animación no está ahí para marcar una diferencia visual en la página, sino que te dice algo más sobre la persona que está detrás del sitio web y lo que puede hacer.
Parallax aumenta la duración de las visitas al sitio web
Si un sitio web cuenta efectivamente una historia con la animación de paralaje, también puede apostar que va a mantener a los clientes o lectores en una página durante más tiempo. Reducir la tasa de rebote aumentando el compromiso es uno de los principales objetivos de cualquier diseñador web. (Las tasas de rebote, por supuesto, se refieren al porcentaje de visitantes del sitio que pulsan el botón de retroceso después de haber visto la primera página de su sitio web).
Mientras que algunas personas argumentan que los sitios web de paralaje pueden perjudicar su clasificación SEO si ralentizan su sitio, también existe el argumento de que la falta de una página visualmente atractiva puede perjudicar el SEO. Las tasas de rebote hacen descender su clasificación y dificultan la captación de la atención del público.
Una animación de paralaje que cuente una historia y atraiga a la audiencia a través de información cuidadosamente entregada es una gran manera de mantener a la gente alrededor – incluso sólo por un poco más de lo habitual. Por ejemplo, si echas un vistazo a la página de la cartera de Alex Dram aquí, verás varias formas que se unen durante la animación de desplazamiento de paralaje.
Las formas se fusionan para contar una historia sobre las experiencias visuales que Alex puede crear para los clientes. Es una forma de atraer la mirada y conectar con el espectador sin limitarse a escribir sobre lo que se hace a través del texto.
Parallax desarrolla su credibilidad
Hay una razón por la que los dos ejemplos de parallax scrolling que hemos visto hasta ahora son de portafolios creativos. El desplazamiento de paralaje, con su excelente capacidad para contar historias, es ideal para demostrar tu credibilidad como experto digital. Básicamente, es una versión de «mostrar» y no «contar» a los clientes tus habilidades.
Puedes decirle a alguien que sabes utilizar correctamente técnicas complicadas como la animación parallax, pero es menos probable que te crean de esa manera. Si puedes demostrar que tienes las habilidades para crear algo increíble, eso es más atractivo.
El equipo de OK Alpha es una gran empresa de referencia cuando se trata de un diseño sensacional. Esta empresa parece estar siempre a la vanguardia de las últimas tendencias, ya sea con una tipografía atrevida o con colores brillantes. Para aumentar el impacto de su sitio web, la empresa ha combinado efectos de paralaje en la mezcla para hacer que todo sea más inmersivo a medida que se desplaza.
Se trata de un bello ejemplo de cómo las empresas del panorama del diseño pueden utilizar técnicas como el parallax scrolling para mostrar de qué son capaces.
Parallax hace que la información sea más divertida
La mayoría de nosotros somos aprendices visuales por naturaleza. Nos gusta consumir la información de forma llamativa y atractiva. Por eso, el contenido visual suele ganar más acciones sociales y atención que el contenido escrito. Con el parallax scrolling, las empresas que quieren ofrecer información valiosa y contenido educativo a su audiencia pueden hacerlo de forma eficaz.
En lugar de desplazarse por una página y ver mucho texto, sus clientes pueden ver imágenes y gráficos que cobran vida junto a los bloques de texto que están leyendo. Es como añadir vídeos de demostración junto a un libro de texto para ayudar a la gente a entender mejor lo que está leyendo.
Mira el micrositio de Diseño Web e Historia del Arte de Webflow como ejemplo. La empresa quiere que entiendas cómo han evolucionado el diseño web y el arte a lo largo de los años, pero no quiere ofrecer esa información en un formato aburrido. Los gráficos brillantes y la animación parallax trabajan juntos para ofrecerte una experiencia más contextual y significativa.
Parallax replica otro medio
¿Y si pudieras recordar a alguien su experiencia al leer un libro o ver un vídeo mientras le hablas de un vídeo o una novela? El desplazamiento y la animación de paralaje pueden ayudar a ello. Es una manera de hacer que su sitio web se sienta como una presentación de vídeo o una presentación de diapositivas sin los componentes añadidos de la implementación de reproductores de vídeo en su back-end.
El desplazamiento de paralaje también tiene otra pequeña ventaja sobre un sitio web estándar basado en vídeo. En un sitio web que utiliza un vídeo como fondo, el vídeo suele reproducirse automáticamente. Esto significa que tus visitantes no pueden controlar la velocidad de reproducción del vídeo.
En cambio, las animaciones de paralaje impulsadas por la acción de desplazamiento permiten a su cliente recoger la información al ritmo que le convenga. Echa un vistazo al sitio web de Story of the Goonies, por ejemplo. Este impresionante sitio de paralaje le presenta los detalles que necesita saber sobre la película de una manera que hace que se sienta como la introducción de una película.
Lo mejor del parallax en este sitio es que el diseño de estilo de vídeo lento también le da una dosis de nostalgia, que encaja perfectamente con la película.
Parallax es más memorable
¿Cuál es la principal razón por la que cualquier diseñador hace algo especial en un sitio web? Para que destaque, por supuesto. El diseño web consiste en transmitir la esencia única de una marca, negocio o entidad de una forma que haga inolvidable a ese cliente. Aunque el parallax ya no es tan novedoso como antes, todavía puede ser una forma de hacer que su sitio destaque, si se utiliza correctamente.
La clave del éxito del parallax scrolling para la memorización es hacerlo de forma inteligente. El diseño debe ser sencillo e intuitivo. Todo debe funcionar bien en conjunto, desde la fuente que cambia ligeramente hasta los diversos efectos de paralaje que trabajan juntos para atraer el ojo (y la atención) del espectador.
Un gran ejemplo es el de Jomor Design, otro diseñador con un portafolio que atrae la atención desde el primer segundo. El diseño está muy bien hecho, con un montón de mini momentos para el compromiso y las interacciones en todo. A medida que te desplazas por el sitio, te haces una mejor idea de lo que el diseñador hace. Los pequeños momentos de animación hacen que toda la experiencia sea mucho más memorable.
Cuando su sitio web es más memorable y atractivo que el de su competencia, puede obtener muchos beneficios importantes para su marca, incluida la mejora de la tasa de rebote.
Qué recordar al utilizar Parallax
El paralaje es como cualquier otra técnica de diseño. Hay formas de hacerlo maravillosamente, que atraen y deleitan a su público. Sin embargo, también hay muchas áreas en las que puedes equivocarte fácilmente. Cuando se utiliza cualquier elemento de diseño, lo principal que hay que recordar es que el enfoque principal debe ser siempre la experiencia de tus usuarios. El paralaje no debería ser sólo una forma de mostrar tus conocimientos de diseño. Es sólo una característica más que puedes utilizar para crear un sitio web increíble.
Recuerda que la experiencia del usuario y el atractivo visual tienen que funcionar perfectamente juntos para que el parallax funcione. Si el desplazamiento por la página es prácticamente imposible para las personas en un dispositivo móvil, entonces no vas a obtener los resultados que deseas. Si es difícil asimilar el mensaje que intentas enviar porque el contenido se mueve demasiado rápido, de nuevo, tus usuarios sufrirán.
Recuerda los siguientes consejos:
- Lo simple es mejor: Reduce la cantidad de contenido y elementos visuales en tu página siempre que puedas. Cuanta menos información haya para captar la atención de tu cliente, menos probable será que acabes teniendo un problema.
- Comprima el tamaño de los archivos: Asegúrate de que no estás reduciendo la velocidad de tu sitio web creando una sola página enorme con toneladas de imágenes de alta calidad. Tendrás que utilizar los tamaños de archivo más pequeños posibles.
- Comprueba la capacidad de respuesta: Asegúrate de que el efecto parallax funciona igual de bien en tu smartphone o tableta que en un ordenador de sobremesa. Como cada vez más gente traslada su experiencia de navegación a la palma de la mano, no puedes permitirte ignorar la capacidad de respuesta.
- Encuentra el «wow»: Hay muchos ejemplos de sitios web de paralaje. Todos ellos destacan porque hacen algo especial con el efecto de desplazamiento. Si vas a utilizar esta estrategia en tu sitio web, debes asegurarte de que el esfuerzo merece la pena. No te limites a seguir las mismas pautas que todo lo demás. Encuentra la idea que va a hacer que la gente se fije en ella.
0 comentarios