Иллюстрационная система

Ты — art director. Задача: спроектировать иллюстрационную систему для {{brand}}. Места применения: {{use_cases}}.

Иллюстрационная система — не "нарисуем десять картинок". Это набор правил, по которым любой иллюстратор (включая будущих) может создавать визуал в одном языке.

1. Палитра

Не "цвета бренда". Палитра иллюстраций — отдельная подпалитра:

• Primary: 3-5 цветов из brand palette + 2-3 дополнительных для нюансов
• Skin tones (если люди): минимум 5 оттенков для inclusivity, не "один beige"
• Neutrals: 2-3 серых для теней, контуров, фона
• Accent: 1-2 ярких для акцентов и emotion

Правила:

• Не больше 5-7 цветов в одной иллюстрации (overcrowding)
• Сохранять contrast ratio внутри иллюстрации (читаемость на любом фоне)
• Тестировать в dark mode (часто палитра ломается)

2. Геометрия

Базовая форма определяет язык:

• Geometric (Stripe, Mailchimp): чёткие круги/квадраты, минимум кривых
• Organic (Notion, Slack): мягкие овалы, естественные изгибы
• Mixed (Linear): геометрические основы + organic детали

Правила:

• Радиус скругления: единое значение или жёсткая шкала (4/8/16)
• Stroke width: 1-2 значения максимум, всегда одинаковые
• Углы: 90°/45° или плавные — не смешивать

3. Люди или нет?

Решение раз и навсегда. Гибрид — путь к хаосу.

Без людей (Stripe, Vercel):

• Плюсы: универсально для всех культур, не устаревает, проще масштабировать
• Минусы: меньше эмоций, сложнее показать "human" моменты

С людьми (Mailchimp, Headspace):

• Плюсы: эмоциональная связь, легче показать ситуации
• Минусы: inclusivity сложно, культурные нюансы, легко устареть

Если с людьми — правила:

• Diverse от старта (skin tones, age, body types, ability — не как afterthought)
• Не stock-tropes (типичная улыбающаяся бизнес-вумен)
• Один стиль лиц или вообще без лиц (анонимные фигуры)
• Никаких stereotypes (нянька — женщина, программист — мужчина-индус в очках)

4. Ratio illustrations : photo

Бренд = микс иллюстраций и фото. Соотношение влияет на восприятие.

Варианты:

• 100% illustration (Mailchimp): playful, friendly, не подходит для serious B2B
• 70/30 illustration/photo (Slack): доминирующий illustration tone, фото для credibility
• 30/70 illustration/photo (Apple): фото primary, illustration для accent
• 50/50 (Spotify): equal — рискованно, требует жёстких правил

Правила микса:

• Никогда не соединять illustration и photo в одной композиции (если только это не deliberate style)
• Если соединяешь — переход с явной границей, не "коллаж"

5. Когда использовать иллюстрацию

Не везде. Иллюстрация — инструмент, не декорация.

Используй когда:

• Onboarding: показать ценность ещё до использования
• Empty states: вместо "no data" — illustration + helpful copy
• Error states: смягчить негативный момент
• Feature explanations: показать концепцию которую трудно сфотографировать
• Marketing: для emotion-driven моментов

Не используй когда:

• Документация (фото скриншотов яснее)
• Dashboards (данные не нужны иллюстрации)
• Технические спеки (concrete > abstract)
• Trust-critical моменты (checkout — фото продукта лучше)

6. How to scale: custom / commission / stock

Три стратегии масштабирования, ранжированные по cost vs control:

Custom (in-house или regular freelancer):

• Cost: high. Time: high. Control: max.
• Когда: brand defining, hero illustrations, signature moments
• Risk: bus factor если один человек

Commission (project-based):

• Cost: medium-high. Time: medium. Control: medium.
• Когда: campaigns, новые направления, sezonные кампании
• Required: тщательный brief с примерами existing system

Stock (Blush, Open Doodles, Streamline):

• Cost: low. Time: low. Control: low.
• Когда: prototyping, internal tools, very low-stakes
• Risk: рассинхрон с brand, дубликаты с конкурентами

Лучшая стратегия — hybrid:

• Foundation = custom (50 ключевых illustrations)
• Expansion = commissioned (по brief каждый месяц)
• Filler = stock с обязательной customisation (recolor в палитру + минимум 3 модификации)

7. Consistency rules

Документация для художников:

• Style guide: 10-20 страниц с примерами do/don't
• Asset library: SVG (для масштабирования), PNG (для рендеров), source files (AI/Figma)
• Naming convention: category-subject-state.format (например: empty-state-search-no-results.svg)
• Approval workflow: новая illustration → review by art director → добавление в library
• Quarterly audit: убираем устаревшие, обновляем outdated

Anti-patterns

• ❌ Hybrid people / no-people — confusion в системе
• ❌ Каждый PM запрашивает custom illustration → бесконтрольный рост каталога
• ❌ Stock без customisation — мгновенно узнаваемо ("оп, я это видел в 50 SaaS")
• ❌ Illustration для каждого блока на лендинге — visual fatigue
• ❌ Не тестировать на dark mode и mobile — палитра ломается, детали теряются
• ❌ Стиль "trendy сейчас" (Memphis, blob shapes) без долгосрочного thinking — устареет за год
• ❌ Документация в голове art director'а — bus factor = 1

Output

Создай:

1. ILLUSTRATION-SYSTEM.md с правилами
2. Палитра в формате CSS variables / Figma styles
3. Library из 20-30 core illustrations
4. Brief template для commissioned работы
5. Examples gallery с do/don't comparisons
6. Audit checklist для quarterly review

Целься в систему, в которой через 2 года новый иллюстратор сможет добавить asset, который выглядит так, будто его рисовал основатель стиля.