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

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

Дизайн иконок

Дизайн иконок

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

Четкость

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

Четкость иконок

Четкость иконок


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

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

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

Понимание иконок

Понимание иконок

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

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

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

Понятные иконки

Понятные иконки

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

Стрелка навигация

Стрелка навигация

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Читабельность иконок в Google Maps

Читабельность иконок в Google Maps

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

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

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

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

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

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

Смещение элементов шрифта

Смещение элементов шрифта

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

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

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

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

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

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

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

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

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

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

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

Картинка корабля

Картинка корабля

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

Иконка корабля

Иконка корабля

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

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

Иконки Телеграма

Иконки Телеграма

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

Детализация иконок

Детализация иконок

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

Детализация иконок

Детализация иконок

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

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

iOS 13 иконки Apple

iOS 13 иконки Apple

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

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

Иконки

Иконки

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

Иконки Apple

Иконки Apple

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

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

Иконки Phosphor

Иконки Phosphor

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

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

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

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

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

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

Иконки Twitter

Иконки Twitter

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

Иконки Sketch

Иконки Sketch

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

Смайлики Freemojis 

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

Android иконки

Android иконки

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

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

Организация

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

Организация иконок в наборе

Организация иконок в наборе

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

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

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

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

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

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

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

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

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

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

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

Инструменты

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

Иконки Material

Иконки Material

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

Font Awesome

Font Awesome

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