Разработка иллюстраций для сайта: стили, процесс, оптимизация

Стоковые 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 лучше придерживаться нейтрального фотоконтента. Если бюджет не позволяет кастомные иллюстрации, лучше обойтись без них, чем использовать явно стоковые.

Стили иллюстраций

Выбор стиля определяется позиционированием бренда. Сравнение популярных стилей:

Flat — лёгкий и быстро загружаемый, популярен для MVP. Outline — нейтрален и хорошо масштабируется. Character — самый эмоциональный, требует инклюзивности (разнообразие, нейтральные имена, отсутствие культурных стереотипов). Abstract — трендовый, но может быстро устареть.

Процесс разработки

1. Определение набора иллюстраций. Инвентаризация: где на сайте нужны иллюстрации, какого размера, в каком контексте. Типичный набор: hero (1 крупная), features (4–6 небольших, иконко-стиль), empty states (3–6), 404, onboarding (3–5 шагов).
2. Style tile / Moodboard. Два-три направления стилей с референсами. Клиент выбирает до начала рисования.
3. Sketch → векторизация. Черновик → согласование → финальный вектор в Illustrator или Figma. Для character — дополнительный этап согласования персонажа.
4. Создание системы. Единая палитра (4–6 цветов), единый stroke weight (если line art), единый угол теней. Иллюстрации — часть одного языка.

Как оптимизировать иллюстрации для скорости загрузки?

Иллюстрации экспортируются в SVG (для иконок и небольших) или WebP (для сложных с текстурами).

SVG-оптимизация:

• SVGO documentation рекомендует настройки 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-экранов.

Что входит в работу

• Референсы и moodboard (2–3 направления)
• Исходники в Figma / Illustrator
• Экспорт в SVG, WebP, Lottie (по необходимости)
• Документация по использованию (цвета, правила комбинирования)
• Доступы к файлам и 1 месяц поддержки по правкам

Сроки

Полный набор иллюстраций для маркетингового сайта: 2–4 недели в зависимости от стиля и количества.

Свяжитесь с нами для оценки вашего проекта. Получите консультацию по стилям иллюстраций. Мы гарантируем единый стиль и соблюдение технических требований.

Почему дизайн без токенов ломает код, и как мы это чиним

Мы перестраиваем процесс UX/UI так, чтобы дизайн и код не расходились. Наш опыт — 5 лет на рынке, 120+ реализованных проектов в вебе и мобильных приложениях. Работаем по договору с фиксированной гарантией сроков. Часто к нам приходят с макетами, которые разработчики получают за два дня до спринта: 80 фреймов, половина без мобильных состояний, кнопки не компоненты, цвета захардкожены hex-значениями. Вёрстка превращается в угадайку, а поддержка UI через три месяца требует полного рефакторинга. Дизайн, который работает в продакшене, строится на системе токенов и компонентов — и мы это внедряем с первого спринта.

Как Figma превращается в инженерный инструмент

Figma — не просто «место, где рисуют». Это среда, из которой разработчик получает точные значения без звонков дизайнеру. Мы используем Design Tokens — единые переменные для цветов, отступов, радиусов. Они экспортируются напрямую в CSS custom properties или Tailwind config. Например, color/primary/500, spacing/md, radius/button. Без токенов дизайн и код расходятся уже через месяц.

Auto layout — обязательное условие. Компоненты без авто-лейаута ломаются при изменении текста. Кнопка с фиксированной шириной, которая не растягивается под длинный лейбл — классическая ошибка, которую мы не допускаем. С variants в одном component set разработчик видит все состояния (hover, disabled, pressed) сразу, а не переспрашивает перед каждым блоком. Интерактивный прототип дешевле правок после разработки — мы кликаем сложные сценарии (multi-step, wizard, onboarding) до того, как писать код.

Что дают дизайн-системы и когда они избыточны

Design system оправдана, когда над проектом работают 2+ дизайнера или есть несколько связанных продуктов (веб + мобильное приложение + админка). Для сайта-визитки мы ограничиваемся UI kit с базовыми компонентами. Если проект на React, строим систему поверх Radix UI (headless) с Tailwind CSS — как в Shadcn/ui. Компоненты полностью контролируемы, нет lock-in на стороннюю библиотеку. Wikipedia называет такой подход стратегически правильным для масштабирования.

Как мы обеспечиваем адаптивность без сюрпризов

По данным аналитики, планшеты дают 8–12% трафика в зависимости от ниши — игнорировать их нельзя. Но мы не делаем «десктоп + мобильный» с тремя брейкпоинтами. Проектируем под систему значений, совместимую с кодом: если фронтенд на Tailwind CSS, то sm:640, md:768, lg:1024, xl:1280, 2xl:1536. Дизайнер работает с теми же числами в Figma. Fluid typography и spacing через clamp() убирают скачки на нестандартных разрешениях — лендинги и публичные сайты получают плавное поведение без дополнительных усилий.

Что входит в работу (deliverables)

Мы отдаём результат, который можно сразу передать в разработку, без додумывания со стороны программиста.

Дополнительно: обучение команды работе с дизайн-системой (1–2 часа), доступ к Figma на весь период разработки, поддержка при внедрении.

Как мы гарантируем качество UI

Каждый макет проверяется инженером на реализуемость: нет ли конфликтов между auto layout, корректно ли работают состояния на мобильных, доступен ли контраст (WCAG AA). Мы используем Clarity для анализа текущего юзабилити, и на основе данных переделываем формы, которые теряют конверсию. Типичный результат — inline-валидация вместо submit-and-scroll-to-top увеличивает завершение регистрации на 15–20%. Skeleton screens вместо спиннеров снижают субъективное время загрузки.

Ориентиры по срокам и стоимости

Сроки зависят от количества уникальных экранов и сложности компонентной базы. Стоимость рассчитывается индивидуально — пишите, и мы оценим проект за 1 рабочий день. Получите консультацию по вашему сценарию — расскажем, на каких страницах UX теряет конверсию и как это исправить.