Создаем набор иконок: практические советы

Безусловно, в сети можно найти тысячи бесплатных и платных наборов иконок на любой вкус (и в конце я поделюсь с вами парочкой проверенных ресурсов), но все же в какой-то момент вы можете столкнуться с необходимостью создать собственные кастомные иконки. 

Что такое иконка / пиктограмма

Иконки — простые формы, которые помогают нам ориентироваться в цифровом и физическом мирах. 🌐

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

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

Кроме того, в отличие от текста, пиктограммы универсальны и понятны каждому, независимо от культуры и места проживания.

Другой показательный пример — дорожные знаки. Они информируют водителей о действующих ограничениях скорости 🚓, одностороннем движении и т.д. всего за пару секунд.

Что же отличает хороший знак от плохого?

Чтобы это понять, нам необходимо углубиться в науку. Наука о знаках — семиотика. Она охватывает всё: от смайликов до эмодзи 🤓 🔬. Исследователь Чарльз Сандерс Пирс разработал треугольную модель, которая показывает, что делает знак знаком:

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

Объект — концепция или идея, к которой отсылает знак. В нашем случае это снижение скорости и остановка.

И, наконец, интерпретант — картина, которая возникает в сознании пользователя при виде знака. Водитель видит знак и понимает, что ему нужно остановиться перед стоп-линией.

При создании иконок важны все три составляющие. Для начала нам нужно решить, каким будет знак: иконический (представление на основе сходства, например, знак заправки рядом с ней), индекс (причинно-следственная связь, например, дым — огонь) или символ (произвольный конвенциональный знак, например, круг, обозначающий радиацию).

Подумайте, какие действия пользователя вы хотите инициировать, разместив определенный знак в определенном месте.

Приступаем к работе 👷‍♀️👷‍♂️

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

Итак, мне поручили разработать набор иконок для некоммерческой организации, которая занимается вопросами устойчивого развития. Я понимал, что иконки будут использоваться преимущественно на сайте и в социальных сетях.

Первый шаг: Составить список действий 🗒

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

Ищем концепции

Со списком в руках я начал активно искать в Google референсы и текущие тренды. Обычно для каждого пункта я сохраняю на жестком диске 2–3 изображения объекта в разных ракурсах, поскольку на данном этапе я еще не знаю, какая деталь может пригодиться мне в дальнейшем. Поскольку Google является крупнейшей поисковой системой в мире, полученные изображение более менее отражают общие представления пользователей и должны быть понятны большинству из них.

Второй шаг: Сохранить референсы в отдельную папку 🗂

Наконец-то, начинаем делать наброски! Я предпочитаю использовать бумагу в клетку или с точками. Шаблоны с точками можно скачать и распечатать здесь.

Третий шаг: Приготовить бумагу с направляющими ✏️

Настраиваем сетку и определяем размеры иконок

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

Четвертый шаг: Настроить сетку для переноса набросков ️📏

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

Например, Google использует для своих системных иконок сетку 24 × 24.

Я остановился на трех сетках — все 32 × 32 px.

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

(2) Во второй сетке акцент сделан на круглых формах и общем визуальном весе.

(3) Третья сетка нужна для доработки мелких деталей. Она содержит дополнительные направляющие для уточнения повторяющихся линий и форм.

Выбираем стиль иконок

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

Пятый шаг: Выбрать стиль️ для иконок и придерживаться его 💅

Вот какие разновидности контурных иконок существуют:

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

Ошибки, которых следует избегать

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

Придерживайтесь правил, но знайте, когда от них можно отойти 📐

Ширина обводки

Ширина обводки должна быть последовательной. Я часто начинаю с одного значения, например, 1px, а затем по необходимости постепенно добавляю новые значения, например, 0,5px или 2px, чтобы создать иерархию внутри фигур. Важно не столько количество пикселей, сколько их соотношение, поэтому старайтесь придерживаться пропорции 0,5 : 1 : 2. Хуже всего начать смешивать их слишком рано и создать хаос, как на картинке ниже.

Скругление углов

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

Ключевые формы

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

Заключение

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

Нужно поставить доступность иконок во главу угла и неустанно их тестировать ♿️

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

Вот какие иконки у меня в итоге получились:

Любимые ресурсы с бесплатными иконками (наконец-то!)

• Noun project: коллекция содержит более 5 миллионов иконок. Можно использовать бесплатно, но с указанием авторства.

• Material Design Icons: если вы любите продукты Google, вам точно знакомы эти гармоничные простые иконки. Плагин от Google и Icons8 позволяет получить доступ к библиотеке, содержащей более 35 тысяч иконок.

• Flaticon: еще один впечатляющий ресурс с миллионами бесплатных иконок. Обычно я обращаюсь к нему, когда ищу значки в иллюстративном стиле, но здесь также можно найти и контурные иконки.

• Iconmonstr: Я большой поклонник независимых проектов, и именно поэтому решил добавить один из них в свой список. Эта коллекция включает более 5 тысяч достаточно разнообразных иконок. Отличный вариант, если вам надоели привычные ресурсы, которыми пользуются все.

Спасибо за внимание!