La idea de contar historias ha existido durante cientos de años. Hay tantas maneras de contar una historia. Tenemos libros, teatro en vivo, música y hasta pintura. Y eso es solo por nombrar algunos.
Desde la era digital, nos ha dado más formas de contar historias y ahí es donde sitios web de narración han aparecido a lo largo de los años.
Puede atraer a tantos visitantes si tiene un diseño de sitio web de narración increíble, contar una historia puede ser poderoso y una excelente manera de mostrar su empresa, producto o servicio, etc.
¿Qué es un diseño de sitio web narrativo?
Un sitio web de narración es una página web en la que utiliza las ventajas del diseño web para guiar al lector a través de una historia.
El diseño tendrá que ser visual, convincente y normalmente interactivo de alguna manera.
Un diseño de narración incluirá algún tipo de animaciones, muchas imágenes o gráficos y texto o títulos grandes para captar la atención del lector. Muchas veces los diseñadores usan sitios web de animación de desplazamiento.
La diferencia en comparación con un diseño de sitio web normal es que los sitios web de narración suelen ser diseños de una sola página, el usuario es guiado a través de la historia desplazándose.
Consideraciones sobre el diseño del sitio web de narración
Antes de ver algunos buenos ejemplos, repasemos algunas consideraciones para este tipo de diseño. Hay algunos factores clave que debe tener en cuenta al usar un diseño de este tipo.
Un sitio web de narración no tiene por qué ser complicadono siempre necesita gráficos complicados, diseños de paralaje de desplazamiento elegante, etc. Un diseño plano o simple puede funcionar tan bien como un diseño complejo: todo se reduce a su público objetivo.
Un ejemplo rápido son los niños. Requerirán una experiencia visual más interactiva en comparación con algunos diseños de desglose de empresas formales/informativos. Pero podemos ver todo esto en la naturaleza con los ejemplos. Vea si puede elegir los diferentes enfoques de diseño.
13 sitios web únicos de narración de historias
Cada diseño que tenemos aquí debería inspirarte para usar un diseño narrativo. Puede ser una forma poderosa de transmitir información o guiar a un usuario a través de una experiencia visual.
1. BBC: Partición de la India
Su navegador no soporta la etiqueta de vídeo.
Diseñado por la BBC, este sitio web narrativo lleva al lector a través de eventos históricos entre India y Pakistán. Lleva al usuario a través de un viaje a lo largo de los últimos 70 años.
este diseño es hermosamente simple: es interactivo pero es súper fácil de navegar. Se siente tan natural para contar historias.
Utiliza un diseño de página completa bien elegido para guiar al usuario a través del historial. Esto hace que funcione extremadamente bien y permite al usuario saltar a través de las secciones en orden consecutivo y conocer los diferentes eventos clave en orden cronológico.
Este diseño es definitivamente una opción fantástica para aquellos que buscan un sitio web moderno para contar historias.
Su navegador no soporta la etiqueta de vídeo.
Funciona tanto en computadoras de escritorio como en dispositivos móviles y es totalmente receptivo. Disponible como componente de JavaScript y como complemento de WordPress para los constructores de Elementor y Gutenberg.
2. historia de inicio
Este sitio web de narración es más informativo y explica la práctica de entrar en los sueños y la realidad. La característica principal es un diseño de desplazamiento continuo por el que pasa el usuario.
Todo el diseño es muy interactivo y funciona bien visto a pantalla completa. Tienes que desplazarte por el sitio para ver la historia, el texto, las imágenes y los íconos emergentes a medida que avanzas.
El uso sutil de colores y animaciones funciona bien para captar la atención del lector en puntos específicos.
3. jess y russ
Aquí tenemos un diseño más visual e interactivo. Se basa en un tema de desplazamiento de paralaje. Este efecto de paralaje se puede hacer solo con CSS. Muchos elementos y texto se juntan inteligentemente a medida que el usuario se desplaza hacia abajo.
A lo largo de todo el sitio, entre las diferentes secciones está la línea de tiempo principal y esto es realmente útil para el lector. Los mantiene encaminados y los involucra con las fechas de la historia.
Presenta un tema oscuro con ilustraciones interesantes que encajan entre el texto, hay animaciones sutiles que no son abrumadoras.
4. Hasta la última gota
Un diseño más adaptado a los niños, un público que apreciará una experiencia más visual, colorida e interactiva.
La forma principal en que este diseño es interactivo es el desplazamiento. A medida que avanzas en la historia, te hace sentir que tienes el control, la historia se desenreda a medida que avanzas.
Los gráficos, el texto y las animaciones se deslizan en su lugar mientras se presenta el texto informativo. Un gran diseño visual para guiar al usuario a través de información importante.
5. día alpino
Este diseño es perfecto para usted si le preocupa tener el tiempo o la capacidad para crear un sitio web narrativo con efectos sofisticados, desplazamiento de paralaje, etc. Un diseño para contar una historia no tiene que incluir todo eso para ser efectivo.
Aquí tenemos un diseño de sitio web simple, sin una configuración compleja. Solo gráficos e imágenes cuidadosamente colocados. Animaciones sutiles y un diseño que se basa en el desplazamiento vertical para guiar al usuario a través de diferentes secciones.
El público objetivo de este sitio web de eventos no querrá animaciones restrictivas o animaciones de desplazamiento fijo, por lo que su diseño simple y su enfoque rápido facilitan la absorción de toda la información.
6. Kalso
Un diseño de sitio web narrativo que se basa en el desplazamiento vertical para llevar al usuario a un viaje.
Este diseño es inmersivo y presenta un sitio de una página que contiene una inmensa variedad de imágenes, gráficos y animaciones geniales. Todo es muy interactivo y atractivo, algo que será un buen augurio para una audiencia que ama la experiencia visual.
7. historia de santa
Una experiencia muy impresionante e inmersiva, algo que funcionaría bien con niños o una audiencia que se beneficia de mucha interacción y atractivo visual.
Si está buscando una inspiración única, tome este gran ejemplo de la vanguardia de la narración a través de un sitio web. Enormes cantidades de excelentes gráficos, audio e interactividad: una forma diferente de guiar a un usuario en lugar del desplazamiento tradicional que vemos.
8. Tiempo perdido en el trabajo
El público objetivo de este sitio web narrativo serán las personas empleadas en la oficina y se trata de una pérdida de tiempo. Por lo tanto, deberá ser de fácil acceso, sin desplazamiento restrictivo ni elementos interactivos molestos.
Este diseño funciona bien con su desplazamiento fácil y rápido. El acceso a la información es rápido, lo que hace que la página y las secciones sean atractivas mediante el uso de un sutil elemento de paralaje, nada demasiado llamativo.
Los colores son audaces y resaltan, el diseño plano lo hace agradable a la vista y todo esto sucede en un diseño de una página.
Otro sitio web de diseño plano que utiliza un diseño de una página para crear una experiencia interactiva.
Gran uso de la animación para presentar diferentes elementos de texto y gráficos. Se basa en el desplazamiento vertical y presenta la información de forma fácil de leer.
10 A2A Luz
Un maravilloso ejemplo de un sitio web de narración y marketing. El diseño logra presentar una gran cantidad de texto al usuario, pero lo mantiene interesado con un gran uso de gráficos y animaciones fluidas entre secciones.
El diseño es colorido y mantiene un tema en todas partes. Le da una sensación cálida que se relaciona muy bien con la narración.
Si necesita presentar mucho texto para una historia, este ejemplo muestra cómo puede presentar mucho texto y mantener las cosas interesantes entre los capítulos que muestra.
11 vivir para cambiar
Aquí tenemos un sitio web de narración que presenta mucha información objetiva y cuenta con un gran uso de gráficos y efectos geniales.
A medida que se desplaza hacia abajo, el texto se presenta claramente con un fondo animado de temática espacial, rodeado de gráficos geniales que se suman a la experiencia.
Utiliza algunas animaciones sutiles que no son abrumadoras ni distraen. Gran diseño en general y un buen ejemplo de equilibrio para el público objetivo.
12 Tribu nómada
Un emocionante sitio web de una sola página que lleva la interactividad a un nivel completamente nuevo: si está buscando algo único e inspiración para un tema interactivo, este es el indicado.
Este tiene excelentes gráficos, combina audio, narrativa y compromiso para guiar al usuario a través de una experiencia narrativa única.
13 Atterwasch
Detallado como un documental en movimiento, un ejemplo fantástico y único de cómo se puede usar un sitio web para contar una historia.
Aquí tenemos el uso de animaciones, técnicas de paralaje y uso de audio para involucrar al usuario. Toda la experiencia es inmersiva y emocionante para recorrer.
Todo está bien ejecutado e incluso podría decirse que acuñó el término “Scroll Doc” con la forma en que se presenta: ¡un diseño y un caso de uso verdaderamente únicos!
Conclusión
Hemos visto muchas historias diferentes en este artículo, espero que hayas encontrado algo que te haya inspirado con estos diseños.
La idea de este artículo era presentarle las habilidades narrativas de los sitios web de una página y mostrarle cómo se puede hacer.
Recuerde, no siempre tiene que tener gráficos sofisticados, animaciones abrumadoras o diseños complicados.
Los diseños simples y las animaciones mínimas pueden funcionar igual de bien. Se trata más de comprender lo que su público objetivo querrá y esperará.
Como hemos visto en el ejemplo de BCC, una buena herramienta para crear su sitio web de narración de historias podría ser fullPage.js.
Esta biblioteca de JavaScript le permite crear sitios web de pantalla completa que crearán una experiencia inmersiva y permitirán una navegación fácil, imágenes de fondo grandes, contar una historia, etc. ¡Échale un vistazo!
Su navegador no soporta la etiqueta de vídeo.
Artículos relacionados
Sobre el Autor:
lucas embrey es un desarrollador full-stack, BSc en Ciencias de la Computación y con sede en el Reino Unido.
Puedes saber más sobre él en https://lukeembrey.com/
