Marca y diseño de producto: dónde se tocan y quién es dueño de qué
Marca y diseño de producto se solapan en el sistema de diseño, el tono y el microcopy. Aprende qué decide cada una y cómo evitar que se desalineen.
¿En qué se diferencian?
El diseño de marca trabaja la identidad: logo, personalidad, emociones y promesa. Busca crear una identidad visual y emocional unificada para una empresa o producto, y eso incluye el tono y la personalidad, no solo el logo.
El diseño de producto, en cambio, se pregunta si la interfaz permite completar la tarea. SumatoSoft lo resume con una diferencia de preguntas: UX se pregunta si algo es fácil y agradable de usar; el diseño de producto añade si debe construirse y si ayuda al negocio. Su formulación es breve: “UX design is a discipline; product design is a mandate.”
En la práctica, la marca responde “qué queremos transmitir” y el producto responde “cómo lo hace el usuario sin perderse”.
¿Dónde se tocan?
Hay tres zonas de contacto claras.
| Zona | Qué decide la marca | Qué decide el producto |
|---|---|---|
| Sistema visual | Paleta, tipografía, estilo de iconos e ilustración | Cómo se aplican en componentes, estados y densidad de información |
| Tono de voz | Personalidad y forma de hablar | Cómo suena un error, una confirmación o un estado vacío |
| Microcopy | Vocabulario recomendado | Qué palabra exacta ayuda a completar la tarea |
Un punto que suele pasarse por alto: los mensajes de error, las alertas y las instrucciones dentro del producto son decisiones de marca y de producto a la vez. Si los escribe solo marketing, suenan a folleto; si los escribe solo ingeniería, suenan a formulario de impuestos.
El sistema de diseño es el puente práctico. NN/g lo propone como “single source of truth” para los componentes, y en él conviven las decisiones visuales de marca con las reglas de uso del producto.
¿Por qué le importa a un diseñador de producto?
Porque el equipo de producto suele heredar una identidad sin contexto. Recibe una paleta y unas reglas de logo, pero no sabe qué hacer con un estado vacío, un error de pago o una pantalla sin datos, que no aparecen en el manual de marca.
Differ lo describe como un problema de alineación entre la web de marketing y el producto: se diseñaron en momentos distintos, por equipos distintos y con mandatos distintos, y ningún equipo era responsable de la transición. Distingue tres patrones de desalineación:
- Quiebre en el traspaso: al pasar de la web al producto cambian la escala tipográfica, el estilo de iconos y el radio de los botones; el microcopy cálido de marketing se vuelve seco y técnico; y una web limpia da paso a un panel denso.
- Brecha de voz: las guías de marca definen la voz en términos muy generales (“amigable pero profesional”), que no sirven para escribir cientos de mensajes de producto. El resultado es un microcopy genérico, correcto pero sin personalidad.
- Brecha de percepción de los inversionistas: en las SaaS tempranas, una web pulida con un producto crudo despierta dudas sobre cuál refleja el estándar real del equipo.
Su conclusión es que la alineación de marca no es un ejercicio de paleta de colores.
¿Cómo se alinean sin frenar al equipo?
Algunas prácticas que puedes aplicar sin esperar a un rediseño completo:
- Escribe las reglas de tono con ejemplos de producto, no solo con adjetivos. “Cercano y directo” no sirve; “Tu pago no se completó. Revisa el número de tarjeta” sí.
- Documenta los componentes en el sistema de diseño, incluidos sus estados, y enlázalos con las guías de marca.
- Haz una revisión de consistencia al año, como propone NN/g, con representantes de varios equipos de diseño. Revisa elementos visuales (símbolos, iconos, imágenes), la disposición de páginas y botones, y el tono del contenido.
- Asigna un responsable de la transición entre la web de marca y el producto. Si nadie lo es, cada equipo improvisa.
- Prueba las decisiones de marca en la interfaz real, no solo en el moodboard. Un color que funciona en un póster puede fallar como estado de error.
¿Cuándo NO conviene forzar la coincidencia?
No todo tiene que parecer igual. Una web de marketing puede ser expresiva y un producto de trabajo debe ser sobrio. Forzar la misma personalidad en un panel de administración puede volver más lento el trabajo de quien lo usa.
Conviene distinguir la consistencia interna (dentro del producto) de la externa (con las convenciones de la web y del sector). NN/g separa ambas: la primera mantiene al usuario seguro dentro de la app; la segunda evita que se sienta perdido frente a patrones que ya conoce. Ninguna de las dos exige que la app se parezca a la marca al cien por cien.
Ejemplo
Ejemplo ilustrativo: una empresa de servicios financieros tiene una web de marketing con un tono cálido y lleno de metáforas. Su app de banca, en cambio, usa mensajes de error técnicos del backend (“Error 422: transacción rechazada”). Un usuario que pasa de la web a la app siente que son dos empresas distintas. El equipo hace tres cosas: escribe una tabla de tono con ejemplos para errores y confirmaciones, documenta los estados de error en el sistema de diseño y acuerda que marketing revise el microcopy de los flujos críticos. El resultado no cambia la marca; cambia la forma en que la app habla cuando algo sale mal.
Errores comunes
- Creer que la marca termina en el logo y no cubre tono, microcopy ni estados.
- Dejar el microcopy de producto sin dueño, de modo que cada pantalla suena distinta.
- Copiar la landing page al producto sin adaptar densidad de información ni jerarquía.
- Hacer el manual de marca sin probarlo en pantallas reales de error, carga y vacío.
- Diseñar la identidad sin el equipo de producto, de modo que llega como un golpe ya cerrado.
Si quieres profundizar en la parte estratégica, estrategia y visión y cultura de diseño explican cómo se alinean equipos alrededor de un criterio común. Para la parte técnica, el sistema de diseño y la diferencia entre UX y UI ayudan a separar qué pertenece a cada capa. Y si quieres medir si la alineación funciona, las métricas de DesignOps son un buen punto de partida.