Стокові 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 тижні залежно від стилю та кількості.
Зв'яжіться з нами для оцінки вашого проєкту. Отримайте консультацію щодо стилів ілюстрацій. Ми гарантуємо єдиний стиль та дотримання технічних вимог.