Открываешь сайт: в шапке иконки тонкими линиями, в блоке преимуществ — объёмные цветные значки, в подвале — заливки из другого набора, а в разделе «О компании» — плоская иллюстрация с людьми без лиц, которая будто пришла с соседнего сайта. По отдельности каждый элемент неплох. Вместе они создают ощущение, что сайт собирали из того, что нашлось под рукой.
Посетитель редко может сформулировать, что не так, но чувствует несобранность. И она снижает доверие сильнее, чем кажется. В этой статье разберём, как сделать иконки и иллюстрации единым визуальным языком и как этот язык поддерживать, когда сайт растёт.
Зачем нужен единый стиль графики
Иконки и иллюстрации выполняют несколько задач: помогают быстро сканировать страницу, объясняют сложное, создают настроение и отличают бренд от конкурентов. Каждая из этих задач работает лучше, если графика согласована.
- Скорость восприятия. Когда все иконки построены по одним правилам, глаз привыкает к языку и считывает смысл, не отвлекаясь на форму.
- Узнаваемость. Собственный стиль иллюстраций становится частью бренда, как цвет или логотип.
- Профессиональное впечатление. Аккуратная графика говорит о внимании к деталям, и посетитель переносит это ощущение на услуги компании.
- Экономия в будущем. Если правила зафиксированы, новую иконку или иллюстрацию может нарисовать любой дизайнер, и она впишется.
Анатомия иконки: что должно совпадать
Чтобы иконки выглядели как семья, у них должны совпадать базовые параметры. Мы фиксируем их в начале работы.
| Параметр | Что фиксируем | Частая ошибка |
|---|---|---|
| Сетка и размер | Базовая область, например 24 на 24, с внутренними полями | Иконки разного визуального размера в одном ряду |
| Стиль | Линейные, с заливкой или комбинированные | Смешение контурных и залитых иконок |
| Толщина линии | Одна толщина для всего набора | Иконки с линией в один и два пикселя рядом |
| Скругления | Радиус углов и окончаний линий | Одни иконки острые, другие мягкие |
| Перспектива | Строго фронтальный вид или единый угол | Плоские и изометрические значки вперемешку |
| Детализация | Количество элементов внутри иконки | Простые пиктограммы рядом с перегруженными рисунками |
Отдельно про визуальный размер. Круг, квадрат и треугольник, вписанные в одну и ту же область, выглядят разными по величине. Поэтому в сетке иконки есть ориентиры: круглые формы делают чуть больше, квадратные — чуть меньше. Это та самая мелочь, которая отличает аккуратный набор от случайного.
Готовый набор или собственные иконки
Для большинства сайтов не нужно рисовать иконки с нуля. Есть качественные открытые наборы с сотнями значков в едином стиле. Но у этого подхода есть ограничения.
Плюсы готового набора: быстро, дёшево, иконки уже согласованы между собой, есть почти всё для типовых задач — корзина, поиск, меню, телефон, стрелки.
Минусы: специфических для вашего бизнеса значков в наборе может не оказаться, и тогда возникает соблазн взять недостающие из другого набора. Кроме того, популярные наборы используются на тысячах сайтов, и графика не добавляет узнаваемости.
Мы обычно действуем так: интерфейсные иконки берём из одного проверенного набора, а предметные — те, что описывают услуги и преимущества, — дорисовываем сами по правилам того же набора. Так сохраняется единство, а значки, которые несут смысл для бизнеса, становятся уникальными.
Главное правило: один набор на весь сайт. Если нужной иконки нет — дорисуйте её по тем же правилам, а не ищите похожую в другом месте.
Иллюстрации: выбор стиля
С иллюстрациями сложнее, потому что стилей бесконечно много: плоская графика, линейные рисунки, изометрия, трёхмерные объекты, коллажи из фотографий, рисованные от руки скетчи, абстрактные формы. Выбор зависит от бренда, аудитории и задач.
Как мы выбираем стиль
- Смотрим на характер бренда. Строгая юридическая компания и детская онлайн-школа требуют разной графики. Иллюстрация должна говорить тем же голосом, что и тексты.
- Определяем задачи. Если иллюстрации нужны для объяснения процессов, нужен стиль, в котором можно показать схемы и последовательности. Если для настроения — можно позволить больше свободы.
- Оцениваем объём. Сколько иллюстраций понадобится сейчас и в будущем. Сложный трёхмерный стиль выглядит эффектно, но каждая новая картинка будет стоить дорого.
- Проверяем совместимость с фотографиями. Если на сайте много фото, иллюстрации не должны с ними конфликтовать.
Из практики: для сервиса бухгалтерского аутсорсинга мы выбрали лаконичный линейный стиль с одним акцентным цветом бренда. Он хорошо сочетался с иконками, был недорогим в производстве и позволял быстро рисовать новые сюжеты для статей блога и рассылок. Заказчик потом сам заказывал иллюстрации у фрилансеров по нашему гайду — и они вписывались.
Цвет и композиция в графике
Цвет — один из главных инструментов единства. Иллюстрации используют ту же палитру, что и интерфейс: основной цвет бренда, акцент, нейтральные оттенки. Если в иллюстрациях появляются случайные цвета, они выпадают из общей картины.
Для иконок правило ещё строже: обычно они одноцветные и наследуют цвет текста или акцента. Многоцветные иконки допустимы в отдельных блоках, но тогда цвета должны быть строго из палитры и применяться по единой логике.
Кроме цвета, мы фиксируем:
- Пропорции персонажей, если они есть.
- Наличие или отсутствие теней, градиентов, текстур.
- Как изображаются типовые объекты: здания, устройства, документы.
- Насколько плотная композиция и сколько воздуха вокруг объектов.
Типичные ошибки
Чаще всего визуальный язык разрушается не на старте, а в процессе жизни сайта. Вот что мы видим на проектах, которые приходят на доработку.
Иконки из разных наборов. Кто-то добавил новый раздел и взял значок, который нашёл первым. Через год на сайте три-четыре разных стиля.
Иллюстрации из фотостоков без адаптации. Картинка подошла по смыслу, но стиль, цвета и детализация другие. Даже простая перекраска в цвета бренда сильно помогает, но лучше выбирать изображения одной серии или одного автора.
Иконки без смысла. Значок «галочка» у каждого пункта списка преимуществ или абстрактная «лампочка» у блока «Идеи» — это декор, который ничего не объясняет. Иконка должна помогать понять содержание, иначе её лучше убрать.
Слишком мелкие или слишком крупные значки. Иконка в интерфейсе должна соответствовать размеру текста рядом с ней. Иконка в блоке преимуществ может быть крупнее, но в пределах единой шкалы.
Отсутствие подписей. Иконка без текста понятна, только если её смысл общепринят: поиск, корзина, закрыть. Для всего остального нужна подпись.
Как зафиксировать визуальный язык
Чтобы стиль сохранялся, его нужно описать. Мы оформляем правила в виде небольшого руководства, которое передаём заказчику вместе с макетами. В нём есть:
- Сетка иконок, толщина линий, скругления, примеры правильных и неправильных иконок.
- Полный набор используемых иконок с названиями.
- Палитра для иллюстраций и допустимые сочетания.
- Примеры иллюстраций и описание стиля словами.
- Исходные файлы, из которых можно собирать новые изображения.
Это часть более широкой дизайн-системы, о которой мы подробно рассказывали в отдельной статье. Даже если полноценная дизайн-система компании пока не нужна, руководство по графике стоит сделать — это одна-две страницы, которые сэкономят много времени.
Вывод
Иконки и иллюстрации работают на бренд только тогда, когда говорят на одном языке. Для этого нужно выбрать один набор иконок и зафиксировать его параметры, подобрать стиль иллюстраций под характер бренда и объём задач, использовать только цвета палитры, не добавлять иконки ради декора и описать правила так, чтобы им мог следовать любой дизайнер.
Если графика на вашем сайте собиралась годами из разных источников, её можно привести к единому виду без полного редизайна. Мы делаем это в рамках разработки дизайна: собираем набор, перерисовываем недостающее и заменяем иконки по всему сайту.
