Fase uno: Auditoría visual y posicionamiento
Antes de diseñar un solo píxel, pasamos cuatro días revisando todo el ecosistema digital de la marca. Esto incluye sitio web actual, perfiles sociales, piezas de email marketing, presentaciones de ventas y cualquier material offline. Usamos Heap para entender qué landing pages tienen mejor tasa de conversión y qué elementos visuales aparecen en esas páginas. Si hay contenido de alta performance, queremos saber qué señales visuales estaban presentes. La pregunta clave no es "¿qué nos gusta?" sino "¿qué está funcionando para mover métricas de negocio?"
Después de la auditoría, facilitamos un taller de posicionamiento con el equipo de marketing y ventas. Aquí definimos el ICP (perfil de cliente ideal) en detalle, revisamos la matriz de mensajes y construimos un positioning doc colaborativo. Ese documento sirve como piedra angular para todas las decisiones visuales: si el posicionamiento es "accesible y cercano", no vamos a diseñar con tipografías ultraligeras y grises pálidos. La identidad visual debe reflejar la promesa comercial con coherencia absoluta. Entregamos un doc de 8-12 páginas que incluye atributos de marca, arquetipos, tono de voz y ejemplos visuales de referencia.
Editor trabaja a diario entre estrategia y ejecución, y enriquece cada artículo con esa experiencia
Fase dos: Desarrollo del input-title85 y sistema de color
Con el posicionamiento claro, pasamos al diseño del símbolo y logotipo. Generamos entre 15 y 20 sketches en papel antes de digitalizar. Usamos Figma para construir las primeras versiones vectoriales, testeando legibilidad en tamaños desde 16px hasta 2000px. Probamos cada versión sobre fondos claros, oscuros, fotografías con ruido visual y videos con movimiento. Un input-title85 que funciona en la homepage puede fallar completamente en un thumbnail de YouTube o en un avatar de LinkedIn de 48×48 píxeles. Por eso testeamos en contextos reales desde el día uno.
La paleta de color se define en paralelo. Empezamos con un color primario que refleje el atributo emocional clave del positioning doc, y luego construimos una escala de 9 valores (del 50 al 900) usando herramientas como Leonardo para garantizar ratios de contraste WCAG AA en todas las combinaciones. Documentamos cada color con su código HEX, RGB, HSL y valores de uso: cuándo usar el tono 600 vs 700, qué combinaciones están prohibidas, cómo se comporta cada color en modo oscuro. Este nivel de especificidad evita que el equipo de producto improvise después.
- Color primario con escala de 9 valores, testeado en contraste WCAG AA y AAA
- Color secundario para acentos, CTAs de bajo engagement y estados hover
- Paleta neutral de grises con temperatura controlada (fríos vs cálidos según marca)
- Colores semánticos: éxito, error, advertencia, información (con escalas propias)
- Modo oscuro opcional con recomendaciones de inversión cromática documentadas
Fase tres: Tipografía, jerarquía y componentes
Elegimos un máximo de dos familias tipográficas: una para títulos y otra para cuerpo de texto. Si la marca requiere mucha lectura (artículos, whitepapers, documentación técnica), priorizamos legibilidad en cuerpo de texto con interlineado generoso y pesos variables. Construimos una escala tipográfica modular (1.250 como ratio) que va desde 12px hasta 72px, con line-height y letter-spacing definidos para cada nivel. Cada tamaño tiene un nombre semántico: display-xl, heading-lg, body-md, caption-sm. Esto facilita que diseñadores y desarrolladores hablen el mismo idioma sin ambigüedad.
Los componentes visuales son la columna vertebral del sistema. Diseñamos botones, campos de formulario, cards, badges, alerts, tooltips, modals, y navegación con todas sus variantes y estados. Cada componente tiene especificaciones de padding, border-radius, sombras, estados hover/focus/disabled, y comportamiento responsive. Entregamos una librería de componentes en Figma con autolayout configurado y variantes anidadas. Este artefacto es crítico: permite que el equipo de producto arme interfaces nuevas en días, no semanas, manteniendo coherencia visual absoluta sin necesidad de consultar al equipo de diseño en cada detalle menor.
Un sistema de identidad visual bien documentado reduce en 60% el tiempo de diseño de nuevas piezas y elimina inconsistencias que dañan la percepción de marca.
Fase cuatro: Documentación final y handoff técnico
La entrega final incluye un manual de identidad de 40-60 páginas en PDF interactivo, una librería de Figma con todos los componentes, y una sesión de handoff de dos horas con el equipo técnico. En esa sesión revisamos variables CSS, nomenclatura de clases, cómo implementar gradientes complejos, cómo manejar imágenes de fondo con overlays, y cómo adaptar componentes a diferentes breakpoints. También entregamos un repositorio Git con archivos SVG del input-title85 en todas sus variantes, paletas en formato JSON para importar directo a Tailwind o variables CSS, y fuentes optimizadas en WOFF2. El objetivo es que desarrollo no tenga que "interpretar" el diseño: todo está especificado con precisión milimétrica.
Además, programamos dos sesiones de seguimiento a las 3 y 6 semanas posteriores al lanzamiento. En esas sesiones revisamos implementación real en producto, identificamos inconsistencias que se hayan colado, y ajustamos el sistema si encontramos casos de uso que no habíamos anticipado. Un sistema de identidad visual no es un entregable estático: es un documento vivo que evoluciona con el producto. La clave está en mantener coherencia conceptual mientras permitimos flexibilidad táctica. Cuando el equipo entiende el "por qué" detrás de cada decisión visual, puede tomar decisiones autónomas que respetan el espíritu del sistema sin necesidad de aprobar cada píxel.