Diseña el sistema de ilustración y gráficos personalizados que da a la marca una identidad visual única y coherente en todos los canales. Con el proceso de definición del estilo ilustrativo, las variables del sistema (colores, formas, personajes, iconografía), las guías de uso y cómo mantener la coherencia con múltiples diseñadores.
Cuándo usarlo: Sistema ilustración marca, brand illustration, identidad visual, diseño sin stock photos, ilustración B2B
Herramienta recomendada: Claude
Eres un Brand Illustrator y Design System Lead con experiencia construyendo sistemas de ilustración personalizados para marcas B2B y B2C donde el estilo ilustrativo propio ha diferenciado la marca de la competencia y ha eliminado la dependencia de bancos de imágenes genéricas que cualquier competidor puede usar. Contexto: - Tipo de marca: [startup B2B / consumer brand / agencia / producto digital / empresa de servicios] - Estado actual: [usamos stock photos / tenemos algunas ilustraciones pero sin sistema / queremos rediseñar el estilo / empezando desde cero] - Canales principales: [web / app / redes sociales / presentaciones / materiales impresos / todos] - Recursos: [diseñador interno / varios diseñadores / agencia externa / freelancers] ## Sistema de Ilustración para Marca — [Empresa] ### 🎨 Por qué las ilustraciones propias superan al stock **El problema del stock photo:** ``` ❌ Cualquier competidor puede usar la misma imagen ❌ El banco de imágenes define la estética — no tú ❌ Las personas del stock no parecen reales (poses artificiales, diversidad de catálogo) ❌ Inconsistencia: mezclar imágenes de diferentes fotógrafos rompe la coherencia visual ❌ Los modelos tienen contratos que expiran — una imagen que llevas años usando puede volverse inaccesible o aparecer en una campaña de la competencia ✅ Las ilustraciones propias: → Son 100% de la marca — nadie puede copiarlas → Reflejan exactamente los valores y el tono de la marca → Escalan a todos los formatos y usos sin restricciones de licencia → Se adaptan a nuevas necesidades del negocio (nuevos personajes, nuevas escenas) → Se convierten en activo de la marca con el tiempo (reconocibilidad) ``` ### 📐 El proceso de definición del estilo ilustrativo **Paso 1 — El moodboard de estilo (antes de dibujar una línea):** ``` REÚNE REFERENCIAS en 3 categorías: 1. ESTILO QUE TE GUSTA (aunque no sea tuyo ni de tu sector): → Illustraciones de apps, marcas, artistas que admiras → ¿Qué tienen en común las que más te gustan? → Herramientas: Behance, Dribbble, Pinterest, Are.na 2. ESTILO DE TU SECTOR (para saber de qué diferenciarte): → Las ilustraciones que usa tu competencia → El estilo que todos en tu sector usan (el que deberías evitar para diferenciarte) 3. EL ESPACIO EN BLANCO (el estilo que nadie usa en tu sector): → Ahí está tu oportunidad de diferenciación visual ANÁLISIS DEL MOODBOARD — Las 5 variables a definir: □ Trazo: ¿con contorno marcado o sin contorno (flat)? □ Forma: ¿geométrica y angular / orgánica y redondeada / realista? □ Color: ¿paleta limitada (2-4 colores) o rica? □ Detalle: ¿minimalista / ilustración media / muy detallada? □ Tono: ¿serio y técnico / amigable y cercano / juguetón? ``` **Paso 2 — Las variables del sistema de ilustración:** ``` VARIABLE 1 — LA PALETA DE COLOR DEL SISTEMA: → Color primario de la marca como color dominante en ilustraciones → 2-3 colores de acento para elementos secundarios → Neutrales (cremas, grises claros) para fondos y espacios negativos → REGLA: menos colores = más coherencia. Mailchimp usa 3. Notion usa 2. VARIABLE 2 — LA FORMA BASE (el lenguaje formal): Define si tu marca usa: → GEOMETRÍA PURA: círculos, rectángulos, triángulos. Sensación: técnica, moderna, ordenada. → FORMAS ORGÁNICAS: curvas irregulares, formas naturales. Sensación: humana, cálida, creativa. → HÍBRIDO: estructura geométrica con detalles orgánicos. El más versátil para marcas B2B. VARIABLE 3 — EL GROSOR DE LÍNEA (si usas contornos): → Define un grosor estándar: 2px / 3px / 4px según el tamaño habitual de uso → Grosor consistente = coherencia visual automática → Puedes usar 2 grosores: línea principal + detalles VARIABLE 4 — LOS PERSONAJES (si la marca usa personas ilustradas): Define: → Proporciones: ¿cuerpos realistas / estilizados / chibi/cabezón? → Diversidad representada: géneros, edades, etnias que refleja la marca → Expresividad: ¿caras con expresiones detalladas o simplificadas? → El glosario de poses: las 10-15 poses base que se usarán (de pie, sentado, trabajando, etc.) VARIABLE 5 — LA ICONOGRAFÍA (los iconos del sistema): → Mismo lenguaje formal que las ilustraciones (no mezcles iconos geométricos con ilustraciones orgánicas) → Grid de construcción consistente (24x24px o 32x32px) → Grosor de trazo idéntico al de las ilustraciones ``` **Paso 3 — Las ilustraciones fundacionales del sistema:** ``` LAS ILUSTRACIONES QUE DEBES CREAR PRIMERO (antes de casos especiales): HERO ILLUSTRATIONS (3-5): → Las ilustraciones principales de la web: home, about, 404, pricing → Son las más complejas y las que definen el estilo del sistema SPOT ILLUSTRATIONS (10-20): → Ilustraciones pequeñas para features, bullets, secciones de la web → Más simples que las hero — funcionan como iconos ilustrados → Las más usadas en el día a día del equipo ESCENAS PARA CASOS DE USO (5-10): → Ilustraciones que muestran el producto en uso o los beneficios → Pueden reutilizar los personajes y elementos del sistema ICONOS DEL SISTEMA (20-50): → Los iconos de la interfaz y de los materiales de marketing → Siguiendo el mismo lenguaje formal del sistema ``` **Paso 4 — La documentación del sistema (para que otros diseñadores lo usen correctamente):** ``` QUÉ DEBE INCLUIR LA GUÍA DEL SISTEMA DE ILUSTRACIÓN: □ Los principios del estilo (3-5 frases que definen el "porqué" del estilo) □ La paleta de colores con códigos hex/RGB/Pantone □ Los ejemplos de USO CORRECTO y USO INCORRECTO de cada elemento □ La librería de elementos reutilizables (en Figma/Illustrator): → Personajes con sus variaciones (poses, expresiones, diversidad) → Elementos de entorno (muebles, objetos, iconos) → Fondos y texturas del sistema □ El proceso de creación de nuevas ilustraciones (para mantener coherencia) □ Las restricciones claras: lo que NUNCA se hace en el sistema HERRAMIENTA RECOMENDADA: Figma con una librería compartida del equipo → Todos los elementos como componentes reutilizables → Control de versiones integrado → Cualquier diseñador del equipo o freelancer externo puede acceder ``` ### 🔧 Cómo mantener la coherencia con múltiples diseñadores El proceso de onboarding de nuevos diseñadores (o freelancers externos) al sistema de ilustración, el flujo de revisión de nuevas ilustraciones antes de publicarlas, y cómo evolucionar el sistema cuando el negocio crece o cambia de dirección sin romper la coherencia acumulada.