Transformar un wireframe en una marca con personalidad propia es uno de los pasos más decisivos en el diseño de un producto digital. A partir de la exploración de colores, tipografías y un logotipo memorable, se construye esa identidad visual que diferencia a un proyecto de todos los demás. Aquí se recorre paso a paso cómo se definió la marca Batabit, desde la primera paleta de color hasta la guía de estilo final.
¿Cómo elegir los colores adecuados para tu marca?
Antes de tocar un solo píxel del logotipo, es fundamental tener a la mano todo el trabajo previo: el benchmark, la narrativa y el wireframe. Con esa base sólida, se crea una página nueva en Figma llamada Branding [01:00], donde se reúnen las referencias visuales del producto existente y las primeras exploraciones de color.
El punto de partida fue la página de Material Design, específicamente la sección de material colors [01:17]. De allí se extrajo un amarillo particular con la capacidad de inclinarse hacia el naranja, evocando la referencia del bitcoin, pero manteniendo propiedades del amarillo puro que recuerdan a una papa frita. Los colores elegidos siguen una lógica de teoría del color:
- Color complementario: un azul destinado a funcionar como call to action principal.
- Colores análogos: tonos cercanos al amarillo para ampliar las posibilidades de exploración.
Esta paleta inicial no es una definición completa, sino un marco de referencia sobre el que se itera.
¿Qué proceso seguir para diseñar un logotipo memorable?
El proceso de ideación del logotipo comenzó escribiendo la palabra que se quería representar y buscando elementos tipográficos interesantes [01:55]. La letra B resultó especialmente atractiva: sus dos mitades podían interpretarse como dos pedacitos de papa que se complementan para formar un solo espacio.
¿Qué tipografía funciona mejor para una marca digital?
Se probaron múltiples tipografías de uso libre. La ganadora fue DM Sans, disponible en la biblioteca de Google Fonts [02:15]. Esta fuente ofrece limpieza y legibilidad, dos cualidades esenciales para interfaces digitales.
¿Cómo iterar con el cliente hasta encontrar la versión correcta?
Con la B construida sobre una grilla flexible [02:37], se exploraron distintos grosores de trazo, variaciones de color y hasta versiones abstractas como emojis o referencias a Pac-Man. El objetivo era integrar el concepto de la papa dentro del símbolo.
La primera propuesta presentada al cliente combinaba la B estilizada con la referencia a la papa y las tipografías seleccionadas [03:15]. Sin embargo, el feedback fue claro: no se sentía como una papa. La solución fue directa: más papas. Se presentaron dos opciones adicionales, una con papas a la francesa y otra con papas en casquitos [03:36]. Al cliente le gustó especialmente la papa ubicada en la esquina inferior derecha, y esa fue la versión que se convirtió en el logotipo definitivo de Batabit [03:52].
¿Qué elementos debe incluir una guía de estilo rápida?
Con el logotipo aprobado, se creó una guía de estilo compacta pero funcional [04:00]. Los componentes principales son:
- Color de fondo: un tono oscuro que no es negro puro.
- Color blanco y valores intermedios: para jerarquizar textos.
- Tipografía principal: DM Sans.
- Call to action: blanco sobre fondo oscuro.
Un detalle sutil pero poderoso: los textos secundarios no son cien por ciento blancos, sino que llevan un ligero valor naranja [04:22]. Esto los hace lucir levemente más opacos frente al ojo sin perder importancia respecto al texto general, creando una jerarquía visual elegante.
Es importante recordar que un proceso de branding profesional completo requiere mucho más tiempo y pasos adicionales. Sin embargo, para un MVP de una startup que necesita lanzar un producto rápidamente, esta definición es suficiente [04:42]. El resultado es una marca con personalidad clara, un ícono fácil de reconocer, una paleta de colores coherente y una tipografía que se integra con toda la estructura visual.
Con la identidad de marca resuelta, el siguiente paso es pasar a la definición de la experiencia y comprender por qué es tan importante diseñar mobile first, comenzando por las grillas. ¿Qué parte del proceso de branding te parece más desafiante? Comparte tu experiencia.
