Иконки и иллюстрации — стиль, сетка и экспорт

Мы — веб-студия Фрейм. Мы ежедневно проектируем и поддерживаем интерфейсы, где иконки и иллюстрации работают не как украшения, а как часть продуктовой логики. От их качества зависит скорость считывания интерфейса, нагрузка на глаза, конверсия и ощущение бренда в целом. В этом материале мы разбираем практический подход к системе иконок и иллюстраций: как выстроить стиль, как работать с пиксельной сеткой и как правильно готовить графику к экспорту в продакшн.

Иконки в интерфейсе — это язык. Если он построен хаотично, пользователю приходится постоянно «переводить» каждую кнопку и каждый статус. Когда же система иконок продумана, навигация становится интуитивной, а интерфейс ощущается цельным даже при сложной функциональности. Поэтому к иконкам стоит относиться как к отдельному продукту, а не как к набору случайных файлов, подтянутых с разных стоков.

Иллюстрации отвечают за эмоциональный слой: они задают tone of voice, поддерживают позиционирование и помогают снять напряжение от сложных сценариев. При этом иллюстрации не должны спорить с интерфейсной логикой и перетягивать внимание с ключевых действий. Наша задача как студии — так настроить визуальную систему, чтобы иконки и иллюстрации работали как единый язык бренда: читаемо, аккуратно и прогнозируемо.

Архитектура системы иконок и иллюстраций начинается с двух базовых решений: какие задачи решает каждая группа элементов и на какой пиксельной сетке мы ее строим. Только после этого имеет смысл обсуждать цвет, выразительность, уровень детализации и то, как именно все это будет экспортироваться в SVG, WebP и другие форматы без потери качества и скорости загрузки.

Стиль и сетка

Иконки в системном интерфейсе должны быть в едином стиле. Это означает не только одинаковую толщину линий, но и согласованные радиусы скруглений, угол наклона, принципы обрезки объектов и уровень детализации. Мы всегда начинаем с описания базовых параметров: размер сетки (например, 16×16, 20×20 или 24×24), толщина штриха, тип заливки (контурные, заливочные или смешанные), работа с углами (круглые, скошенные, прямые).

Иконки должны физически стоять на пиксельной сетке, а не «плавать» между пикселями. Если контуры не привязаны к сетке, в интерфейсе на разных устройствах появляются размытые линии и «дрожащие» края. Мы следим за тем, чтобы ключевые опорные точки оказались на целых значениях координат, а ширина штриха была кратна плотности дисплея. Это особенно важно для небольших размеров иконок — 12–16 px, где любое смещение сразу видно.

Иконки должны быть кратны базовой сетке интерфейса. Если в продукте используется шаг 4 или 8 пикселей, размеры иконок мы выбираем так, чтобы они ложились в эту модульную систему: 16, 24, 32, 40 и так далее. Тогда иконки органично выстраиваются рядом с типографикой, компонентами форм и карточками, а не требуют постоянного «подгонять на глаз». В наших проектах мы фиксируем список допустимых размеров и не выходим за него без веской причины.

Иконки всегда проектируются с учетом соседства с текстом. Если иконка стоит слева от подписи, она должна быть оптически выровнена по высоте строчных букв, а не просто иметь такой же размер по пикселям. Мы тестируем несколько типичных пар: иконка + текст кнопки, иконка + пункт меню, иконка + небольшой подзаголовок. На этапе дизайна мы смотрим не на отдельные элементы, а на пары и группы, потому что именно они будут жить в интерфейсе.

Иллюстрации поддерживают tone of voice бренда и не должны выпадать из общей стилистики. Если бренд строится на минимализме и строгой геометрии, чрезмерно детализированные «мультяшные» картинки будут ломать впечатление. Мы задаем минимальный набор правил: цветовая палитра, допустимый уровень детализации, отношение к фону (есть ли фоновые пятна или иллюстрации всегда на прозрачном фоне), работа с персонажами, использование абстракций вместо буквального изображения продукта.

Иллюстрации должны быть согласованы между собой по композиции. Если на одном экране фон строится из крупных цветовых пятен, а на другом — из тонких линий и мелких элементов, при пролистывании страницы ощущается визуальный шум. В практических проектах мы создаем для клиента небольшой иллюстрационный гайд: примеры базовых композиций, типовые сцены (онбординг, пустое состояние, ошибка, успех) и правила масштабирования под разные форматы — от баннера до маленького блока в карточке.

Иконки и иллюстрации должны учитывать сценарии доступности. Контурные иконки без заполнения и с низким контрастом плохо читаются для пользователей со сниженным зрением. Мы проверяем контраст иконок к фону и к тексту, избегаем ключевых смысловых элементов только цветом (например, «активный» и «неактивный» статус, отличающиеся лишь оттенком), а в иллюстрациях не зашиваем критически важную информацию туда, где она не будет озвучена скринридером.

