Статья
Иконки и иллюстрации на сайте: когда помогают
Иконки помогают быстро найти нужное: корзину, телефон, меню. Но когда значок стоит у каждого абзаца, а иллюстрации нарисованы в пяти разных стилях, сайт выглядит дёшево. Разбираем, где иконки и иллюстрации действительно работают, как подобрать единый стиль и где брать их легально.
Когда иконки помогают
- Навигация и действия. Корзина, поиск, меню, телефон, «закрыть» — значки, которые человек узнаёт за долю секунды.
- Короткие списки преимуществ. Три-шесть пунктов с иконками читаются быстрее, чем сплошной текст, — если каждая иконка действительно что-то значит.
- Контакты и соцсети. Значки мессенджеров и карт понятнее подписей.
Когда мешают
- Иконка у каждого абзаца. Глаз перестаёт их замечать, а страница выглядит перегруженной.
- Значок без подписи для непонятного действия. Шестерёнка, три точки, стрелка в квадрате — что они делают на вашем сайте, догадается не каждый.
- Иконки вместо смысла. Значок «ракета» рядом со словом «быстро» ничего не добавляет к слову.
Правило: если иконку можно убрать и ничего не потеряется — уберите.
Единый стиль
Иконки из разных наборов сразу видны: одни контурные, другие залитые, у одних толстая линия, у других тонкая, где-то скругления, где-то острые углы. Выберите один набор и держитесь его:
- одна толщина линии;
- один тип — контурные или залитые;
- одинаковые скругления углов;
- один размер в одинаковых местах.
Где взять
- Открытые наборы — Lucide, Material Symbols, Phosphor и другие: сотни иконок в одном стиле, лицензии разрешают использовать их на коммерческих сайтах. Условия лицензии всё равно стоит прочитать.
- Платные наборы — когда нужен стиль, которого нет у других.
- Нарисовать свои — для бренда, у которого есть своя графика. Дорого, но такие иконки становятся частью фирменного стиля.
Нельзя брать иконки и иллюстрации с чужих сайтов: это такие же объекты авторского права, как фотографии. О последствиях — в статье «Фото для сайта».
Формат и размер
- Формат — SVG. Векторные иконки остаются чёткими на любом экране и весят меньше картинок.
- Размер. Иконка в тексте — под высоту строки, иконка-кнопка на телефоне — с областью нажатия не меньше 44×44 пикселей, даже если сам значок меньше.
- Цвет. Иконки берут цвет текста, а акцентный цвет оставляют для действий — подробно о палитре в статье «Цвета для сайта».
- Подпись для незрячих. У иконки-кнопки без текста должно быть скрытое название — «Корзина», «Закрыть меню», — иначе экранный диктор прочитает просто «кнопка».
Иллюстрации
Иллюстрации хорошо работают там, где нечего фотографировать: IT-продукты, абстрактные услуги, объяснение процесса по шагам, пустые состояния вроде «в корзине пока ничего нет». Они задают характер сайта — строгий, дружелюбный, игривый.
Но иллюстрации не заменяют фото там, где важно доверие: людей, интерьер и готовые работы показывайте настоящими снимками. И снова про единый стиль: три иллюстрации от разных художников на одной странице выглядят как сборник клипартов. Иллюстрации, сгенерированные нейросетью, проверяйте особенно внимательно — в них легко заметить лишние пальцы и странные детали.
Как это делаем мы
Графику подбираем на этапе дизайна вместе с палитрой и шрифтами: если у бренда есть свой стиль — продолжаем его, если нет — предлагаем. Сколько стоит дизайн и от чего зависит цена, разобрано в статье «Сколько стоит дизайн сайта».