Фотобанковые люди в касках и набор бесплатных иконок делают сайт похожим на сотни других. Собственная графика — самый доступный способ стать узнаваемым. Рассказываем, как её заказать, собрать и не разориться.
Почему графика решает больше, чем кажется
Посетитель B2B-сайта за первую сессию обычно открывает 3–7 компаний-конкурентов. Тексты у них похожи («качество», «надёжность», «индивидуальный подход»), структура похожа, цены часто спрятаны. Запоминается то, что выглядит иначе. И здесь графика — иконки, иллюстрации, схемы — работает сильнее, чем кажется: она формирует визуальный «почерк» компании, который узнают при повторном визите и отличают в выдаче.
У графики на сайте есть и чисто прикладные функции. Иконки ускоряют чтение: блок из шести преимуществ с понятными пиктограммами просматривается быстрее, чем шесть абзацев. Иллюстрации объясняют то, что трудно сфотографировать: как устроен сервис, как проходит поставка, как работает оборудование внутри. Схемы превращают сложный процесс из абзаца в картинку, которую легко переслать коллеге.
Иконки: система, а не набор картинок
Главная ошибка — собирать иконки из разных источников. Одна скачана из бесплатного набора, другая нарисована в прошлом проекте, третья взята из шрифта иконок. По отдельности каждая нормальная, вместе они выглядят как коллаж. Хорошие иконки — это система с едиными параметрами.
Что фиксируется для набора иконок
- Сетка и размер. Базовый размер (обычно 24×24 px) и рабочее поле с внутренними отступами, чтобы визуальный вес иконок был одинаковым.
- Толщина линии. Для контурных иконок — 1,5 или 2 px в базовом размере. Смешивать разную толщину нельзя.
- Скругления. Острые углы или скруглённые — и с каким радиусом. Это сильно влияет на характер: острые выглядят технично, скруглённые — дружелюбно.
- Стиль. Контурные, залитые или двухцветные. Часто используют пару: контурная для неактивного состояния, залитая — для активного.
- Цвет. Иконки интерфейса — в цвете текста или акцента, декоративные иконки преимуществ — допускают фирменный дополнительный цвет.
Интерфейсные и смысловые иконки
Их стоит разделять. Интерфейсные — поиск, корзина, меню, стрелки, закрыть, телефон — должны быть максимально привычными. Пользователь не должен разгадывать, что означает оригинальная «корзина». Здесь лучше взять качественный готовый набор и адаптировать его под параметры проекта. Смысловые иконки — для преимуществ, услуг, отраслей, этапов работы — это поле для уникальности. Именно в них проявляется характер бренда.
Технически иконки лучше подключать как SVG: они чётко выглядят на любом экране, весят по 300–800 байт, меняют цвет через стили и не требуют отдельной загрузки шрифта иконок, который тянет за собой сотни неиспользуемых символов.
Иллюстрации: какой стиль выбрать
Иллюстрация — более дорогой и более заметный инструмент. Выбор стиля зависит от отрасли, аудитории и задач сайта. Вот основные направления, с которыми мы работаем:
| Стиль | Где уместен | Риски |
|---|---|---|
| Плоская векторная графика | Сервисы, IT, логистика, консалтинг | Легко скатиться в «как у всех», если опираться на популярные бесплатные наборы |
| Изометрия | Производство, склады, схемы процессов, инфраструктура | Трудоёмкая; плохо масштабируется на мобильных без упрощения |
| Линейная графика | Инженерия, медицина, премиальные услуги | Может выглядеть холодно; требует аккуратной работы с толщиной линий |
| 3D-рендеры | Оборудование, товары, технологичные продукты | Высокая стоимость; большой вес файлов без оптимизации |
| Смешанная техника (фото + графика) | Производители, которым важно показать реальные объекты | Нужен единый подход к обработке фотографий |
Для B2B-сайтов производителей и дистрибьюторов мы чаще всего рекомендуем сочетание реальных фотографий производства и лаконичной схематичной графики. Иллюстрации с условными человечками в таких нишах могут выглядеть несерьёзно: закупщик ищет подтверждение, что за сайтом стоит реальный завод, а не мультяшная история.
Пример: как графика изменила восприятие компании
Производитель промышленных систем фильтрации пришёл на редизайн с сайтом, где на главной странице был фотобанковый снимок улыбающихся инженеров, а преимущества иллюстрировались иконками из бесплатного набора. Продукт — сложное оборудование, принцип работы которого клиенты плохо понимали, и менеджеры тратили по 15–20 минут на каждом звонке, объясняя одно и то же.
Мы предложили заменить стоковые изображения на три типа графики: фотографии реального цеха и установок на объектах, изометрические схемы, показывающие путь среды через фильтр, и набор из 28 смысловых иконок в едином стиле с фирменным цветом. Схема принципа работы стала самым просматриваемым элементом страницы продукта — на неё приходилось около трети всех кликов по изображениям. Менеджеры стали отправлять клиентам ссылку на схему вместо устных объяснений, а доля обращений с вопросом «как это работает» заметно снизилась.
Совет студии: начните не с иллюстраций «для красоты», а с одной схемы, которая объясняет ваш главный продукт или процесс. Если менеджеры начнут пересылать её клиентам — вы на правильном пути, и дальше графику можно развивать.
Своя графика или готовые наборы
Не каждому проекту нужен полностью авторский набор. Реалистичный подход — комбинировать.
- Интерфейсные иконки берём из проверенного открытого набора с подходящей лицензией и адаптируем толщину и скругления под проект. Это 30–60 иконок, и рисовать их с нуля обычно нецелесообразно.
- Смысловые иконки (10–40 штук) рисуем под проект. На это уходит от нескольких дней до двух недель, в зависимости от количества и сложности.
- Ключевые иллюстрации (3–8 штук: первый экран, схема работы, разделы-хабы) заказываем авторские. Это то, что формирует лицо сайта.
- Второстепенные изображения — фотографии объектов, команды, производства — снимаем, а не покупаем на стоках.
При использовании любых готовых материалов обязательно проверяйте лицензию: разрешено ли коммерческое использование, нужна ли атрибуция, можно ли модифицировать. Бесплатные наборы иногда требуют ссылку на автора на каждой странице, о чём вспоминают уже после запуска.
Технические требования к графике
Красивая иллюстрация весом 3 МБ на первом экране — плохая иллюстрация. Мы придерживаемся таких ориентиров:
- Иконки и простые векторные иллюстрации — SVG, с очищенным кодом (без лишних слоёв и метаданных из графического редактора). Типичная иконка весит меньше 1 КБ, иллюстрация — 5–40 КБ.
- Сложные иллюстрации с градиентами и текстурами, 3D-рендеры — растровые форматы нового поколения (WebP, AVIF) с вариантами для разных размеров экранов.
- У каждой смысловой иллюстрации — альтернативный текст, описывающий, что на ней изображено. Декоративная графика помечается так, чтобы программы экранного доступа её пропускали.
- На мобильных сложные схемы упрощаются или разбиваются на последовательность: горизонтальный процесс из шести шагов превращается в вертикальный список.
- Исходники в редактируемом формате передаются заказчику вместе с сайтом, чтобы можно было дорисовать новую иконку в том же стиле.
Как сохранить стиль после запуска
Через полгода компании понадобится иконка для новой услуги или иллюстрация для раздела вакансий. Если стиль не описан, её нарисуют «похоже», и начнётся постепенное размывание. Поэтому при сдаче проекта мы передаём не только файлы, но и короткое описание правил графики: сетку и параметры иконок, палитру иллюстраций, примеры правильного и неправильного применения. Это одна-две страницы, которые экономят часы объяснений новому дизайнеру. Если сайт остаётся у нас на поддержке, новые элементы рисуются по тем же правилам. Подробнее о том, как графика встраивается в общий визуальный язык, можно посмотреть в работах из портфолио студии.
Чек-лист: графика на сайте работает, если…
- все иконки на сайте нарисованы в одной сетке, с одной толщиной линии и одинаковыми скруглениями;
- интерфейсные иконки привычны и понятны без подписи;
- смысловые иконки и ключевые иллюстрации созданы под ваш бренд, а не взяты из популярного бесплатного набора;
- на сайте есть хотя бы одна схема, объясняющая главный продукт или процесс;
- стоковые фотографии людей заменены реальными снимками или графикой;
- иконки подключены как SVG, иллюстрации оптимизированы по весу;
- у смысловых изображений есть альтернативный текст;
- на мобильных сложные схемы адаптированы, а не просто уменьшены;
- лицензии на все готовые материалы проверены и сохранены;
- правила стиля графики описаны и переданы вместе с исходниками.
Узнаваемость не требует огромного бюджета. Она требует последовательности: один стиль, применённый аккуратно и везде, работает лучше, чем десять эффектных, но разрозненных картинок.
