la marca.
Bambolé es una marca de helados veganos, naturales y artesanales que transmite energía, frescura y movimiento. Inspirada en el ritmo del verano y la alegría de lo simple, Bambolé busca conectar con un público joven y enérgico que valora lo natural, lo auténtico y lo divertido.
La identidad visual gira en torno a una paleta de colores vibrantes, tipografías manuscritas y un estilo dinámico que evoca el juego, el sabor y la libertad. Desde su nombre hasta su slogan (“Sabor que baila en tu boca”), todo en Bambolé está pensado para comunicar felicidad, cercanía y una propuesta de valor diferenciadora en el mundo del helado.
período de tiempo.
6 semanas.
mi papel.
Diseño UI, Diseño visual, Prototipado, Desarrollo Web.
herramientas.
Figma, Illustrator, Formularios
de Google, Visual Code, Html, Css, Bootstrap. GitHub.
el desafío.
El reto principal fue trasladar esa identidad visual fuerte y definida a una experiencia digital coherente, atractiva y funcional, que no sólo reflejara los valores de la marca, sino que además se adaptara al comportamiento del usuario actual: visual, móvil, rápido y emocional.
Al tratarse de una marca nueva, sin presencia previa, el desafío también incluyó crear una primera impresión digital sólida, que introdujera el universo Bambolé de forma clara, amigable y memorable.
el objetivo.
Desarrollar una landing page moderna, responsiva y alineada visualmente con la identidad de Bambolé, que:
- Presentara la marca de manera impactante y coherente.
- Comunicara su propuesta de valor de forma clara y emocional.
- Invitara a explorar el producto y generar conexión con el público.
- Sentara las bases para futuras funcionalidades (tienda online, animaciones, contacto, etc.)
cómo.
identidad visual.
Interpretación de la esencia de la marca Bambolé para traducir sus valores (alegría, frescura, movimiento) en una estética visual coherente.
diseño ui.
Desarrollo de la interfaz con foco en una experiencia visual atractiva, moderna y cercana.
prototipado.
Creación de prototipo navegable para validar estructura, interacción y flujo del usuario antes de pasar a desarrollo.
testing y ajustes.
Revisión funcional y visual en distintos navegadores y pantallas. Ajustes finales para asegurar accesibilidad, legibilidad y coherencia visual.
desarrollo.
Maquetación y codificación de la landing page utilizando HTML, CSS y Bootstrap. Implementación responsive y optimización para distintos dispositivos.
identidad visual.
tipografía.
Belmist Regular es la tipografía principal, refuerza la personalidad vibrante y cercana de Bambolé. Esta tipografía manuscrita combina un trazo fluido y dinámico con un toque desenfadado, evocando la espontaneidad de la escritura a mano.
Montserrat es la tipografía secundaria, crea un equilibrio perfecto con la fluidez y dinamismo de la tipografía principal. Montserrat es una fuente sans serif con formas claras y legibles, ideal para reforzar la comunicación sin restarle protagonismo al logo y a los elementos gráficos más expresivos.
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
1 2 3 4 5 6 7 8 9 0
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
1 2 3 4 5 6 7 8 9 0
paleta de colores.
Paleta vibrante y enérgica, reflejando la alegría del verano y la frescura de sus helados veganos. Cada color ha sido seleccionado estratégicamente para evocar sensaciones de diversión, juventud y sabor:
redes sociales.
Las redes sociales de Bambolé estarán diseñadas para reflejar la esencia vibrante, fresca y juvenil de la marca, creando un universo visual dinámico y coherente con su identidad. Elementos gráficos dinámicos: Aplicación de ondas, líneas curvas y doodles que refuercen la sensación de movimiento y alegría. Fotos de producto con fondos vibrantes: Helados en primer plano con contrastes de color llamativos. Contenido lifestyle: Imágenes de personas jóvenes disfrutando de Bambolé en escenarios veraniegos y espontáneos.
diseño ui.
tipografía.
En el branding de Bambolé se utilizó la tipografía Belmist, una fuente con mucho carácter que acompañaba perfectamente la identidad visual. Sin embargo, debido a limitaciones de disponibilidad y compatibilidad web, fue necesario buscar una alternativa que mantuviera el espíritu artesanal y elegante de la marca, sin comprometer la performance ni la accesibilidad.
La elección recayó en Old Standard TT, una tipografía con un estilo clásico y cálido, que aporta personalidad y mantiene una buena legibilidad en entornos digitales. Esta adaptación permitió conservar coherencia estética y al mismo tiempo asegurar una experiencia fluida para el usuario.
Montserrat es la tipografía secundaria, utilizada tanto en el branding, como en la web.
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
1 2 3 4 5 6 7 8 9 0
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
1 2 3 4 5 6 7 8 9 0
paleta de colores.
La paleta de colores original de Bambolé está compuesta por tonos intensos y vibrantes que comunican energía, verano y diversión. Para la versión web, se mantuvieron los tres colores principales de la identidad, pero se ajustaron sus valores agregando un porcentaje de blanco.
Esta modificación tuvo como objetivo suavizar la intensidad visual en pantalla, mejorar la legibilidad, evitar el cansancio visual y garantizar una experiencia de navegación más equilibrada, especialmente en dispositivos móviles.
La paleta adaptada conserva el espíritu alegre y fresco de la marca, pero optimizada para entornos digitales, priorizando tanto la estética como la funcionalidad.
sistema visual.
Para el diseño web de Bambolé, se desarrolló un sistema visual basado en la forma del palito de helado, reinterpretada como módulo gráfico. Esta forma se utilizó estratégicamente para:
- Enmarcar títulos y bloques de contenido.
- Crear contenedores y secciones con identidad propia.
- Aportar fluidez visual y reforzar el concepto de movimiento lúdico de la marca.
Este recurso no solo suma personalidad, sino que también conecta visual y conceptualmente con el producto, generando una experiencia coherente y memorable.
módulos.
Para el diseño web de Bambolé, se desarrolló un sistema visual basado en la forma del palito de helado, reinterpretada como módulo gráfico. Esta forma se utilizó estratégicamente para:
- Enmarcar títulos y bloques de contenido.
- Crear contenedores y secciones con identidad propia.
- Aportar fluidez visual y reforzar el concepto de movimiento lúdico de la marca.
Este recurso no solo suma personalidad, sino que también conecta visual y conceptualmente con el producto, generando una experiencia coherente y memorable.
botones.
títulos..
secciones.
- Productos: Exclusivos, Palitos y Tarrinas.
Accesible desde botón o scroll.
Visuales grandes de los sabores, información clara. - Puntos de Venta.
Accesible desde botón o scroll.
Información sobre las tiendas propias y puntos de venta. - Nosotros
Accesible desde botón o scroll.
Contenido sobre el origen, sus creadores, valores de la marca, enfoque artesanal y vegano.
- Faqs.
Accesible desde scroll.
Ayuda al usuario a resolver dudas frecuentes sobre los ingredientes, intolerancias, puntos de venta, etc. - Newsletter.
Accesible desde botón o scroll.
Formulario para acceder a novedades de la marca. - Contacto.
Accesible desde botón.
Formulario para contactar con la marca. - Footer/Redes sociales.
Enlace a redes sociales, datos legales, contacto extra.
cards.
Botones con estilo minimalista, bordeados y tipografía simple.
Comportamiento visual sutil en hover (inversión de color) para no desentonar con el estilo general.
«Ver más» como CTA principal, coherente en cada sección para invitar a la exploración.
Estructuras repetidas que aportan familiaridad y facilitan la navegación.
La interfaz se diseñó con curvas suaves y espacios amplios para transmitir ligereza. Los colores se aplicaron en contraste con fondos más suaves para mejorar la legibilidad. La tipografía principal, Old Standard TT, fue elegida por su estilo cálido y artesanal, alineado con la identidad.
prototipo.
flujo de usuario.
Tarea: Buscar información sobre sabores de helados en palito.
El prototipo fue diseñado para facilitar una navegación simple e intuitiva, priorizando la presentación de la marca y su propuesta. Se planteó una estructura lineal con scroll vertical, acompañada de llamadas a la acción claras y elementos visuales que invitan a interactuar.
testing y ajustes.
sección de contacto.
Durante el proceso de prototipado y testeo, se detectó la necesidad de ofrecer un canal más directo (solo se había planteado una newsletter) para que los usuarios pudieran realizar consultas o establecer comunicación con la marca.
Se incorporó una sección de contacto independiente, con un formulario accesible, simple y coherente con el diseño general.
botones.
Se ajustó el contraste de colores y el tamaño en ciertos componentes para asegurar legibilidad.
sección newsletter.
Se agregó la Newsletter al menú (solo estaba en la home) para mejorar el flujo de navegación.
Gracias a este testeo anticipado, fue posible perfeccionar la experiencia del usuario y validar decisiones de diseño antes de la etapa de desarrollo.
desarrollo.
responsive.
El desarrollo se realizó desde cero utilizando HTML, CSS y Bootstrap, con enfoque en una maquetación semántica, accesible y optimizada para todos los dispositivos.
El diseño fue completamente responsive, utilizando (además de bootstrap) media queries para adaptar el contenido a móviles, tablets y escritorio. Se cuidaron detalles como la jerarquía visual, espaciado, y legibilidad en cada breakpoint.
desktop.
tablet.
mobile.
