Стоковые PNG-картинки тяжелые и не передают ценности продукта. Они увеличивают LCP и не масштабируются на retina. Решение — кастомные иллюстрации в SVG или Lottie, оптимизированные под Core Web Vitals. Мы занимаемся разработкой иллюстраций для сайта: от референсов до экспорта в SVG, WebP или Lottie. Наш опыт — более 5 лет в создании векторной графики для веба, десятки проектов для SaaS, финтеха, edtech. Мы гарантируем единый стиль и соответствие бренду.
Кастомные иллюстрации оправданы, если сайт должен выделяться и иметь узнаваемый характер. Для проектов с жёсткими сроками (1–2 недели) и малым бюджетом стоковые фото или иконки могут быть временным решением. Но для долгосрочного имиджа лучше инвестировать в уникальную графику. Инвестиции в иллюстрации окупаются за счет повышения конверсии и узнаваемости бренда. Оценим ваш проект — пишите, мы предложим сроки от 2 до 4 недель в зависимости от объёма.
Зачем сайту кастомные иллюстрации?
Кастомные иллюстрации решают задачи, которые не под силу фотографии: показать абстрактную концепцию (например, «облачные вычисления»), смягчить пустые состояния (empty states, 404), провести пользователя по шагам онбординга. Они повышают запоминаемость бренда и улучшают пользовательский опыт. В отличие от стоковых изображений, кастомные иллюстрации точно отражают ценность продукта и не вызывают ассоциаций с конкурентами. Бюджет на иллюстрации — это инвестиция в бренд, которая приносит отдачу в виде роста конверсии.
Иллюстрации особенно эффективны в hero-секциях, empty states, explainer-секциях и онбординге. Однако на страницах с реальными фото продуктов или команды иллюстрации могут снизить доверие. Для юридических и финансовых услуг строгого B2B лучше придерживаться нейтрального фотоконтента. Если бюджет не позволяет кастомные иллюстрации, лучше обойтись без них, чем использовать явно стоковые.
Стили иллюстраций
Выбор стиля определяется позиционированием бренда. Сравнение популярных стилей:
| Стиль | Характеристики | Вес (SVG) | Типичное применение |
|---|---|---|---|
| Flat / Geometric | Плоские формы, ограниченная палитра, без теней | 2–15 KB | SaaS, tech-продукты |
| Outline / Line Art | Контурные, monochrome или минимальная заливка | 3–20 KB | B2B, корпоративные сервисы |
| Isometric | Трёхмерный вид под 30°, строгие углы | 10–50 KB | Технические концепции, инфраструктура |
| Character | Персонажи, люди, сцены | 15–80 KB | Маркетинговые страницы, эмоциональный брендинг |
| Abstract / Generative | Органические формы, gradients, texture | 5–30 KB | Финтех, современные бренды (Stripe, Linear) |
Flat — лёгкий и быстро загружаемый, популярен для MVP. Outline — нейтрален и хорошо масштабируется. Character — самый эмоциональный, требует инклюзивности (разнообразие, нейтральные имена, отсутствие культурных стереотипов). Abstract — трендовый, но может быстро устареть.
Процесс разработки
- Определение набора иллюстраций. Инвентаризация: где на сайте нужны иллюстрации, какого размера, в каком контексте. Типичный набор: hero (1 крупная), features (4–6 небольших, иконко-стиль), empty states (3–6), 404, onboarding (3–5 шагов).
- Style tile / Moodboard. Два-три направления стилей с референсами. Клиент выбирает до начала рисования.
- Sketch → векторизация. Черновик → согласование → финальный вектор в Illustrator или Figma. Для character — дополнительный этап согласования персонажа.
- Создание системы. Единая палитра (4–6 цветов), единый stroke weight (если line art), единый угол теней. Иллюстрации — часть одного языка.
Как оптимизировать иллюстрации для скорости загрузки?
Иллюстрации экспортируются в SVG (для иконок и небольших) или WebP (для сложных с текстурами). SVG-оптимизация:
- SVGO documentation рекомендует настройки
cleanupIds,removeComments,mergePaths. - Сложные иллюстрации с 500+ путями — иногда PNG/WebP дешевле по весу.
- Анимированные: CSS-анимация для SVG или Lottie JSON (экспорт из After Effects через Bodymovin).
Подробнее об оптимизации SVG
Перед экспортом удалите неиспользуемые слои, объедините пути с похожими параметрами, используйте <symbol> для повторяющихся элементов. После экспорта запустите SVGO с параметрами --multipass и --config. Итоговый вес даже сложной иллюстрации редко превышает 30 KB.
Lottie для анимированных иллюстраций: Lottie — JSON-формат анимации, работающий через lottie-web или React-обёртку @lottiefiles/react-lottie-player. Вес анимации: 10–200 KB. Значительно легче GIF и видео. Используется для hero-анимаций, empty states, success-экранов.
Что входит в работу
- Референсы и moodboard (2–3 направления)
- Исходники в Figma / Illustrator
- Экспорт в SVG, WebP, Lottie (по необходимости)
- Документация по использованию (цвета, правила комбинирования)
- Доступы к файлам и 1 месяц поддержки по правкам
Сроки
| Этап | Время |
|---|---|
| Moodboard и утверждение стиля | 2–3 дня |
| Разработка 1 hero-иллюстрации | 3–5 дней |
| Набор feature-иконок (6–8 шт.) | 3–5 дней |
| Empty states + 404 (4–6 иллюстраций) | 3–5 дней |
| Оптимизация и экспорт ассетов | 1 день |
Полный набор иллюстраций для маркетингового сайта: 2–4 недели в зависимости от стиля и количества.
Свяжитесь с нами для оценки вашего проекта. Получите консультацию по стилям иллюстраций. Мы гарантируем единый стиль и соблюдение технических требований.