Traducción de la marca
De la identidad a los fundamentos de interfaz: paleta funcional, tipografía de producto, espaciado, radios, iconografía y movimiento.
Marca en el producto
Que la interfaz
se parezca a ti.
La identidad de la marca dentro del producto: color, tipografía, espacio, iconos y componentes que dejan de parecer de una librería y pasan a parecer tuyos.
Qué es
La librería es
el punto de partida, no el final.
La mayoría de productos digitales se construyen con componentes de librería y se quedan ahí: el mismo botón, la misma tabla, el mismo gris que otros mil productos. La marca aparece en el logo y desaparece en la primera pantalla.
Llevar la marca a la interfaz no es pintarla: es decidir cómo se traducen la identidad y el carácter de la marca a tokens, componentes y patrones, manteniendo la usabilidad y la accesibilidad. El resultado es un producto que se reconoce sin logo.
Qué hacemos
Así lo trabajamos.
En este orden, con el equipo dentro desde el primer día.
Componentes de marca
Los componentes del producto rediseñados con la marca dentro, con estados y accesibilidad (contraste, foco, tamaño) resueltos.
Patrones distintivos
Los dos o tres gestos que hacen reconocible al producto: cómo confirma, cómo espera, cómo celebra.
Aplicación
Los componentes en el sistema de diseño y en el código, con la migración planificada pantalla a pantalla.
Te llevas
Lo que queda cuando terminamos.
El proyecto termina; el criterio se queda en tu equipo.
01 Tokens de marca
Fundamentos
La identidad como valores compartidos entre diseño y desarrollo.
02 Componentes con marca
Biblioteca
La librería del producto, reconocible y accesible, en Figma y en código.
03 Migración
Plan
Por dónde empezar y en qué orden, para que el cambio se note pronto sin parar el producto.
Cuándo tiene sentido
El momento adecuado.
Cuando el producto se ve genérico, cuando el rebranding ha llegado a la web pero no al producto, cuando hay varios productos que deberían parecer de la misma familia, o cuando un competidor con peor producto parece mejor porque se ve mejor.
Si no estás seguro de que sea tu caso, cuéntanoslo: la primera conversación sirve para dimensionar el problema real.
Hablemos de tu casoPreguntas frecuentes
Lo que suelen preguntarnos
sobre interfaz con marca.
¿Afecta a la accesibilidad?
Al contrario: la marca se aplica dentro de los límites de contraste, tamaño y foco. Si un color de marca no cumple, se define su versión funcional.
¿Hay que rehacer todo el producto?
No. Se cambian los tokens y los componentes, y el producto va cambiando conforme se usan. La migración se planifica por impacto.
¿Y si usamos una librería como Material o Ant?
Se puede partir de ella y personalizarla a fondo, o sustituir componentes clave. Decidimos según el equipo y el coste de mantenimiento.
