Супер простое руководство по иконографии

В среднем, сколько времени у вас уходит на разработку собственного значка?

Пара минут? Десять минут? Дольше? Что, если мы покажем вам, как сделать 10 отличных иконок менее чем за 10 минут?

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

Поэтому я решил создать очень простое руководство, которое поможет вам изучить основы иконографии менее чем за 10 минут (я серьезно).

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

Первоначально на создание этого руководства меня вдохновила эта GIF-анимация от Morgan Allan Knutson, показывающая, как создать значок службы определения местоположения за несколько секунд. Я нашел его освежающим, умным и быстрым. Он демистифицирует процесс создания пользовательских значков и показывает, насколько простым он может быть. Значок на самом деле представляет собой геометрическую фигуру, которая может возникнуть в результате комбинации или деформации основных форм, таких как квадраты, треугольники или круги. Эмпирическое правило в дизайне логотипов или иконок — делать вещи простыми.

Цель этой статьи — создать 10 иконок за 10 секунд каждая, используя только простые формы.

Важное примечание: в этом посте мы будем использовать Adobe Illustrator, но вы можете получить те же результаты, используя Sketch или даже Figma. Каждый раз, когда нам нужно добавить или удалить точку на фигуре, мы будем использовать «Инструмент «Перо» (P)». Выбор и перемещение точек будет выполняться с помощью «Инструмента прямого выделения (A)».

Значок глаза

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

Совет: вместо использования белого круга просто вычтите (используя панель Обработки контуров) два круга из круга под каждым из них. Это создает более чистый результат на фоне.

Значок стрелки

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

Значок батареи

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

Совет: поэкспериментируйте с толщиной обводки и отступами, чтобы сохранить хороший визуальный баланс.

Значок маркированного списка

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

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

Значок облака

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

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

Значок воспроизведения вперед

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

Совет: чтобы сделать это еще быстрее, просто начните с треугольника вместо квадрата.

Значок воронки

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

Совет: поместите два квадрата встык и просто растяните самый верхний край по горизонтали.

Значок воспроизведения/паузы

Начните с трех длинных прямоугольников параллельно. Измените форму самого широкого прямоугольника на треугольник.

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

Значок стрелки положения

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

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

Значок положения булавки

Вырежьте круг внутри большего (используя панель Обработки контуров). Перетащите самую нижнюю точку прямо вниз, и заострите образовавшийся угол — переключитесь на «Перо (P)», затем, удерживая клавишу «Shift», нажмите на точку.

Совет: используйте закругленный угол в этой точке опрокидывания, чтобы смягчить внешний вид — отрегулируйте значение «радиуса угла» на панели параметров «Преобразование», когда точка выбрана.

Звуковая иконка

Точно так же, как значок воронки, но с поворотом на 90 градусов.

Совет. Просто скопируйте и вставьте значок воронки и поверните его по часовой стрелке.

Значок волны

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

Совет: закруглите кончики линий, чтобы они выглядели еще более гладкими.

Верхняя икона

Это значок бонуса.

Нарисуйте квадрат достаточно толстым штрихом. С помощью инструмента «Ножницы» отрежьте верхнюю правую и нижнюю левую точки. Это разделит фигуру на две части. Переместите нижнюю половину вверх и поверните все это на 45 градусов против часовой стрелки.

Совет: обратите внимание на толщину линий и пустое пространство внутри логотипа.

Иконка стоит 1000 слов.

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

Таким образом, 10 основных правил иконографии таковы:

• Сделайте его символичным и значимым.
• Вы слышали: будьте проще. Стиль не должен ставить под угрозу читаемость.
• Будьте преднамеренными и продуманными. Подумайте, прежде чем создавать.
• Убедитесь, что он работает в разных размерах.
• Помните об однородности.
• Пожалуйста, только векторы!
• Используйте цвета только тогда, когда это необходимо, и делайте это осторожно.
• Это помогает знать основы геометрии.
• Подумайте о «доступности», чтобы убедиться, что разработанная иконка поможет общему дизайну.
• Иконография — это язык, который должен быть универсальным.
• Бонус: Алфавит — это всего лишь набор из 26 иконок.

Подыграйте и посмотрите, что вы можете придумать менее чем за 10 секунд.

• • •

Дальнейшее чтение в блоге Toptal Design:

• UX электронной коммерции — обзор лучших практик (с инфографикой)
• Важность ориентированного на человека дизайна в дизайне продукта
• Лучшие портфолио дизайнеров UX — вдохновляющие тематические исследования и примеры
• Эвристические принципы для мобильных интерфейсов
• Упреждающий дизайн: как создать волшебный пользовательский опыт