Графика на сайте - это не украшение, а способ быстрее объяснить смысл. Хорошая иконка экономит слова, хорошая иллюстрация передаёт настроение бренда и помогает показать то, что сложно сфотографировать. Но именно на графике чаще всего видно, что сайт собран наспех: иконки из разных наборов, случайные картинки, тяжёлые файлы.
Когда нужны иконки
Иконки хорошо работают там, где человек быстро сканирует страницу: список преимуществ, этапы работы, контакты, элементы интерфейса вроде корзины, поиска и меню. Они помогают глазу зацепиться за пункт и понять его до прочтения текста. Но иконка должна быть однозначной. Лупа - поиск, телефонная трубка - звонок. А абстрактная «лампочка» рядом с пунктом «индивидуальный подход» ничего не объясняет, это просто шум.
Единый стиль обязателен
Самая частая ошибка - смешение иконок из разных наборов: одни контурные, другие залитые, третьи с разной толщиной линий и скруглениями. Даже неспециалист чувствует, что что-то не так. Правила простые:
- один набор иконок на весь сайт, например Lucide, Phosphor или Heroicons;
- одинаковая толщина линии и одинаковый размер в одном блоке;
- один или два цвета из фирменной палитры;
- иконка всегда сопровождается подписью, кроме самых очевидных случаев.
Иллюстрации вместо фото
Иллюстрации уместны, когда предмет услуги нематериален: программное обеспечение, консалтинг, финансы, IT-поддержка. Сфотографировать «оптимизацию процессов» невозможно, а нарисовать схему или сцену можно. Но если у вас есть реальные объекты, люди и продукты, фотографии почти всегда сильнее - им больше доверяют. Для ремонта, ресторана или салона красоты иллюстрации вместо фото выглядят как попытка что-то скрыть.
Бесплатные стоковые иллюстрации
Популярные бесплатные наборы с плоскими человечками удобны, но их используют тысячи сайтов. Такой сайт выглядит как шаблон и не запоминается. Если иллюстрации важны для бренда, лучше заказать небольшой собственный набор из 5-10 сцен в едином стиле. Это стоит меньше, чем кажется, и сразу выделяет вас среди конкурентов.
Помните и о тёмной теме и контрасте. Иконка, нарисованная тёмно-серой линией, на тёмном фоне просто исчезнет, а светлая иллюстрация с белым фоном превратится в яркий прямоугольник. Если сайт поддерживает тёмный режим, графику нужно проверить в обоих вариантах. Для SVG-иконок проще всего задавать цвет через currentColor - тогда они автоматически берут цвет текста.
Форматы и скорость
- иконки и простые иллюстрации - в SVG: они лёгкие и чёткие на любом экране;
- сложные иллюстрации с текстурами - в WebP или AVIF;
- иконки лучше встраивать прямо в код или подключать только используемые, а не весь шрифт иконок целиком;
- у декоративных изображений пустой alt, у смысловых - понятное описание.
Иконочный шрифт на сотни символов ради десяти иконок - типичная причина лишних килобайт и мигания при загрузке. Современный подход - отдельные SVG-компоненты, которые попадают на страницу только там, где нужны.
Проверка перед запуском
Перед запуском сайта пройдитесь по всем страницам и задайте себе три вопроса. Понятна ли каждая иконка без подписи или подпись есть? Все ли изображения выглядят как одна семья? Не тормозит ли страница на мобильном из-за графики? Если на все три ответ «да, всё в порядке», графика работает на сайт, а не против него.