Среднему сайту услуг хватает набора из 12-20 иконок, и почти всегда он собран из 3 разных источников - отсюда ощущение самодельности, которое посетитель считывает раньше, чем читает текст. Шесть правил ниже приводят набор к одному виду: сетка, толщина линии, скругления, цвет, формат и назначение. Их можно применить к действующему сайту за 1-2 дня, без переделки дизайна.
Наша позиция по оформлению простая. Иконка на сайте существует не для красоты, а чтобы человек быстрее нашёл нужный блок и дошёл до заявки. Если из макета не видно, откуда пойдут обращения, мы переделываем макет, а не украшаем его дополнительными картинками.
I. Короткий ответ
Единый стиль - это не «взять иконки из одного набора», а четыре совпадающих параметра: одинаковая сетка (обычно 24 на 24 пикселя), одинаковая толщина линии, одинаковый подход к скруглениям и один способ окрашивания. Если эти четыре параметра совпадают, иконки из разных источников смотрятся как один комплект. Если нет - даже один набор будет выглядеть разнородно, стоит добавить к нему пару чужих значков.
Формат по умолчанию - SVG. Это векторная графика: она весит единицы килобайт, остаётся чёткой на любом экране и перекрашивается прямо в коде. Иконки в PNG и JPG на современном сайте оправданы редко: они тяжелее, размываются на плотных экранах и не меняют цвет при наведении.
Прототип главной страницы делаем бесплатно. До договора и без предоплаты вы видите, как будет выглядеть ваш сайт: первый экран, блоки, их порядок и логика заявки - в том числе где нужны иконки, а где они только шумят. Нравится - работаем дальше. Не нравится - расходимся, вы ничего не должны.
II. Шесть правил единого набора
- Одна сетка. Все иконки рисуются в одном квадрате, обычно 24 на 24 пикселя, с одинаковыми отступами от края. Разная сетка даёт эффект «одна больше другой», даже если размеры на странице заданы одинаковые.
- Одна толщина линии. Выбирается один раз - чаще всего 1,5 или 2 пикселя - и не меняется. Смешивание тонких контурных значков с жирными заливками читается как ошибка вёрстки.
- Один тип: контур или заливка. Оба варианта рабочие, но в пределах сайта должен быть один. Исключение - активное состояние: контур в обычном виде, заливка в выбранном пункте меню.
- Один способ окрашивания. Либо все иконки наследуют цвет текста, либо все окрашены акцентным цветом. Многоцветные значки в одном ряду с одноцветными разваливают ряд.
- SVG и только он. Вектор весит килобайты, масштабируется без потерь и перекрашивается кодом. Набор из 20 иконок в SVG обычно легче одной средней фотографии.
- Иконка не заменяет подпись. Значок без текста понимают по-разному: конверт может значить и почту, и подписку, и сообщение. Подпись обязательна везде, кроме общепринятых элементов вроде корзины и поиска.
III. Таблица: где иконка помогает
| Блок сайта | Нужна ли иконка | Зачем | Риск |
|---|---|---|---|
| Преимущества, 3-6 пунктов | Да | Разделяет пункты взглядом | Общие значки без смысла |
| Этапы работы | Да | Показывает движение по шагам | Дублирование номера шага |
| Услуги в каталоге | По ситуации | Помогает различать разделы | 20 похожих значков подряд |
| Первый экран | Редко | Отвлекает от главного действия | Снижает заметность кнопки |
| Форма заявки | Нет | Поля и так понятны | Съедает место на телефоне |
| Контакты | Да | Быстро находятся телефон и адрес | Многоцветные логотипы вперемешку |
| Отзывы и работы | Нет | Там работают фото и текст | Ощущение шаблона |
Общее правило по количеству: если на экране больше 8-10 иконок одновременно, они перестают помогать и начинают мешать - глазу не за что зацепиться. В таких случаях мы убираем значки из второстепенных блоков и оставляем там, где нужен быстрый поиск глазами: этапы, контакты, преимущества.
IV. Иллюстрации: когда они оправданы
Иллюстрация отличается от иконки не размером, а задачей: она объясняет то, что нельзя снять камерой и трудно описать текстом. Схема монтажа, устройство слоёв, маршрут доставки, разрез конструкции - вот честные поводы рисовать. Иллюстрация «для настроения» на сайте услуг чаще вредит: она занимает место, которое могло бы работать на доверие.
Хороший пример дозировки графики - редизайн сайта SkyFarm, агротех с системами выращивания на искусственном интеллекте: контейнерные фермы, блок управления, приложение, семена и питание. Вместо декоративных рисунков там работают крупные фото продукта, экран приложения и схема работы из трёх шагов - датчики, анализ, исполнение, - а графика появляется ровно там, где нужно объяснить невидимое.
- Схемы процессов. Что происходит после заявки, кто что делает и в какие сроки - схема читается быстрее абзаца.
- Устройство продукта. Разрезы, слои, узлы - всё, что не снимается фотографией.
- Пустые состояния. Ничего не найдено, корзина пуста, заявка отправлена - небольшой рисунок снимает ощущение ошибки.
- Абстрактные услуги. Там, где фотографировать нечего, иллюстрация заменяет визуал. Так устроены посадочные страницы уроков на ayvazzovsky.academy, онлайн-академии видеоуроков колористики с каталогом курсов, личным кабинетом и промокодами.
- Единый стиль каталога. Когда карточки приходят из разных источников, общий графический слой приводит их к одному виду - эту задачу мы решали на витрине Monkey Market с каталогом кроссовок, трендами и заказом в Telegram.
V. Ошибки, которые видно сразу
Самая частая ошибка - скачать значки из трёх разных наборов и поставить их в один ряд. Разная толщина линии и разные скругления заметны даже человеку, который никогда не думал про дизайн: сайт выглядит собранным на скорую руку, и доверие падает ещё до того, как посетитель дочитал заголовок блока. Вторая по частоте - трёхмерные цветные картинки из бесплатных библиотек: они узнаются мгновенно и стоят на сотнях чужих сайтов.
Дальше по списку: анимированные иконки, которые двигаются постоянно и перетягивают внимание с кнопки заявки; иконки в PNG, размытые на плотных экранах телефонов; значки в форме, съедающие ширину полей; и буквальные метафоры вроде рукопожатия под словом «партнёрство» - они не добавляют смысла, а занимают строку.
Отдельно про лицензии. Бесплатные наборы часто требуют указания автора, а часть библиотек запрещает использование в коммерческих проектах без оплаты. Это мелочь, пока не приходит письмо от правообладателя. Условия проверяются за 10 минут перед тем, как набор уходит в вёрстку.
VI. Сколько это стоит и что даёт
Приведение действующего набора к единому виду - это обычно 1-2 дня работы: выбрать базовую сетку и толщину, перерисовать выпадающие значки, перевести всё в SVG, задать один способ окрашивания. Отрисовка своего набора из 15-20 уникальных иконок под нишу - отдельная работа, её считают в часах дизайнера. В смете нового сайта иконки и иллюстрации обычно входят в дизайн, а не в отдельную строку.
Сайт на React мы делаем от 80 000 ₽ и обычно сдаём за 1-2 недели с момента получения материалов, перенос с конструктора на свой код - тоже от 80 000 ₽. Как мы ведём разработку и последующее продвижение одной командой, описано на странице разработка сайтов и SEO. Пример работающей связки оформления и логики заявки - navsegda-event.ru, сайт агентства корпоративных мероприятий с услугами, кейсами, этапами работы и расчётом мероприятия.
Важно не переоценивать вклад графики. Иконки помогают ориентироваться, но сами по себе заявок не приносят - роста позиций, трафика и обращений от смены набора значков мы не обещаем. Если нужен измеримый поток обращений, работает модель лидов с оплатой за результат: платите за факт обращения, цена зависит от ниши и региона. А понять, какие обращения считать целевыми, помогает материал про оценку качества лидов.
VII. Короткий итог
Единый стиль иконок держится на четырёх совпадениях: сетка, толщина линии, тип (контур или заливка) и способ окрашивания. Формат - SVG, подпись - обязательна, количество на экране - не больше 8-10. Иллюстрации оправданы там, где нужно объяснить невидимое: схемы, разрезы, процессы, пустые состояния. Всё остальное чаще занимает место, которое могло бы работать на доверие. Привести действующий набор к порядку - обычно 1-2 дня. А чтобы понять, сколько иконок вам вообще нужно, начните с бесплатного прототипа главной: на нём сразу видно, какие блоки требуют графики, а какие обходятся текстом и цифрами.
Наши работы
Сайты, которые студия уже запустила
Четыре проекта N3MIROFF, которые можно открыть прямо сейчас и посмотреть, как они работают.
Агротех с ИИ
SkyFarm ↗
Редизайн сайта систем выращивания: первый экран с контейнерной фермой, схема работы из трёх шагов, карусель продуктов и экран приложения.
Сайт салона
ayvazzovsky.com ↗
Салон сложного окрашивания в Москве: онлайн-запись, видео работ, портфолио и команда. Переехал с Тильды на свой хостинг.
Онлайн-академия
ayvazzovsky.academy ↗
Видеоуроки колористики: каталог, посадочные страницы уроков, личный кабинет и промокоды.
Event-агентство
navsegda-event.ru ↗
НАВСЕГДА: корпоративы и конференции - услуги, кейсы, этапы работы и расчёт мероприятия.
Витрина магазина
Monkey Market ↗
Премиальная витрина магазина кроссовок с заказом в Telegram.
Сайт выглядит собранным из разных кусков?
Приведём иконки и иллюстрации к одному набору, а на бесплатном прототипе главной покажем, где графика вообще нужна.
Частые вопросы
Сколько иконок нужно среднему сайту услуг?
Обычно хватает 12-20 штук на весь сайт: преимущества, этапы работы, контакты, элементы интерфейса. На одном экране одновременно лучше держать не больше 8-10 - дальше они перестают помогать и начинают мешать.
Почему SVG лучше PNG для иконок?
SVG - векторный формат: весит единицы килобайт, остаётся чётким на плотных экранах телефонов и перекрашивается прямо в коде при наведении. Набор из 20 иконок в SVG обычно легче одной средней фотографии, а PNG размывается при увеличении и не меняет цвет.
Можно ли брать бесплатные наборы иконок?
Да, если проверить лицензию. Часть бесплатных библиотек требует указания автора, часть запрещает коммерческое использование без оплаты. Проверка условий занимает около 10 минут и делается до того, как набор ушёл в вёрстку.
Сколько времени занимает приведение иконок к единому стилю?
Обычно 1-2 дня: выбрать базовую сетку и толщину линии, перерисовать выпадающие значки, перевести всё в SVG и задать единый способ окрашивания. Переделка сайта для этого не нужна, работа идёт поверх существующей вёрстки.
Что входит в бесплатный прототип главной страницы?
Первый экран, набор блоков, их порядок и логика заявки - включая то, каким блокам нужна графика, а каким достаточно текста и цифр. Делается до договора и без предоплаты: не понравилось - расходимся, вы ничего не должны. Бесплатен именно прототип главной, а не весь дизайн и вёрстка.
Посмотрим на ваше оформление до договора
Оставьте заявку - разберём текущий набор иконок и соберём прототип главной страницы бесплатно.
Получить целевые заявки → Telegram