Иконки, которые несут системную функциональность (закрыть, сохранить, отправить, поиск), мы всегда фиксируем как часть дизайн-системы. Они не меняются от кампании к кампании и не подстраиваются под промо-стили. Промо-иконки и декоративные элементы мы выносим отдельно: они могут быть более смелыми по цвету и форме, но не должны конфликтовать с базовым «языком управления» интерфейсом.

Экспорт

Экспорт — это мост между дизайнерским макетом и живым сайтом. Иконки и иллюстрации могут быть идеально нарисованы, но если экспорт настроен неправильно, проект получает лишний вес, битые масштабы и артефакты. Мы выстраиваем заранее понятный пайплайн: как именно файлы будут вывозиться из редактора, кто отвечает за оптимизацию и как проверяется итоговый результат в интерфейсе.

SVG для иконок мы экспортируем в чистом, оптимизированном виде. Перед экспортом мы убираем лишние слои и эффекты, выравниваем viewBox, приводим названия групп и слоев к читаемому виду. На выходе получаем файл без лишних атрибутов, скрытых элементов, мусорных id и инлайновых стилей, которые затрудняют дальнейшую поддержку. Следующий шаг — оптимизация через инструменты типа SVGO или их аналоги, чтобы минимизировать размер файла без потери визуального качества.

SVG-спрайт мы используем там, где есть множество повторяющихся иконок и важно сократить количество запросов. Мы собираем иконки в единый спрайт, а в интерфейсе подключаем их через ссылку на нужный символ. Это удобно для стабильных наборов: системные иконки навигации, состояния, элементы интерфейса. При этом мы следим за тем, чтобы структура спрайта не была перегружена: устаревшие иконки должны удаляться, а не «пылиться» в одном огромном файле.

SVG-иконки мы по возможности подстраиваем под цветовую систему через currentColor или переменные темы. Это позволяет менять цвет иконок через CSS в зависимости от состояния (hover, active, disabled) и темы (светлая, темная), а не экспортировать отдельный файл под каждый вариант. Для клиента это означает меньший объем графики и более предсказуемое поведение интерфейса при доработках.

Иллюстрации чаще всего экспортируются в растровых форматах: WebP, иногда AVIF, с fallback на PNG или JPEG в зависимости от задач. Мы подбираем формат не по привычке, а по контексту: для градиентов и мягких переходов лучше подходят современные форматы, для иллюстраций с прозрачностью или ограниченной палитрой — аккуратно подобранный PNG. Важный принцип — не тащить «галерею» оригинальных изображений весом по несколько мегабайт на главную страницу.

Иллюстрации должны иметь корректный набор размеров для разных плотностей экранов. Мы готовим версии @1x и @2x (а под некоторые сценарии и @3x), продумываем использование srcset и sizes, чтобы браузер подгружал наиболее подходящий вариант. Это критично для лендингов и маркетинговых страниц, где крупные иллюстрации часто задают визуальный ритм и одновременно создают основную нагрузку на канал.

Иконки и иллюстрации мы всегда проверяем в реальном интерфейсе после экспорта. Это не формальная «галочка», а полноценный этап: мы смотрим, как файлы ведут себя в разных браузерах, на разных плотностях, в разных темах и на различных цветовых профилях. Если где-то появляются артефакты, размытости, проблемы с прозрачностью или некорректной обрезкой, мы возвращаемся не к верстке, а к исходному файлу и настройкам экспорта.

Оптимизация графики обязательно связана с производительностью сайта. Мы оцениваем вклад иконок и иллюстраций в общий вес страницы, смотрим на Web Vitals и именно под них принимаем решения: где достаточно SVG, где нужен растровый формат, где стоит заменить сложную сцену более лаконичной. Задача не в том, чтобы выжать каждый килобайт любой ценой, а в том, чтобы графика работала на продукт и не мешала сценариям пользователя.

Финал

Иконки и иллюстрации — это инфраструктура интерфейса. Если она не системна, любой редизайн быстро превращается в хаотичное наращивание «заплаток», а продукт начинает выглядеть усталым уже через год. Мы как веб-студия Фрейм выстраиваем для клиентов целостные системы: от стиля и пиксельной сетки до пайплайна экспорта и правил поддержки, чтобы визуальный язык бренда не расползался при каждом новом релизе.

Материал подготовлен на основе практики студии: реальных проектов, где мы отвечаем и за дизайн сайтов, и за фронтенд-реализацию. Если вам нужен аудит иконок и иллюстраций, разработка новой системы или адаптация текущего набора под рост продукта и дизайн-систему, свяжитесь с нами через форму на сайте. Мы предложим понятную дорожную карту: какие элементы доработать, какие файлы пересобрать, как выстроить экспорт и как в итоге превратить визуальный хаос в аккуратный, управляемый язык интерфейса.