Как подобрать иконки, которые поддерживают стиль проекта

Это небольшой графический элемент, который визуально передаёт определённое действие, объект, функцию или идею. В веб-дизайне иконки используются как функциональные элементы (например, корзина, поиск, меню, телефон) и как визуальные акценты, которые дополняют текстовые блоки, подчёркивают смысл и поддерживают общий стиль проекта.

В этом уроке разбираем виды иконок, правила их использования и принципы создания гармоничной иконографики в дизайне. Рассмотрим различия между плоскими, 3D и реалистичными иконками, научимся подбирать подходящий стиль, работать с SVG-форматами и искать иконки для проектов.

Материалы урока:

Flaticon - flaticon.com

Thenounproject - thenounproject.com

Bootstrap Icons (плагин Фигмы) - cсылка

Iconify (плагин Фигмы) - cсылка

Существует три основных вида иконок: плоские иконки, 3D-иконки, реалистичные иконки.

Плоские иконки — наиболее универсальный вариант. Они могут использоваться практически в любых проектах и хорошо подходят для современных интерфейсов.

Плоские иконки могут быть: залитыми, контурными.

Контурные иконки состоят из линий без сплошной заливки. При использовании таких иконок важно следить за толщиной линий. Если в одной группе используются иконки с разной толщиной обводки, они могут выглядеть несочетаемо.

Залитые иконки имеют заполненные формы. Они могут быть выполнены в разных цветах, но при этом должны сохранять единый стиль внутри одной категории элементов.

3D-иконки имеют объём, перспективу, тени, освещение и ощущение пространства. Они могут выглядеть более эмоционально и современно, но подходят не для каждого проекта.

Например, 3D-иконки хорошо работают в технологичных, лёгких или более неформальных проектах.

При этом для серьёзных сфер, где важно передать надёжность и экспертность, такой стиль может быть неуместным.

Реалистичные иконки — это изображения, которые повторяют внешний вид настоящего объекта.

Такой стиль был особенно популярен в дизайне сайтов в 2000-х годах. Например, это могли быть вырезанные фотографии реальных предметов, используемые как небольшие графические элементы. Сегодня такой подход считается устаревшим и используется значительно реже.

Важно понимать, что реалистичный объект и иконка — это разные вещи.

Иконка должна быть небольшим элементом, который выполняет определённую функцию или поддерживает текст. Если изображение слишком большое, детализированное и больше похоже на фотографию объекта, это уже скорее иллюстрация или изображение, а не иконка.

По назначению иконки можно разделить на два типа: функциональные, декоративные или поддерживающие.

Функциональные иконки помогают пользователю выполнять действия.

Например:

• корзина в интернет-магазине;
• телефон для обратного звонка;
• письмо для отправки сообщения;
• иконки социальных сетей.

Такие иконки должны быть максимально понятными и привычными. Пользователь должен сразу понимать их значение без дополнительного объяснения.

Такие иконки используются рядом с текстом, чтобы визуально усилить информацию. Например, в блоках с преимуществами можно использовать небольшие графические элементы, которые помогают быстрее воспринимать содержание.

Главное, чтобы они соответствовали смыслу текста и общей стилистике проекта.

Чтобы иконки выглядели гармонично, необходимо соблюдать несколько правил.

Если используются контурные иконки, у них должна быть одинаковая толщина обводки.

Даже небольшая разница может быть заметна и создавать ощущение несогласованности. Одна иконка с более тонкими линиями или большим количеством деталей может выбиваться из общей системы.

В одном блоке не стоит смешивать разные стили. 

Например, ошибкой будет использовать:

• одну залитую иконку;
• одну контурную;
• одну с дополнительными декоративными элементами.

Они будут восприниматься как разные элементы из разных наборов.

При этом это не означает, что во всём проекте обязательно должен использоваться только один стиль. Например, в одном блоке могут быть залитые иконки, а в другом — контурные. Главное — сохранять единство внутри одной группы элементов.

Все иконки внутри одного блока должны иметь одинаковый визуальный вес. Важно учитывать не только фактический размер, но и то, сколько пространства занимает сама форма.

Например, квадратная иконка может выглядеть крупнее, чем иконка в форме буквы или тонкого объекта, даже если их размеры одинаковые. Поэтому иконки нужно выравнивать не только по размерам, но и по визуальному восприятию.

Маленькая иконка с большим количеством деталей плохо воспринимается. На небольшом размере лишние линии начинают создавать визуальный шум.

Лучше выбирать:

• простые формы;
• минимальное количество деталей;
• понятный силуэт.

Если иконка очень детализированная, её лучше использовать в большем размере.

На популярных источниках для поиска иконок
Лучше искать и использовать икнки именно SVG-формата, потому что это векторная графика. Преимущества SVG:

• иконки не теряют качество при масштабировании;
• их можно изменять в Figma;
• можно менять цвет;
• можно редактировать отдельные элементы.

Плагины в Фигме
Они позволяют искать и добавлять иконки прямо внутри редактора.

Перейти к следующему уроку