Hay tantas empresas en el mundo de hoy, y tener una presencia en línea brillante es un objetivo cada vez mayor: los beneficios de las redes sociales y el marketing SEO son demasiado prometedores para ignorarlos si tiene un negocio.
Cada empresa quiere que su sitio web sea único y transmita un mensaje poderoso sobre su marca, y ahí es donde entra en juego StoryBranding. Una técnica de marketing que le brinda un marco a seguir al estructurar y diseñar su sitio web principal para hacer una Sitio web de StoryBrand.
La razón por la que StoryBranding es tan importante es que todas las empresas compiten por clientes o usuarios. Quieren que su sitio web sea divertido e impresionante y los sitios web StoryBranding ayudan a simplificar la experiencia del usuario y mejoran las tasas de conversión.
En este artículo, entenderemos de qué se trata StoryBranding y veremos algunos ejemplos inspiradores. Ejemplos de sitios web de StoryBrand.
¿Qué es un sitio web de StoryBrand?
Un sitio web de StoryBrand es un sitio web que utiliza una historia para conectarse de manera efectiva con la audiencia y comercializar un producto o servicio. Suele utilizar la fórmula principal de toda buena historia (personajes, emociones, problema, guía, plan, solución) como forma de mostrar a los visitantes por qué necesitan el producto.
“StoryBrand” es una metodología o un marco explicado por Donald Miller en su libro más vendido “Construyendo una StoryBrand”.
Esta metodología ha sido ampliamente adoptada por muchas marcas en todo el mundo y se ha utilizado mucho antes de que alguien le pusiera un nombre. Es una excelente manera de comunicar la propuesta de valor de un negocio y una forma muy natural de conectarse con clientes potenciales.
15 ejemplos inspiradores de sitios web de StoryBrand
StoryBranding se trata de transmitir el mensaje a sus clientes lo más rápido posible, sin ninguna confusión. En estos ejemplos de sitios web de StoryBrand, podrá ver el uso en el mundo real y cómo otras empresas han logrado un increíble diseño de StoryBranding.
1. Paradouwines
Su navegador no soporta la etiqueta de vídeo.
El primero en nuestra lista es una marca de vino. El sitio web nos cuenta la historia de los fundadores, cómo decidieron trabajar con los vinos, su relación con ellos y qué los hace diferentes de los demás.
El sitio web hace uso del marco de la marca de la historia para entrar realmente en detalles sobre los personajes principales de esta historia y, aunque esta historia no tendrá ningún problema, realmente toca el aspecto emocional de la misma acercándonos a la marca al enfocarse en la personajes de la historia.
El efecto de pantalla completa es perfecto para esta web storybrand, proporciona una navegación muy sencilla para que podamos centrarnos por completo en la historia, a la vez que le da un toque original y pone especial énfasis en el orden cronológico con su efecto de desplazamiento horizontal.
Su navegador no soporta la etiqueta de vídeo.
2. Producciones de Dunshire
Este sitio web utiliza técnicas tradicionales de storybranding para captar la atención del usuario y explicar rápidamente lo que hacen y lo que el visitante puede esperar.
Nos explica de una manera muy amable quiénes son, sus valores, qué hacen y cómo lo hacen. Es una especie de narración en solitario que nos explica lo que hacen como si fuéramos sus amigos.
Hacen uso de un lenguaje divertido y coloquial y lo mezclan con vídeos divertidos y colores vivos para contarnos cómo son e intentar acercarse a su cliente ideal.
3. mejor arriba
BetterUp es una empresa que se enfoca en mejorar la resiliencia, adaptabilidad y efectividad individual para crear un mejor espacio de trabajo dentro de las empresas.
En este sitio web, hacen un gran uso del marco de la marca de la historia para mostrar los principales problemas que enfrentan las personas en muchas organizaciones y, como resultado, los problemas con los que luchan las organizaciones.
Hacen uso de gráficos, animaciones, tablas y pequeños textos para guiar al visitante a través del sitio web.
Es un gran ejemplo del marco de problema + solución utilizado en la marca de la historia. Primero, al visitante se le explica el problema en detalle, y luego, se le presenta cuál puede ser la solución para él.
4. betakids
El lado izquierdo es todo texto y el lado derecho es una imagen atractiva con algunos toques gráficos agradables para que parezca más interesante y menos nítida en los bordes.
La división inteligente entre izquierda y derecha ayuda a presentar la información y vincular el texto a la imagen, creando un diseño de sitio web de StoryBrand. Estas son las grandes ideas que podemos obtener al mirar estos ejemplos de sitios web de StoryBrand.
5. Dana Rayburn
Este diseño marca muchas casillas para las características de StoryBranding, el número uno es el famoso título, que explica en una oración corta qué hace la empresa y para quién es. El segundo título se enfatiza para que el público objetivo se sienta bienvenido e importante, saben que es para ellos.
Con StoryBranding es esencial contar una historia y crear un diseño basado en historias, compartiendo un mensaje significativo con su audiencia sobre por qué deberían usar su fantástica empresa.
La sección simple pero efectiva con las marcas de verificación ayuda a explicar el servicio aún más, y podemos decir sin confusión que esto es lo que se admite.
6. Inmobiliaria Amory
Una imagen masiva a escala real para vincular el texto con el usuario y la casa en el fondo, el título principal y el subtexto, explican de manera convincente qué servicios se ofrecen.
La barra de navegación es puramente solo los servicios ofrecidos y cómo ponerse en contacto rápidamente, efectivo y simple de usar, con solo los enlaces esenciales.
Un botón CTA claro para ayudar a que el usuario programe una llamada y discuta más.
7. Fluro Automatización
Esta compañía literalmente solo dice lo que hace en su primer título, no hay confusión y podemos ver que funcionan con dispositivos móviles sin tener que adivinar. Una característica clave de un sitio web de StoryBrand.
Podemos leer la sección de héroes y comprender de qué se trata el sitio, cualquier confusión se erradica con este diseño simple y su mensaje claro. Sin una complicada navegación por encabezados, todo el enfoque está en el medio.
8. Fisioterapeuta Vanbrugh
La imagen en este sitio web de StoryBrand se enfoca en el movimiento, vinculando a la empresa y lo que pueden brindarle a alguien que necesita el tratamiento que ofrecen. Una característica clave del diseño de un sitio web de StoryBrand.
El usuario probablemente querrá comprender rápidamente el servicio y participar en una llamada, por lo que el CTA de fácil acceso está justo en el medio después del texto inicial, lo que ayuda a presentarlo primero.
El “VIVIR LA VIDA AL PLENO” es un mensaje poderoso y da la impresión de que es lo que brindan.
9. Fundación de deportes juveniles de Colorado
Un sitio web de StoryBrand más interactivo ahora, desde este el usuario puede distinguir fácilmente por el nombre y la imagen poderosa con lo que hacen.
El elemento interactivo con el área de donación nos muestra que son una fundación sin fines de lucro, tal como en el nombre. Esta sección principal utiliza una estructura dividida de izquierda a derecha para ayudar a que las secciones sean más fáciles de entender y se sientan menos desordenadas.
10 Servicios TCHEM
Al igual que las imágenes grandes, un video también puede ser una opción fantástica para un sitio web de StoryBrand y, en este ejemplo, ayuda a interactuar con el usuario, junto con un texto simple para que el usuario sepa lo que hace la empresa.
En este sitio web de StoryBrand, el video hace la mayor parte del discurso mientras cambia a través de todos los diferentes servicios que se ofrecen. Pero el usuario obtiene acceso rápidamente a la información de contacto y una cadena de 3 palabras clave principales en cuadros resaltados.
11 Afiliados de Fysio
Este diseño comienza con una sección de héroe muy simple, tenemos una imagen grande de la persona con la que podemos trabajar, texto claro de CTA y un botón para ayudar al espectador a comprender lo que está sucediendo.
El texto del título grande es una forma tan clara de que el visitante sepa lo que haces, el texto del subtítulo se puede usar para elaborar más, pero como puedes ver, solo una pequeña oración es suficiente para ser poderoso aquí.
StoryBranding tiene que ver con mensajes claros y copia de texto, las 3 secciones distribuidas uniformemente en la parte inferior ayudan a resaltar 3 puntos clave principales que un usuario podría necesitar saber, este es un excelente diseño de StoryBranding con íconos para ayudar a involucrar al usuario.
12 Entrenamiento de alto voltaje
Es posible que haya notado que muchos diseños de StoryBranding utilizan una imagen de la persona que dirige la empresa, esto es excelente porque agrega un toque personal y hace que se sienta como si estuviera hablando con usted.
Y esto es lo que hace tan bien este diseño, tenemos el título grande que nos dice rápidamente lo que hacen, verifique, luego tenemos algunos puntos clave para ayudarnos a comprender mejor los servicios que se ofrecen. ¡Simple!
Esta es la razón por la cual los diseños y temas minimalistas son tan buenos en StoryBranding, le brindan la apariencia que necesita para mantener las secciones simples, para que no parezcan confusas o complejas para el usuario.
13 Escuela Fotográfica Shultz
Un título y un mensaje claros sobre lo que hace la empresa de fotografía y dónde está su enfoque, solo necesitando unas pocas palabras. Realmente genial para un diseño de portafolio de fotografía, simple, limpio y efectivo.
El botón CTA interactivo “Elegir un plan” es excelente porque lleva al usuario directamente a los servicios, sin problemas de marketing, el usuario tiene acceso rápido a los artículos que se venden.
El texto en negrita que resalta las palabras clave y los puntos de interés ayuda al lector a saltar rápidamente a las diferentes secciones que pueden interesarle. El diseño es simple y fácil de seguir, no se siente complicado y no tiene desorden.
14 La red de restauración
Una imagen poderosa que se vincula con la causa directa del trabajo de la fundación y sus resultados.
El título principal ni siquiera comienza con una letra mayúscula, dando la impresión de cuán vital es, su servicio simplemente explica en pocas palabras lo que hacen y por qué es importante, transmitiendo ese mensaje tan importante del sitio web de StoryBrand.
Las estadísticas clave se presentan en un formato fácil con diferentes colores y texto simple, lo que ayuda al usuario a comprender la importancia del servicio.
15. Jaxakvoda
Guiando al usuario a través de la historia de su agua de marca, utiliza animación, efectos de paralaje y desplazamiento de pantalla completa.
Toda la experiencia es muy inmersiva y hace un uso fantástico de toda la pantalla. Más allá de cada pantalla, la línea principal en el medio actúa como una línea de tiempo y lleva al usuario a través de un viaje y una historia de su agua y por qué es diferente.
¿Cómo creo un sitio web de StoryBrand?
Repasemos algunos puntos clave para crear un buen sitio web StoryBrand:
- Mantenga su diseño simple. La creatividad puede ser confusa. Es mejor mantener su diseño simple y el texto claro, debe ayudar al usuario a comprender lo más rápido posible lo que hace su marca.
- Usa palabras simples. Las opciones de palabras largas o complicadas desanimarán a los usuarios, hace que el texto de su copia sea difícil de entender y difícil de entender rápidamente
- No desordenes tu diseño. Elija una estructura mínima y un diseño minimalista, esto ayudará a enfocar al usuario en las áreas correctas
- Enfócate en tus palabras, no en el diseño. Ayude al usuario a comprender su producto o servicio con solo unas pocas palabras clave simples en lugar de un diseño elegante
- Se trata del mensaje.. No puedes simplemente decirle al usuario qué problema resuelve tu empresa, debes decirle cómo lo vas a resolver y lo increíble que es tu producto/servicio.
Los ejemplos de nuestro sitio web StoryBrand han mostrado muchas de estas características. A estas alturas, debería tener una idea de lo que hace que un diseño de sitio web de StoryBrand sea increíble.
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/
