Иконки и иллюстрации кажутся мелочью, которую можно доделать в последний момент: взять бесплатный набор, расставить по блокам «Преимущества» — и готово. Но именно графика интерфейса часто выдаёт непродуманный сайт: пиктограммы из трёх разных наборов, непонятные символы без подписей, иллюстрации, которые спорят с фотографиями. Хорошая графика, наоборот, ускоряет ориентацию на странице и делает сайт узнаваемым. Разберём, как к ней подходить.
Зачем интерфейсу иконки
У иконки три полезные функции. Первая — ускорить узнавание: пользователь находит корзину, поиск или меню за доли секунды, не читая слов. Вторая — сэкономить место там, где его мало, например в мобильной навигации или панели инструментов. Третья — структурировать текст: в списке из шести преимуществ иконки помогают глазу разделить пункты и быстрее пробежать по ним.
При этом иконка сама по себе ничего не объясняет, если она не входит в небольшой набор общепринятых символов. Лупа означает поиск, корзина или пакет — покупку, домик — главную, крестик — закрыть. Эти символы люди учили годами на тысячах сайтов. Всё остальное — шестерёнки, молнии, щиты, ракеты — без подписи понимается по-разному. Шестерёнка может означать «настройки», «производство» или «технический сервис», а ракета — «быстрый запуск», «рост» или просто «у нас современно».
Отсюда главное правило: иконки, которые выполняют действие, должны иметь текстовую подпись, если это не один из общепринятых символов. А иконки в блоках контента — служить дополнением к заголовку, а не заменой ему.
Когда иконки мешают
Мы регулярно видим одни и те же ошибки при аудите сайтов. Они кажутся косметическими, но напрямую влияют на то, как быстро пользователь понимает страницу.
Иконки ради иконок
Блок «Почему мы» из восьми пунктов, где у каждого своя пиктограмма: галочка, звезда, щит, часы, рукопожатие. Ни одна не добавляет смысла, а вместе они создают визуальный шум. Если убрать иконки и оставить короткие заголовки с цифрами, блок читается быстрее.
Загадочные кнопки
Панель в карточке товара с пятью иконками без подписей: сравнение, избранное, поделиться, уведомить о поступлении, задать вопрос. Пользователь наводит мышь на каждую, а на смартфоне подсказок нет вовсе — он просто не пользуется этими функциями.
Ещё одна частая проблема — смешение стилей. Часть иконок контурные, часть залитые, у одних скруглённые углы, у других острые, толщина линий от 1 до 3 пикселей. По отдельности незаметно, а вместе страница выглядит собранной из разных шаблонов. Пользователь не сформулирует, что не так, но ощущение небрежности перенесёт на компанию.
Как выбрать и выстроить единый стиль иконок
Единый стиль — это не «все иконки из одного набора», хотя это хорошее начало. Это набор чётких параметров, которые соблюдаются для каждой пиктограммы на сайте, включая нарисованные позже.
| Параметр | Что зафиксировать | Типичное значение |
|---|---|---|
| Сетка | Размер рабочей области и внутренние поля | 24×24 с полем 2 пикселя |
| Тип | Контурные, залитые или комбинированные | Контурные для интерфейса, залитые для активных состояний |
| Толщина линии | Одна для всех иконок одного размера | 1,5 или 2 пикселя |
| Углы и окончания | Скругление углов и концов линий | Скругление 2 пикселя, круглые окончания |
| Цвет | Основной, акцентный, неактивный | Цвет текста, фирменный, серый 60% |
| Размеры | Допустимые размеры в интерфейсе | 16, 20, 24, 32 пикселя |
Стиль иконок должен соответствовать характеру шрифта и интерфейса в целом. Тонкие изящные пиктограммы хорошо смотрятся с лёгким гротеском и большим количеством воздуха. Плотные залитые иконки сочетаются с жирной типографикой и контрастными кнопками. Если шрифт имеет скругления, острые иконки будут выглядеть чужеродно.
Готовый набор или собственная отрисовка
Для большинства корпоративных сайтов и магазинов достаточно качественного открытого набора с лицензией, разрешающей коммерческое использование. В крупных наборах 1 000–3 000 иконок, этого хватает на любые типовые задачи. Собственная отрисовка оправдана, когда нужны специфические символы отрасли — станки, виды металлопроката, медицинские процедуры — или когда графика должна стать частью фирменного стиля. Отрисовка одной иконки в заданном стиле занимает у дизайнера 20–40 минут, набора из 30 иконок — 2–3 рабочих дня.
Технические правила для иконок
Иконки на сайте отдаются в SVG — векторном формате, который остаётся резким на любом экране и весит считанные сотни байт. Растровые иконки в PNG давно не нужны, а иконочные шрифты постепенно уходят: у них проблемы с доступностью и сглаживанием, и при сбое загрузки шрифта вместо пиктограмм отображаются квадраты.
- Иконки собраны в спрайт или подключаются как компоненты, а не грузятся десятками отдельных файлов.
- Цвет управляется из стилей, чтобы один и тот же файл работал в разных состояниях и в тёмной теме.
- Кликабельная зона иконки-кнопки — не меньше 44×44 пикселей, даже если сама пиктограмма 20×20.
- У иконок-кнопок есть текстовая подпись — видимая или доступная для экранных дикторов.
- Декоративные иконки скрыты от вспомогательных программ, чтобы диктор не зачитывал «изображение, изображение».
- В исходниках удалены лишние группы, метаданные редакторов и скрытые слои — это уменьшает вес в 2–5 раз.
Отдельно стоит продумать состояния: обычное, наведение, активное, неактивное. Например, иконка «избранное» в виде контурного сердечка при добавлении товара становится залитой. Такая смена формы понятнее, чем только смена цвета, и работает для людей с нарушениями цветовосприятия.
Проверить качество иконок можно простым тестом. Покажите пяти коллегам, не участвовавшим в проекте, пиктограммы без подписей и попросите назвать, что каждая означает. Если хотя бы двое ответили по-разному, иконке нужна подпись или замена. Второй тест — уменьшение: посмотрите на иконки в размере 16 пикселей на обычном, не ретина, мониторе. Мелкие детали в таком размере сливаются в пятно, и иконку, которая красиво выглядела в макете при увеличении, становится невозможно распознать. Хорошая интерфейсная пиктограмма читается по силуэту, без деталей.
Иллюстрации: когда они уместны
Иллюстрации — более крупная и выразительная графика: сюжетные сцены, персонажи, схемы, изометрические изображения процессов. Они хороши там, где фотографией сложно или невозможно показать суть.
Абстрактные услуги
Как показать бухгалтерский аутсорсинг, страхование или ИТ-интеграцию? Фото людей за ноутбуками ничего не объясняет, а схема или сюжетная иллюстрация — объясняет.
Процессы и устройство
Схема работы оборудования, путь заказа от склада до клиента, этапы сотрудничества. Иллюстрация может упростить и выделить главное, чего не сделает фото.
Пустые и служебные состояния
Пустая корзина, страница 404, успешная отправка формы. Небольшая иллюстрация смягчает неприятный момент и добавляет характера.
Фирменный стиль
Узнаваемый иллюстративный язык выделяет сайт среди конкурентов, которые используют одни и те же стоковые фотографии.
Иллюстрации неуместны там, где важна достоверность. Производственной компании нужно показывать реальный цех и реальную продукцию, клинике — реальных врачей и кабинеты, строительной фирме — реальные объекты. Нарисованный завод вместо фотографии вызывает вопрос: а есть ли он на самом деле? Подробнее о том, какие изображения работают на доверие, — в статье об изображениях на сайте.
Как не превратить иллюстрации в сток
Самая распространённая ошибка — купить пак «универсальных бизнес-иллюстраций» с плоскими человечками с длинными руками. Этот стиль был свежим, но сейчас он встречается на тысячах сайтов и считывается как шаблон. Если иллюстрации — часть визуального языка, они должны быть сделаны под проект или хотя бы серьёзно адаптированы: перекрашены в фирменную палитру, дополнены отраслевыми деталями, сведены к единой манере.
Второй момент — согласованность с остальной графикой. Иллюстрации, фото и иконки на одной странице должны выглядеть частями одной системы. Если иконки контурные и строгие, а иллюстрации объёмные с градиентами, страница распадается на куски. Помогает общая палитра, одинаковая толщина линий и общий подход к деталям.
Третий — вес. Сложная векторная иллюстрация с сотнями объектов может весить 300–800 КБ в SVG, что больше иного фото. Такие изображения стоит упрощать или экспортировать в WebP. Анимированные иллюстрации — отдельная тема: они заметно увеличивают вес страницы и нагрузку на слабые смартфоны, поэтому использовать их стоит точечно, например на первом экране лендинга, и с учётом настройки пользователя «уменьшить движение».
При заказе иллюстраций сразу оговорите передачу исходников и прав на использование. Иначе через полгода, когда понадобится новая картинка в том же стиле для нового раздела, может оказаться, что исходники у фрилансера, который больше не отвечает.
Как документировать графику, чтобы она оставалась единой
Сайт живёт годами: появляются новые разделы, акции, посадочные страницы. Если правила графики существуют только в голове дизайнера, через год на сайте окажутся иконки из пяти наборов. Поэтому все решения стоит зафиксировать: библиотеку иконок с названиями и правилами использования, параметры сетки, примеры правильного и неправильного применения, принципы иллюстраций с образцами.
В проектах, где графика активно развивается, это естественная часть дизайн-системы. Для небольшого сайта достаточно одной страницы в макете с набором всех используемых иконок и коротким описанием стиля — этого хватит, чтобы контент-менеджер или новый дизайнер не добавили чужеродный элемент.
Что важно запомнить
Иконки помогают, когда ускоряют узнавание и структурируют информацию, и мешают, когда стоят ради украшения или заменяют слова там, где смысл неочевиден. Общепринятые символы можно использовать без подписи, всё остальное — с текстом. Единый стиль задаётся параметрами — сетка, толщина линий, скругления, цвет, — а не просто выбором одного набора.
Иллюстрации уместны для абстрактных услуг, процессов и служебных состояний, но не должны подменять реальные фото там, где важна достоверность. Делайте графику частью общей системы, отдавайте её в оптимизированном SVG, заботьтесь о доступности и документируйте правила — тогда сайт останется цельным даже после многих доработок.
Нужен сайт или интернет-магазин?
Обсудим задачу, подскажем подходящую платформу и оценим сроки и бюджет — бесплатно и без обязательств.
Обсудить проект
