О важности гайдлайнов в дизайне иконок

Всем привет! Я Алёна Лагойкина, дизайнер в AGIMA. Хочу рассказать вам о роли иконок в улучшении пользовательского опыта. Они служат визуальными подсказками, которые быстро передают информацию и направляют пользователей к ключевым действиям. При добавлении новых элементов на сайт важно поддерживать единый визуальный стиль, который будет перекликаться с фирменным стилем всего сайта.

Любой продукт старается говорить с пользователем. Для этого мы пишем понятные тексты, продумываем сценарии и правила взаимодействия. Иконки — это тоже часть коммуникации. Чтобы весь продукт оставался целостным и не менялся от страницы к странице, дизайнеры пишут гайдлайны, где прописаны правила для визуальной коммуникации. В этой статье я хочу рассказать как определять такие правила для создания иконок.

Иконки, как и любая другая часть интерфейса, не существуют в вакууме. Прежде всего нужно понять, в какой части продукта иконки будут существовать.

Я разделяю для себя два типа иконок:

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

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

Так что прежде чем создавать пак иконок, вы должны определить их тип. А еще — задать основные размеры.

Для этого нужно сопоставить фрейм будущей иконки и ту часть интерфейса, где она будет. Фрейм должен быть кратен 4 и иметь форму квадрата. Получается, стандартный размер иконки может быть 12х12, 20х20, 32х32 и так далее. Чаще всего на одном проекте от трех до пяти размеров таких иконок. В начале работы можно отмечать места в интерфейсе, где потом будут иконки.

С помощью чек-листа проверим, всё ли готово, чтобы продолжить работу:

Создавая новую иконку, держите в голове базовые принципы работы с ней. Это нужно, чтобы не терять единообразия.

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

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

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

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

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

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

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

Взаимосвязаны ли иконки между собой по визуальному стилю?

Понятны ли иконки на уровне смысла?

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

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

P. S. Иногда мы показываем примеры классных иконок в телеграм-канале нашей дизайн-команды. Если нужно вдохновение — подписывайтесь.