Además de crear marcas y sitios web para startups, también necesitamos hacer tiempo para nuestras propias necesidades—ocasionalmente. Por eso, recientemente lanzamos nuestro sitio web con un nuevo aspecto y sensación, enfocándonos en el contenido y las interacciones. Da un paso detrás de la cortina y explora nuestra nueva branding.
Cada decisión de branding tiene una razón detrás
Para empezar, ¿por qué realmente rebrandamos? Primero, nuestro rebranding es el resultado de una renovación del sitio web. Consideramos necesario mejorar nuestra web de una manera que permita al usuario enfocarse completamente en el contenido mientras experimenta un flujo suave y cautivador guiado por interacciones sutiles. Lo que fue definitivo desde el principio fue el concepto para el rebranding de nuestra web:
Contenido primero, interactividad primero.
Así que, el enfoque de nuestros esfuerzos de branding necesitaba centrarse en la interactividad y la orientación al usuario. Estaba claro que el nombre, el logo y el diseño no serían alterados; el mensaje, la tipografía, la imaginería y el color no sufrirían cambios severos; y la animación ganaría más atención. Lo más importante, la interactividad se introduciría como un nuevo pilar de nuestra web.
Como cada paso de branding tiene una razón detrás, el CEO Jesús Coto enfatiza la importancia de la decisión:
“Como una agencia de branding líder, tenemos un ojo agudo para reconocer cuándo una marca podría beneficiarse de un refresh. Recientemente, hemos realizado algunos cambios sutiles pero impactantes en la branding de The Branx. Mientras que nuestro mensaje central y la mayoría de nuestros elementos de branding permanecen prácticamente iguales, estas modificaciones están diseñadas para elevar aún más la posición de The Branx. Nuestro objetivo es reforzar nuestra posición como la agencia creativa y de branding líder para startups tecnológicas.”
En una industria donde muchas agencias están resonando propuestas de valor similares, nuestra marca revitalizada tiene como objetivo afirmar nuestro liderazgo.
“Nos estamos enfocando en mejorar nuestra calidad y eficiencia, en lugar de competir en precio. Además de esto, es una buena manera de celebrar nuestro 5to cumpleaños, supongo que eso es razón suficiente.”
Partiendo de nuestros orígenes
Como mencionó Jesús, hace 5 años en marzo de 2019, nuestros cuatro cofundadores firmaron los documentos en la notaría. “The Branx” nació. Pero, ¿de dónde proviene nuestro nombre?
Ines Haitzinger, Co-Fundadora y Líder de Marketing, explica:
The Branx es el resultado de “brand” y “experience”.
“Se conecta con nuestra misión de crear experiencias de marca únicas y transformadoras para startups. La 'x' en 'Branx' no solo significa la encrucijada donde se encuentran la branding y la experiencia, sino que también añade un giro moderno y atrevido, haciendo que el nombre sea memorable y atractivo para las startups innovadoras que apuntamos. El artículo definido 'the' añade una imagen de héroe a nuestro nombre e infunde confianza y seguridad.”
Un camino de rebranding accidentado
Todo el proceso de rebranding fue un camino accidentado, como enfatiza Jesús:
“A menudo se dice que los hijos del zapatero no tienen zapatos, un sentimiento que resuena verdadero para nosotros mientras emprendemos el viaje de rebranding. Típicamente, nuestra experiencia es utilizada por empresas externas, pero esta vez, nos encontramos en la posición única de ser tanto el cliente como el proveedor de servicios. Esta situación fue un recordatorio contundente de la importancia de la perspectiva, ya que tuvimos que dar un paso atrás y ver nuestra marca desde el punto de vista de un externo. El proceso de establecer el brief fue un desafío, ya que tuvimos que definir los límites de nuestra propia creatividad.”
Mientras que la creatividad a menudo se ve como ilimitada, en este caso, el desafío fue determinar nuestros propios límites y trabajar dentro de ellos para crear una marca que realmente nos represente.
La creatividad no es un proceso lineal, así que nuestro nuevo branding tampoco lo fue. Ha sido un constante ir y venir, tratando de actualizar nuestra identidad visual sin alejarnos demasiado de nuestras raíces. Y este es el resultado.
El nuevo aspecto y sensación de nuestra web
Aunque las páginas y la estructura del CMS de nuestro sitio web permanecieron sin cambios, una serie de modificaciones de diseño esperaban ser traducidas a Webflow. Esto abarcó ajustes a colores y tipografías, eliminación de secciones desactualizadas e incorporación de nuevos elementos, todo basado en el concepto de “Contenido primero, interacciones primero”. A través de nuestro sitio web renovado, los usuarios encuentran interacciones y animaciones sutiles pero cautivadoras a lo largo.
Detalles ingeniosos, experiencia de usuario maximizada
Desplazamiento suave
Cuando los usuarios aterrizan en nuestra nueva página de inicio, notarán una aparición fluida del encabezado principal justo en la parte superior de la página. A lo largo de la web, los elementos de texto y las tarjetas de estudios de caso están animados en sincronización con el desplazamiento del usuario, creando un viaje visualmente atractivo y cohesivo a través de nuestro contenido.
Video introductorio atractivo
A medida que los usuarios se desplazan hacia abajo, son recibidos con una vista previa cautivadora de nuestro Reel de Branding para Startups, que casi llena toda la pantalla. Esta característica proporciona un vistazo a nuestros proyectos recientes, animando a los visitantes a explorar más.
Botones magnéticos
Dentro del Reel de Branding para Startups, el botón de llamada a la acción (CTA) está animado. El efecto de degradado en movimiento que capta la atención del botón, combinado con su capacidad para seguir el mouse del usuario dentro del marco del video, añade un elemento interactivo y dinámico que fomenta la interacción del usuario.
Efectos de mouseover para textos
A lo largo de nuestro sitio web, hemos implementado efectos de mouseover para textos para mejorar el compromiso. Cuando los usuarios pasan el mouse sobre ciertos elementos de texto, como enlaces a otras páginas, cambios sutiles de color añaden dinamismo y llaman la atención sobre áreas importantes, elevando la experiencia general del usuario.
Animaciones atractivas, pero no abrumadoras
Hemos incorporado animaciones sutiles en las tarjetas que presentan nuestros estudios de caso. Estas animaciones sirven para dar vida tangible a nuestros proyectos, haciéndolos visualmente atractivos sin interrumpir el flujo del viaje del usuario a través del sitio web.
Navegación mejorada, pero con marca
Una navegación fácil es un aspecto clave del diseño de un sitio web. El mega menú presenta un desplegable de ancho completo de la barra de navegación, permitiendo a los usuarios descubrir fácilmente nuestros servicios sin tener que abandonar la página. Al mostrar ilustraciones de marca junto a los nombres de los servicios, también reforzamos nuestra identidad de marca, creando una experiencia de navegación cohesiva e inmersiva.
De desplazamiento a confianza
Supuestamente, si los usuarios llegan al final de la página de inicio, están abiertos a aprender más sobre The Branx. Por eso, incorporamos un elemento adicional que proporciona confianza: al realizar un desplazamiento adicional al final de la página de inicio, aparece un pie de página interactivo, accesible tanto en dispositivos de escritorio como móviles. Este pie de página muestra prominentemente nuestros premios y reconocimientos, proporcionando enlaces a las respectivas fuentes, como Clutch, y guiando a los usuarios a explorar más en nuestra página dedicada a Premios y Reconocimientos.
Tipografía, colores e imaginería: Adaptaciones para un impacto óptimo
La web como producto final es el resultado de iteraciones en colores, tipografía y estilo general de la imaginería. Todos estos elementos se unen para crear la experiencia web que estábamos buscando.
Presentando Safiro, nuestra nueva tipografía
Safiro es una fuente sans-serif única, hecha a medida por el estudio de fundición Atipo. Versátil en sus estilos, irradia un aura profesional y tecnológica que resuena en todos nuestros puntos de contacto de marca. Así que, pudimos reducir nuestro uso de fuentes de dos a una, lo que impacta positivamente en el tiempo de carga de nuestra web.
No todo es blanco y negro, pero (principalmente) preferimos negro
Con nuestra nueva paleta de colores introdujimos dos cambios importantes: ahora, el negro se usa predominantemente para comunicar un aire más premium y de alta calidad. También, alejándonos de nuestros colores anteriores, alcanzamos un degradado metálico que representa solidez y crecimiento y que coincide con las tendencias contemporáneas de branding en la industria.
Un camello AI como visual de marca
Mientras que predominantemente presentamos nuestros proyectos de branding para presentaciones y comunicaciones, hemos adoptado un enfoque meticuloso para crear imágenes de encabezado para publicaciones de blog. Aprovechando la IA, estas imágenes están diseñadas de manera única para el contenido de cada artículo de forma abstracta, asegurando que cada pieza tenga su propio tono de voz distinto.
Pensamientos finales
Después de lo que pareció un viaje interminable, finalmente logramos un resultado que cumplió con nuestras expectativas y requisitos. Se trataba de encontrar un compromiso entre elevarnos, mantenernos fieles a nuestras raíces y aprovechar al máximo el tiempo y los recursos.
Jesús señala lo que más admira de nuestro nuevo aspecto y sensación:
“Lo que más aprecio es nuestro cambio hacia un tema completamente negro, que nos otorga un aura más sofisticada y premium cuando es necesario. Sin embargo, como a menudo enfatizamos, el branding no se trata de un solo elemento, sino de una sinfonía de varios componentes que trabajan en armonía. Así que, debo decir, lo que realmente admiro es la atmósfera general y la impresión que crea nuestro nuevo aspecto y sensación.”
Así que, estamos orgullosos de poder compartir los resultados increíbles contigo. Esperamos que te guste nuestro nuevo aspecto y sensación tanto como a nosotros. Mantente atento para más perspectivas sobre branding para startups.