Розробка іллюстрацій для сайту
Іллюстрації — не прикрасу, а функціональний елемент комунікації. Вони працюють там, де фотографія неможлива (абстрактні концепції, процеси, дані), й там, де потрібен стиль, що виділяється зі стокового однообразу. Розробляти іллюстрації має сенс, коли сайт має виділятися й мати впізнаваний характер.
Коли іллюстрації потрібні, коли ні
Потрібні:
- Hero-секція продукту, де фото немає або не передає абстракцію
- Empty states, 404, onboarding — для зниження тривожності користувача
- Explainer-секції з процесами (кроки, схеми, how it works)
- Маркетингові сторінки з нестандартним позиціонуванням
Не потрібні (кращі альтернативи):
- Замість реальних фото продукту або команди — іллюстрація знижує довіру
- Коли сайт вимагає максимальної нейтральності (юридичні, фінансові послуги строгого B2B)
- Якщо бюджет не дозволяє кастомні іллюстрації, а стокові явно стокові — краще обійтися без них
Стилі іллюстрацій
Вибір стилю визначається позиціонуванням бренду:
Flat / Geometric — плоські форми, обмежена палітра, без теней. Хорошо для tech-продуктів, SaaS. Приклади: ранній Dropbox, Notion. Плюси: легко утримувати консистентність, SVG-вага мінімальна.
Outline / Line Art — контурні іллюстрації, часто monochrome або з мінімальною заливкою. Елегантно, нейтрально, добре масштабується. Популярно для 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 → Векторизація Чорновик → затвердження → фінальний вектор у 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 тижні залежно від стилю й кількості.