¿Qué utilizan los creadores de sitios web para infundir su narración visual: sus mensajes, su prestigio estético y, por supuesto, una resonancia más profunda entre los usuarios? ¿Cuánto pueden cobrar vida nuestras historias de marca en la hoja en blanco de una página web?
La respuesta es scrollytelling: una forma ilustre y cada vez más popular de aprovechar una interfaz digital y transmitir su intrincada historia.
Pero, ¿qué es el scrollytelling? ¿Por qué es uno de los favoritos de los creadores de sitios web? Las respuestas son obvias: sus efectos de diseño avanzados eclipsan las técnicas tradicionales que están potencialmente desactualizadas y no le hacen justicia a su contenido.
Pero, ¿es el scrollytelling siempre el mejor método para contar su historia? ¿Cómo pueden los creadores de sitios web identificar cuándo esta técnica transmitirá mejor sus mensajes y el valor del producto a los visitantes?
Este es, sin duda, un interesante nicho de diseño visual y de información. Vamos a mojarnos los pies con el scrollytelling, hasta los tobillos si se quiere, y admire los casos prácticos de creadores de sitios web que utilizan el scrollytelling para concretar sus objetivos de estrategia de contenido y de marca.
Tabla de contenidos
- ¿Qué es el scrollytelling?
- 7 casos de uso donde el scrollytelling es la respuesta
- 1. Periodismo de formato largo
- 2. El storytelling de marca
- 3. Páginas de productos
- 4. Tiendas en línea
- 5. Portafolios creativos
- 6. Historias cronológicas e históricas
- 7. Eventos actuales
- Ahora es su turno de Scrollytell
¿Qué es el Scrollytelling?
Scrollytelling es la fusión del scrolling y del storytelling: una forma de contar dinámicamente historias largas a medida que el usuario se desplaza. En este marco, la actividad del usuario desencadena transiciones entre elementos y métodos de estilo de todo tipo: textos alternos, imágenes cambiantes, fondos interactivos, efectos de animación, cambios de tamaño y más. Juntos, cada elemento se combina y se conglomera para formar una historia fluida y seductora en movimiento.
Estos efectos visuales se esfuerzan por cautivar a su audiencia, ofreciéndoles contenido atractivo en bandeja de plata. Scrollytelling también se conoce como «visualización narrativa»: una serie de elementos visuales secuenciados juntos de acuerdo con una lógica que transmite un mensaje específico a los visitantes.
Lo más singular de esta innovadora técnica de narración es que los usuarios contribuyen a su narrativa a través de sus propios gestos individuales. Esto sucede tanto a escala colectiva como individual, ya que puede configurar ajustes independientes para cualquier elemento, como animaciones de entrada cronometradas o efectos de movimiento.
7 Casos de uso donde el Scrollytelling es la respuesta
No encontrará una regla escrita sobre cuándo usar el scrollytelling para su sitio web, pero encontrará casos de uso en los que el scrollytelling es sumamente propicio para el “engagement” del usuario.
Estos escenarios van desde historias cronológicas, storytelling de marcas, periodismo, sitios web de comercio electrónico y muchos más. A medida que los creadores de sitios web descubren más y más técnicas de visualización de contenido, nacen más casos de uso del scrollytelling.
Caso de uso #1: Periodismo de formato largo
El virtuosismo de Scrollytelling como forma de periodismo radica en la capacidad de utilizar medios digitales para transmitir información e historias complejas. La historia del chef con dos estrellas Michelin José Andrés en el HuffPost se ajusta a este proyecto: fundó «World Central Kitchen» en 2010, proporcionando soluciones inteligentes para acabar con el hambre y la pobreza a raíz de los desastres.
Una vez que la pandemia de COVID-19 golpeó duramente al mundo, Andrés reconoció la necesidad de mantener la conciencia sobre la escasez mundial de alimentos y distribuir comidas en los barrios de bajos ingresos de las grandes ciudades. Hay un montón de información para transmitir sobre la historia de respuesta a la pandemia de Andrés; lo que inspiró la fundación de World Central Kitchen, la actividad de ayuda en casos de desastre de Andrés desde 2010, el libro que escribió: «We Fed an Island» y mucho más.
Entonces, en el caso de José Andrés, su cuento de superhéroe culinario se transformó en una experiencia dinámica y atractiva.
Usted también puede hacerlo
- Use videos de fondo para su imagen principal: esta es una forma sutil pero dinámica de presentar su historia en un idioma que entusiasmará a los usuarios.
- Considere usar un diseño de sitio web de una sola columna para el cuerpo del texto. El scrollytelling a menudo implica una gran cantidad de objetos en movimiento más pequeños alrededor del contenido principal, por lo que mantener los ojos de los visitantes en usted se vuelve más fácil cuando la experiencia de lectura es únicamente vertical.
- Juegue con el tamaño de la fuente y los tipos de letra. Los elementos de texto ampliado esporádicos pueden dividir grandes trozos de texto sin desorientar al lector. Esto es especialmente cierto cuando combina dos tipos de letra contrastantes: encabezados con serif gruesos junto con textos sans-serif minimalistas.
Caso de uso #2: El Storytelling de marca
Si aún no se ha dado cuenta, a nosotros, como creadores de sitios web, nos encanta el scrollytelling. Incluso nos hemos encargado de usar Scrollytelling en una de nuestras publicaciones de blog más recientes: «Elementor celebra 5 años». En esta publicación, compartimos con orgullo algunos de nuestros logros más notables como pioneros en la creación de sitios web, junto con datos divertidos sobre el equipo de Elementor.
Usamos algunos de nuestros widgets favoritos para darle vida a hechos y declaraciones simples, acentuando el elemento de celebración del cuento de nuestro quinto cumpleaños. A medida que se desplaza hacia abajo, algunos elementos se mueven, algunos cambian de forma y algunos simplemente permanecen fijos donde están. Todo lo que se necesitó fueron algunas animaciones de Lottie, íconos giratorios, animaciones de entrada y, por supuesto, carga diferida: y nació un formato de publicación vibrante y listo para usar.
Usted también puede hacerlo
- Gire sus widgets de icono con el efecto de desplazamiento "Rotar". Cuando los íconos son simples, es fácil agregar un toque de complejidad al hacer que los elementos giren un poco.
- Mantenga sus números en movimiento con el widget de contador. Si desea mostrar un fenómeno como el crecimiento numérico, pero no desea escribirlo, muestre los números en aumento en tiempo real.
Caso de uso #3: Páginas de productos
La dinastía Apple tiene la ventaja en términos de lo que pueden hacer con su scrollytelling: pueden concentrarse mucho en las imágenes y tienen menos necesidad de explicar sus productos o proporcionar contexto sobre su valor agregado.
Esto se debe principalmente a que los productos de Apple son tan populares que, una vez que adquieren un nuevo producto de Apple, cualquier persona familiarizada con el mercado de dispositivos móviles puede reconocer fácilmente el valor agregado y la singularidad del artículo.
Y así, cuando se trata de scrollytelling, Apple tiene la ventaja de enfatizar los intrincados detalles de su mercancía, en lugar de equilibrar las imágenes con los textos.
Esto es exactamente lo que vemos en la página del producto AirPods Pro, que tiene la libertad de mostrar interactivamente las diferentes opciones de color de sus auriculares y mostrar un caso de uso de un cliente feliz usándolos. Son libres de elegir muy pocas palabras y pueden ir directamente al grano de lo que hace que los auriculares sean únicos y cómo mejoran la experiencia del cliente, todo sin mucha explicación de lo que realmente es el producto.
Usted también puede hacerlo
- Suba de nivel su juego de diseño con CSS personalizado. Cuando tiene muchas imágenes para mostrar a los usuarios, pero desea hacerlo de una en una, puede hacer que eso suceda haciendo que las imágenes cambien en el desplazamiento.
- Muestre clientes felices. Cuando las personas ven cuánto los entusiastas de la música aman los AirPods, están ansiosos por probarlos.
Caso de uso #4: Tiendas en línea
Cuando su producto de bebida insignia tiene un hermoso diseño de empaque, el storytelling de su producto puede dispararse. Cuanto más intrincados y elaborados sean las imágenes y los diseños de su marca, más profundidad podrá agregar a su historia. ¿Quién hubiera pensado que se podía decir tanto sobre un tónico social con infusión de cannabis?
Una historia sobre una bebida tan innovadora y original con múltiples facetas involucra muchos detalles: los ingredientes, la historia detrás de ella, cómo se produce, dónde comprarla, cuándo beberla, etc. Con tantos puntos para incluir, el scrollytelling incorpora muchos hechos y cifras en un paisaje visual.
Y ahora el desafío: abordar muchos pequeños detalles sin sobrecarga cognitiva o demasiada estimulación visual. Aquí es donde los efectos de paralaje resultan útiles, ya que animan los círculos simples y delineados que flotan sobre un fondo sólido. Con interacciones minúsculas que aparecen por primera vez como pequeños detalles de diseño, las pequeñas animaciones de repente se vuelven más grandes.
Usted también puede hacerlo
- Utilice Text Path Widget para agregar una capa de emoción a los elementos de texto pequeños. Cuando quiera asegurarse de que se lean sus palabras, los movimientos más pequeños pueden ser de gran ayuda.
- Elija esquemas de color complementarios para hacer que las animaciones sean más notorias. Parte de lo que hace que el movimiento de las finas ilustraciones moradas sea tan reconocible es que están sobre un fondo amarillo contrastante. Gracias a este contraste, el morado destaca entre los amarillos, y los elementos en movimiento se notan de inmediato.
Caso de uso #5: Portafolios creativos
Contar la historia de su trayectoria profesional y los proyectos que ha realizado tiene el potencial de crear una trama que se complica a medida que se desplaza hacia abajo en la página. Diferentes efectos visuales y animaciones pueden mejorar las miniaturas del proyecto, mostrando su colección de creaciones individuales como una entidad cohesiva.
El desarrollador de front-end portugués Fábio Azevedo tiene una galería deslizante única donde muestra su flujo de trabajo creativo. Con formas de imagen simples y listas para usar, Fábio crea una galería de miniaturas que logra mostrar muchos estilos de imagen diferentes en una fila, sin bordes, que no parece demasiado caótica o abrumadora para el usuario. Como vemos, aplica su talento consistentemente a cada proyecto, pero cada uno tiene una individualidad concertada.
La cohesión de la galería de Fábio también es posible gracias a los efectos de desplazamiento que usa, donde la superposición de imágenes desaparece al desplazarse, revelando el nombre del proyecto, el nombre del cliente y los lenguajes de codificación utilizados.
Usted también puede hacerlo
- Utilice la opción Máscara que presentamos recientemente en Elementor 3.2. La opción Máscara le permite transformar cualquier elemento del sitio web en una forma basada en una máscara de su elección. Una vez que haga esto, puede recrear la galería de miniaturas única (o similar) que Fábio presenta en su página de inicio.
- Utilice el widget de diapositivas de Elementor para crear controles deslizantes receptivos, que incluyen animaciones y efectos especiales que ponen su talento en diseño a la vanguardia de su portafolio.
Caso de uso #6: Historias cronológicas e históricas
¿Ha estado alguna vez en Amsterdam? Si no lo ha hecho, no es necesario que viaje muy lejos. Este sitio construido por Marcus Brown y Aristide Benoist cuenta la historia histórica de los emblemáticos canales de Ámsterdam, construidos en el siglo XVII. En resumen, puede considerar que este scrollytelling horizontal es una experiencia turística digital.
Algunos podrían decir que la historia del paisaje geográfico y urbano es aburrida, pero el sitio web de CANALS demuestra lo contrario. La yuxtaposición de imágenes escénicas con fondos de arriba a abajo y textos negros pesados hace que sea increíblemente más fácil apreciar tanto el contenido de la imagen como las palabras escritas de la historia.
No debemos olvidar que «Canals» comienza su historia a mediados del siglo XIII, hasta el siglo XXI. Como vemos, encontrar el equilibrio de imágenes, texto y movimiento armoniosamente en un espacio confinado no es una hazaña pequeña, pero definitivamente es factible.
Usted también puede hacerlo
- Explore la opción de scrolling horizontal. Cuando gran parte de su contenido comprende imágenes grandes y los párrafos de texto correspondientes, una configuración de página horizontal puede garantizar que cada elemento sea 100% visible.
- Aproveche los diferentes pesos de fuente disponibles para su tipo de letra. Cuando desea que los textos sean discretos para que sus imágenes sean el centro del escenario, los pesos de fuente más delgados pueden marcar la diferencia.
Caso de uso #7: Eventos actuales
Los sitios web comprometidos con la concienciación sobre una causa o evento deben hacer que su historia sea lo más efectiva posible. En esencia, el objetivo de un sitio web como “Every Last Drop” es dar a conocer a las masas su campaña para la conservación del agua. ¿Qué mejor manera de hacer esto que una historia similar a una caricatura de un astronauta pelirrojo que se prepara para trabajar por la mañana?
La cantidad de agua que se desperdicia en el mundo actual es alta, por decir lo menos. En el Reino Unido se desperdician 150 litros de agua por día, una ducha de cinco minutos usa 40 litros, un baño regular usa 80 litros. Es posible que esperáramos que los párrafos de los textos siguieran las imágenes y explicaran cómo estas cifras son posibles para empezar.
Scrollytelling al rescate. En lugar de largas explicaciones sobre los resultados de la investigación y el razonamiento científico, una historia ilustrada sobre un Joe regular que se dirige al trabajo nos dice todo lo que necesitamos saber. El astronauta representa a un gran segmento de la población mundial, y seguir su rutina diaria nos muestra qué tan rápido el lego consume agua sin darse cuenta. Las pruebas están ahí y no hay una necesidad real de visualización de datos, gráficos, paneles y, sobre todo, párrafos explicativos de arriba a abajo.
Usted también puede hacerlo
- Mire los Efectos de Ratón de Elementor. Estas funciones de seguimiento del ratón le permiten configurar ciertos elementos para que se muevan en relación con la actividad del ratón de los visitantes. Esta es la opción perfecta para el scrollytelling, ya que su contenido se moverá a medida que el usuario navegue.
- Aplique efectos de desplazamiento vertical a los fondos de su página. No solo puede elegir la velocidad de movimiento, sino que también puede determinar dónde comienza el movimiento en función de la altura de la ventana gráfica.
Ahora es su turno de Scrollytell
Hemos hablado de las muchas caras del scrollytelling: cuándo usarlo, qué funciones lo hacen posible, los ejemplos más prometedores y por qué vale la pena.
Los creadores de sitios web tienen muchas tendencias de la industria para mantenerse al día: efectos de movimiento, diseño 3D, elementos interactivos, y ahora puede combinarlos todos. ¡Manténganos al tanto de sus proyectos de scrollytelling y asegúrese de compartirlos en los comentarios para que podamos echar un primer vistazo!