Как рисовать иконки

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

Иконка или значок (от англ. icon) — это элемент графического интерфейса, который представляет объект или функцию.

Навигация

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

Привлечение внимания

Значки акцентируют внимание пользователя на важных и интересных элементах дизайна.

Информативность

Иконки передают сообщение или информацию и упрощают ее восприятие.

Преодоление языкового барьера

Иконки — универсальные символы, которые понятны людям любой культуры.

Конверсия

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

Структурирование информации

Иконки структурируют контент страницы и экономят визуальное пространство.

Значки можно классифицировать по функциям (брендовые, навигационные), по тематике набора (хобби, маркетинг, наука, социальные сети, бизнес). Мы рассмотрим классификацию по стилю:

Линейные или контурные иконки

Они состоят из линий и контуров. Отличаются простотой, часто имеют толстые плавные линии.

Глифы или иконки с заливкой

Данный тип иконок — это монохромные иконки, которые состоят из простых форм. Есть как контур, так и заливка.

Цветные иконки

Это контурный значок с цветной заливкой внутри (не монохромной).

3D иконки или объемные

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

Нарисованные от руки

Эти иконки создаются при помощи ручных инструментов (карандаш, маркер) и далее переводятся в цифровой формат.

Простые элементы

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

Сочетание контурных иконок и иконок с заливкой

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

Размер

Размер иконки определяется общим стилем вашего продукта и размером ключевых его компонентов (кнопки, поля ввода). Значки должны соотноситься с другими элементами или быть их частью, например, частью кнопки. Во многих системах по умолчанию используется размер — 24 пикселя, он подходит для экранов разных устройств (мобильные телефоны, планшеты, компьютеры). Если вы создаете пак иконок, все значки должны быть одинакового размера.

Цвет

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

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

Цветом 2024 года стал 13-1023 Peach Fuzz (Персиковый пушок).

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

Кроме того Pantone представил 5 оттенков, которые дополнят цветовые палитры будущего года и добавят гармонии. Кстати, цвета вдохновлены миром природы.

Сетка

Сетка — инструмент для создания гармоничной, пропорциональной, идеальной иконки.

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

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

Штрихи и заливки

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

Выбор стиля

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

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

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

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

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

Понятность

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

Лаконизм

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

Размер элементов

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

Метафора

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

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

Единый стиль

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

Уникальность

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

1. Сетка

Первый этап включает в себя создание пространства для работы и полей (область, которая останется незаполненной — No Go Zone). Рисовка иконки начинается с определения основной фигуры и ориентации ее в пространстве при помощи пиксельной и оптической сеток, о которых мы говорили выше.

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

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

Диагонально ориентированные иконки выравниваются по окружности, вписанной в рабочую область.

2. Простые геометрические формы

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

3. Важность цифр

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

4. Углы

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

5. Кривые

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

6. Толщина линий

Наиболее подходящее значение для толщины линий — 2 пикселя. Ее цель — обеспечить соподчиненность и разнообразие, но не нарушить целостности набора иконок. Толщина линий более 3 пикселей может привести к потери этой целостности. Использование линий толщиной 2 и 4 пикселя поможет легко масштабировать иконки из одной в другую.

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

7. Детали и украшения

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

«Делайте первоначальные наброски на бумаге, мозг сам начнет генерировать идеи, в этот момент не нужно стремиться к совершенству — самый лучший набросок можно довести до ума в графическом редакторе», — Зейнеп Кинли

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

«Создание скетчей и эксперименты являются важной частью любого процесса проектирования, в том числе и в дизайне иконок. Экспериментируя с композицией, стилем, цветами и содержанием, вы будете двигаться в более верном направлении, чем если бы вы пытались сразу же решить поставленную задачу», — Доминик Фласк

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