Дата публикации: 20.11.2023
Автор: Юлия Измалкова
Гармония визуала на сайте складывается из множества факторов. Один из них – единообразие иконок. Часто, просматривая сайты, я сталкиваюсь с тем, что иконки в пределах одного блока настолько разные, что за них «цепляется» взгляд, и думаешь уже не о контенте, а о безразличии команды разработчиков к важным деталям.
Почему важным? Иконка – это функциональный элемент, она должна помогать пользователю ориентироваться в контенте и лучше его понимать. Если в иконках разброд, они выполняют свою функцию хуже, внося диссонанс в общее впечатление.
Как сделать иконки дружными:
1. Все иконки едином стиле
Единые элементы – скругления, точки и т.п. Единый стиль заливки – сплошная заливка или линейная иконка. Единый стиль линий – прерывистая или непрерывная. Единая степень детализации – минимализм или реалистичность. Примеры:
Две иконки имеют контейнер – круг, одна нет. Во второй иконке есть линейные элементы, в двух дрегих нет.
Вариант корректировки
2. Все линии одной толщины
В случае, если иконки имеют контуры, все линии этих контуров должны быть одинаковой толщины. Примеры:
Разная толщина линий
Вариант корректировки
3. Все иконки одного веса
Каждая иконка должна полностью занимать отведенное ей пространство и при этом визуально не доминировать над другими. Примеры:Примеры:
Иконки не занимают все пространство фрейма. Правая иконка визуально тяжелее левой и перевешивает всю композицию
Вариант корректировки
4. Единая цветовая гамма
В одном наборе нужно использовать гармоничное цветовое решение для всех иконок. Так, если вы выбрали равномерную заливку фона, то все иконки должны ее иметь. При выборе цветов руководствуйтесь общими правилами – контрастность и сочетаемость. Примеры:Примеры:
Первая иконка с подложкой, остальные без, поэтому у первой цвет контура отличается. У второй иконки градиент, третья получила дополнительный цвет
Вариант корректировки
Сложнее всего подогнать друг под дружку готовые иконки в формате png. У них нельзя поменять толщину линий, относительные размеры объектов и заливку без перерисовки. Поэтому я в своих проектах использую векторные иконки, и привожу их к единой стилистике заранее, до интеграции в макет.
Я либо рисую их с нуля, либо нахожу в интернете и подгоняю. Мои любимые сервисы в этом плане: https://www.freepik.com/ и https://www.flaticon.com/.
