Разработка иллюстраций для сайта
Иллюстрации — не украшение, а функциональный элемент коммуникации. Они работают там, где фотография невозможна (абстрактные концепции, процессы, данные), и там, где нужен стиль, выбивающийся из стокового однообразия. Разрабатывать иллюстрации имеет смысл, когда сайт должен выделяться и иметь узнаваемый характер.
Когда иллюстрации нужны, а когда нет
Нужны:
- Hero-секция продукта, где фотографии нет или она не передаёт абстракцию
- Empty states, 404, onboarding — для снижения тревожности пользователя
- Explainer-секции с процессами (шаги, схемы, how it works)
- Маркетинговые страницы с нестандартным позиционированием
Не нужны (лучше альтернативы):
- Вместо реальных фото продукта или команды — иллюстрация снижает доверие
- Когда сайт требует максимальной нейтральности (юридические, финансовые услуги строгого B2B)
- Если бюджет не позволяет кастомные иллюстрации, а стоковые явно стоковые — лучше обойтись без них
Стили иллюстраций
Выбор стиля определяется позиционированием бренда:
Flat / Geometric — плоские формы, ограниченная палитра, без теней. Хорошо для tech-продуктов, SaaS. Примеры: ранний Dropbox, Notion. Плюсы: легко поддерживать консистентность, SVG-вес минимален.
Outline / Line Art — контурные иллюстрации, часто monochrome или с минимальной заливкой. Elegantно, нейтрально, хорошо масштабируется. Популярен для B2B-сервисов.
Isometric — трёхмерный вид под 30°, популярен для технических концепций (серверы, схемы, инфраструктура). Сложнее в разработке, требует строгого соблюдения угла.
Character illustration — персонажи, люди, сцены. Самый эмоциональный вариант. Сложность: нужно избегать культурной специфики, следить за инклюзивностью.
Abstract / Generative — органические формы, gradients, texture. Популярно в финтехе и брендах, которые хотят выглядеть «современно» (Stripe, Linear). Легко реализуется в SVG с gradient и blur.
Процесс разработки
1. Определение набора иллюстраций Инвентаризация: где на сайте нужны иллюстрации, какого размера, в каком контексте. Типичный набор для маркетингового сайта: hero (1 крупная), features (4–6 небольших, иконко-стиль), empty states (3–6), 404, onboarding (3–5 шагов).
2. Style tile / Moodboard Два-три направления стилей с референсами. Клиент выбирает направление до начала рисования.
3. Sketch → векторизация Черновик (carrot sketches) → согласование → финальный вектор в Illustrator или Figma. Для character illustrations — дополнительный этап согласования персонажа.
4. Создание системы Все иллюстрации в одном стиле — значит единая палитра (4–6 цветов), единый stroke weight (если line art), единый угол теней (если есть). Иллюстрации — не отдельные произведения, а элементы одного языка.
Технические требования для веба
Иллюстрации для веба экспортируются в SVG (для иконок и небольших иллюстраций) или WebP (для сложных с текстурами и большим количеством элементов).
SVG-оптимизация иллюстраций:
- SVGO с настройкой
cleanupIds,removeComments,mergePaths - Сложные иллюстрации с 500+ путями — иногда PNG/WebP дешевле по весу
- Анимированные иллюстрации: CSS-анимация для SVG или Lottie JSON (экспорт из After Effects через Bodymovin)
Lottie для анимированных иллюстраций:
Lottie — JSON-формат анимации, работающий через lottie-web или React-обёртку @lottiefiles/react-lottie-player. Вес анимации: 10–200 KB в зависимости от сложности. Значительно легче GIF и видео. Используется для hero-анимаций, empty states, success-screens.
Инклюзивность и нейтральность
Если иллюстрации содержат людей:
- Разнообразие по цвету кожи, телосложению, возрасту
- Нейтральные имена в UI-иллюстрациях (не «Иван» и «Мария»)
- Избегать культурно-специфических жестов
- Не привязывать роли к внешности (все врачи в белых халатах = мужчины — антипаттерн)
Сроки
| Этап | Время |
|---|---|
| Moodboard и утверждение стиля | 2–3 дня |
| Разработка 1 hero-иллюстрации | 3–5 дней |
| Набор feature-иконок (6–8 шт.) | 3–5 дней |
| Empty states + 404 (4–6 иллюстраций) | 3–5 дней |
| Оптимизация и экспорт ассетов | 1 день |
Полный набор иллюстраций для маркетингового сайта: 2–4 недели в зависимости от стиля и количества.