7 принципов дизайна иконок для создания профессиональных наборов

В одном из разделов нашего блога вы можете найти и скачать бесплатные иконки сгруппированные по десяткам разных тематик и стилей. А сегодня мы решили поделиться с вами полезными советами по созданию собственных материалов. По аналогии со статьей про основные виды кнопок пользовательского интерфейса, думаем, вам будет полезно посмотреть наиболее важные признаки качества и ключевые характеристики дизайна иконок: лаконичность, читабельность, простота, выравнивание и др. (всего 7 штук).

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

Четкость

Основная задача той или иной иконки – оперативно передавать информацию.

Панель приборов автомобиля Prius Prime

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

Ясность этих символов уменьшается по шкале так:

Сложно разобраться с иконкой, в которой используется незнакомый вам смысл. Сигнальная лампочка, отвечающая за «ремень безопасности» (3-я слева) вполне очевидна. А вот значок «система управления с электроприводом» (крайний справа) более запутан.

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

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

Стрелочка – важный и самый популярный знак в системе навигации:

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

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

Читабельность

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

Многим пользователям программы Amtrak  будет непросто расшифровать иконку приложения «вокзал» (самая первая), так как ее сделали достаточно мелкой. У Transit аналогичная проблема — их «расписание» имеет слишком маленькое расстояние между изображениями папки и зажима:

Небольшая правка значительно улучшает ситуацию (ниже увеличен отступ для зажима):

Работая с несколькими фрагментами/объектами внутри иконки, обязательно оставляйте пространство между ними. Тонкие линии (и чем их больше) утяжеляют рисунок, и его сложнее расшифровать.

Авторы карт Google Maps проделали отличную работу в этом направлении — все символы читабельны даже при маленьком размере экрана:

Выравнивание

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

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

Аналогично тому, как работники типографии вносят мелкие правки в структуру шрифта дабы создать оптической иллюзию баланса (точки выходят за пределы центра над буквами «i» и «j», а буква «О» немного выходит за границы):

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

Вывод: не ориентируйтесь лишь на одни цифры, доверяйте своим глазам.

Лаконичность

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

Обучая других тому, что знаете, вы углубляете свое понимание темы.

Однако можно сказать буквально то же самое в сжатой форме:

Когда один преподает, учатся двое.

Красиво и ёмко!

Сервис Material наглядно демонстрирует данный принцип в своей документации по юзабилити. Вместо использования:

Есть вариант пиктограммы для сайта попроще:

Краткость просто необходима при создании иконок, ведь очень часто приходится работать с экранами маленьких размеров. Старайтесь подобрать правильное количество деталей для своего рисунка, не стоит ими напрасно злоупотреблять.

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

В некоторых случаях интерфейс требует более красочного стиля иллюстраций. Например, детализированные значки на вебсайте Yelp – отличный способ показать популярные запросы поиска еды/ресторанов. Креветка, изображенная на иконке тайской кухни, просто восхитительна:

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

Согласованность (последовательность)

Чтобы вся коллекция иконок выглядела гармонично, нужно придерживаться единой стилистики при ее создании. До появления операционной системы iOS 13 иконки Apple содержали символы с разной шириной линий, размерами и заливкой:

Взгляните на пример выше. Не выглядят ли некоторые объекты тяжелее остальных?

Каждый из значков архива обладает неким «визуальным весом», что может быть определен следующими параметрами: форма, размер, наполненность и толщина штрихов. Использование одинаковых характеристик в рамках одной коллекции иконок и обеспечивает ее целостность.

Недавно компания Apple скорректировала свои наработки и презентовала набор SF Symbols, отличное дополнение к шрифту San Francisco. SF Symbols тяготеет к более графическому стилю. Включает в себя несколько разных вариантов реализации тех или иных символов. Причем от значка к значку, их контуры и заливки стали гораздо гармоничнее.

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

Набор Phosphor насчитывает более 700 элементов. Несмотря на то, что каждый символ имеет индивидуальную форму, все они одинаково «весят» и отлично сочетаются друг с дружкой:

Индивидуальность

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

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

Значки Twitter мягкие, легкие и четкие:

Картинки из редактора Sketch изысканные и воздушные (визуально напоминает красочные иконки Icojam):

Смайлики из Freemojis просто очаровательны:

Соответствующие коллекции для Android создают самые разнообразные настроения на вашем экране. Здесь и абстракция, и пиксели, и пузырьки, и неон:

Простота использования

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

Организация

Следите за чистотой/порядком в основном файле, давайте элементам четкие названия и разместите их так, чтобы можно было легко найти. Определитесь со способом систематизации объектов: алфавитный порядок, размер или тип файла?

Документирование

Сформулируйте ключевые положения вашего архива иконок.

Для примера рассмотрим принципы Phosphor:

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

Список технических требований для него:

• Размер элемента 48×48 пикселей.
• Выравнивание по центру 1,5px.
• Закругленные концы.
• Рисуйте сплошные линии (т.к. ломаные обычно сложные для восприятия).
• Используйте прямые элементы, идеальные дуги и 15° угловые приращения.
• Если нужно, корректируйте изгибы.

По возможности делайте общедоступную онлайн-документацию.

Тестирование

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

Инструменты

А если у вас есть возможность, реализуйте дополнительные инструменты/сервисы для упрощения работы с вашим набором. Так, иконками Material легко пользоваться благодаря специальной онлайн библиотеке. Она позволяет легко отыскать нужный вам объект, загружать разные темы оформления (стили), выбирать форматы, а также цвета и размеры материалов:

Создатели коллекции Font Awesome хоть и пренебрегли некоторыми принципами, однако сделали свои иконки максимально доступными для рядовых пользователей. Они предложили несколько методов работы: с помощью библиотеки, CDN, шрифта иконок и SVG. Еще один крутой инструмент здесь – публичное обсуждение, помогающее определить самые востребованные для внедрения объекты + информация о тех, что еще находятся в процессе разработки.

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