Создайте согласованный визуальный язык, красивый и содержательный
Несколько лет назад я родила ребенка в США и хотела пообщаться по видеосвязи с моей 80-летней бабушкой из Франции. Поскольку она не знала, как выглядит иконка видеокамеры — абстрактное сочетание прямоугольника и треугольника — и рядом со значком не было текстовой метки, она не смогла принять входящий видеозвонок, как и начать новый. Эта ситуация была такой душераздирающей, что в итоге плакал не только мой новорожденный, но и я 😭.
В конце концов моя бабушка встретилась со своей правнучкой лично, но этот опыт научил меня многому. Невозможно открыть приложение или веб-сайт на каком-либо устройстве, если вы не понимаете иконки и не умеете взаимодействовать с ними — а это значит, что спрос безграничен, и умение разрабатывать согласованные эстетичные иконки является по-настоящему ценным навыком.
За годы работы я выработала целую систему рекомендаций и практик, которые сделали меня успешным дизайнером иконок в Adobe. Я создала это руководство, чтобы помочь творческим профессионалам, инженерам и дизайнерам, только начинающим погружаться в эту область.
В первой части, я расскажу о подготовительной работе, необходимой для создания красивых, последовательных иконок. Во второй части мы поговорим о том, как разрабатывать сбалансированные, понятные иконки, которые легко экспортировать и поддерживать.
Подготовка
1. Правильно организуйте свое рабочее место. Выберите подходящий стул, чтобы сидеть на расстоянии вытянутой руки от экрана и не портить осанку.
2. Определитесь с программным обеспечением. Я использую для рисования планшет Wacom со стилусом, работаю в Adobe Illustrator. Вам должно быть комфортно работать, ведь создание иконок занимает много времени.
Изучите типы иконок
Обычно иконки относятся к одной из трех категорий:
- Иконки приложений. Логотипы приложений или другие фирменные визуальные элементы разных размеров и форматов, которые отображаются на экране вашего устройства. При создании таких иконок важно следовать рекомендациям iOS / Android, чтобы их не отклонили на этапе отправки в магазин приложений.
- Системные иконки. Каждая платформа имеет свой собственный набор иконок для таких задач, как, например, навигация. Поскольку пользователи знакомы с формами и метафорами каждой платформы, лучше не изобретать велосипед и придерживаться привычных значков.
- Иконки рабочего процесса. Располагаются внутри приложения (например, на панели инструментов, в списке опций). Они предотвращают нагромождение текста и помогают сохранить единообразный внешний вид интерфейса при локализации контента.
Найдите правильную метафору
Чтобы наполнить иконку смыслом, необходимо сначала понять, как она поможет пользователю успешно выполнить задачу, а затем перевести это действие в визуальную метафору. Поиск подходящей метафоры — процесс, который начинается с исследований, а заканчивается воображением и вдохновением.
Представьте себе, что вы ищете в интерфейсе определенную функцию и не можете ее найти, потому что иконка плохо нарисована или метафора настолько ошибочна или абстрактна, что ее невозможно связать с действием. Иконки всегда должны быть знакомыми и понятными, чтобы людям не приходилось теряться в догадках.
Например, иконки со стрелками приобрели популярность с появлением облачных хранилищ — они помогают быстро дифференцировать, где будет сохранен контент. Но стрелки (и шевроны) также являются универсальными символами, которые обозначают основные направления и технические операции, такие как экспорт файлов. Они различимы даже в небольших размерах. Поскольку стрелки показывают взаимосвязи между элементами, которые можно соединить, выбрать, загрузить или отправить, они быстрее доносят до пользователей, каким будет результат их действий.
Помните, что задача любой иконки — передать максимум информации. Комбинируйте их с осторожностью. Со временем вы сможете создать целую базу знаний о том, как люди воспринимают и применяют иконки.
Старайтесь выбирать понятные метафоры и не используйте знакомые метафоры (например, стрелки) в незнакомых сценариях. Метафоры требуют изучения, а люди точно не хотят тратить на это время, когда они спешат совершить то или иное действие.
Наконец, проведите исследование: чтобы аудитория мгновенно понимала ваши иконки, изучите возможные варианты и проверьте значение метафор на таких сайтах, как Noun Project, Iconfinder или Google Images.
Плашки (и модификаторы) добавляют дополнительный смысл
Старайтесь думать о долгосрочном использовании иконок. Большинство из них будут содержать один основной элемент, но к некоторым могут добавляться специальные плашки, например, для уведомлений внутри приложения. Если вы спланируете это заранее, вам будет проще управлять набором по мере добавления более сложных функций.
Что касается самих плашек, здесь действует принцип “чем меньше, тем лучше”. В первую очередь подумайте о том, где они будут располагаться, и придерживайтесь такого размещения во всем наборе. Определите форму плашки, например, круг, и помните, что иконки становятся нечитаемыми в малых размерах. Цветовой контраст между плашкой и символом внутри нее, а также достаточное количество пустого пространства имеют решающее значение для обеспечения читаемости.
И последнее, что нужно знать о плашках: их можно использовать в качестве самостоятельных модификаторов. Они появляются внутри всплывающих подсказок и панелей инструментов, и информируют пользователей о состоянии элементов, файлов или операционных систем. Эти оповещения должны выделяться, поэтому простота — ключ к успеху.
Форма и красота (да, иконки должны выглядеть хорошо)
Создание иконки предполагает множество сложных операций (объединение, сложение и вычитание составляющих ее фигур) и строгую привязку к опорным точкам (для выравнивания). Очень легко недооценить, сколько времени это займет, особенно если речь идет о большом количестве иконок.
Чтобы сэкономить время в процессе первых итераций, я придерживаюсь подхода "притворяйся, пока не получится”: я рисую фигуры, маскируя все области, которые нужно будет вырезать в дальнейшем. Они выглядят как готовые иконки, но на самом деле это формы, наложенные друг на друга. Такой подход не только позволяет оценить внешний вид значков, прежде чем тратить время на создание финальной версии, но и упрощает получение обратной связи.
Не секрет, что формы, которые встречаются в природе, например, капли, приятны для наших глаз. Но воссоздание их в векторе может оказаться сложной задачей и занять больше времени, чем ожидалось. Они состоят из прямых и изогнутых штрихов, которые необходимо соединить таким образом, чтобы все переходы были максимально плавными. Еще пара часов может запросто уйти на поиск правильных пропорций.
Но не сдавайтесь! Продолжайте попытки и всегда делайте копии формы, потому что одна из первых итераций может оказаться наиболее удачной.
Визуальная согласованность
Поддерживать согласованность в наборах иконок очень важно. Вот несколько лучших практик, которые помогут вам в этом:
- Заранее определите стиль иконок. Продумайте такие характеристики, как радиус скругления углов, размер, цвет, толщина обводки, но также не забудьте о модификаторах и пропорциях.
- Не забывайте о сложных формах. По умолчанию добавьте безопасное пространство (1–2 пикселя) вокруг иконок. Это сделает ваш набор визуально согласованным, даже если простые и сложные формы будут располагаться рядом друг с другом.
- Применяйте фигуры повторно. Используйте имеющиеся формы (стрелки, прямоугольники, знак плюса) вместо того, чтобы создавать новые, которые незначительно отличаются от предыдущих.
.svg)
