Иконки дизайн: Иконки графический дизайн — 47,125 бесплатных иконок

Дизайн система: Иконки / Хабр

Подготовка иконок к работе в дизайн системе

Кто я и почему об этом пишу?

Привет, меня зовут Андрей Насонов, я UI/UX дизайнер работаю руководителем дизайн отдела в компании которая создаёт веб-сервисы и помогает компаниям из разных отраслей масштабировать свой бизнес. Я занимаюсь дизайном с 2008 года, начинал как графический дизайнер, но с 2015 года работаю веб дизайнером. Мне интересна разработка сервисного дизайна, проектирование дизайн систем, и автоматизация дизайн и бизнес процессов.

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

---

Помещайте иконки во фреймы

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

Допустим, у нас три иконки: 22x15px, 18x20px и 10x5px. Каждая из них должна быть во фрейме 24x24px.

Оставлять иконки без фрейма нельзяВсегда помещайте иконки во фрейм

Экспортировать иконки нужно также во фрейме.

Важно! Экспортировать нужно именно иконку во фрейме, а не слой иконки. После чего помещать ее уже в контейнер 24x24px.

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

Иконка выровнена по фактическому центру. Отступы: слева и справа по 10px. Но из-за особенностей формы иконки возникает ощущение, что она сдвинута влевоИконка выровнена по визуальному центру. Отступы: слева 12px, справа 8px. Иконка специально сдвинута вправо, чтобы визуально казалось, что иконка располагается по центру

---

Компонент из фрейма с иконкой

Создайте компонент из фрейма с иконкой.

Компонент из фрейма с иконкой

Это поможет вам быстро заменить одну иконку на другую, использовав функцию «Instance».

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

Замена иконок с помощью функции «Instance»

Иконки лучше всего именовать на английском. Если вы скачали иконку, а у нее уже есть название на английском — не переименовывайте ее.

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

Заодно и новые слова на английском выучите если у вас с ним беда, как и у меня. 😄

---

Хранение иконок

Статья 224, лишение свободы…….. ладно 😄

Один проект может содержать иконки разных размеров. Например, стандартные 24x24px, 16x16px или 20x20px для элементов меньшего размера.

Основные иконки 24x24px мы храним в артборде “Icons 24”. Остальные иконки размер которых больше или меньше 24px храним в “Other Icons”. Обычно их не очень много.

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

---

Фон и цвет

Чтобы при выделении компонентов с иконкой в настройках Fill не отображались лишние цвета — удалите у компонента белый фон, даже если он отключен.

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

Удаление фона и применение стиля цвета

Стиль цвета нужен чтобы при замене через инстанс вы не забывали перекрашивать иконку в нужный цвет.

Советую выбрать броский цвет, который вы очень редко используете на проекте. Оставляя иконку черной или серой есть вероятность что вы будете забывать ее перекрашивать. Я выбрал коричневый.

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

---

Констрейнтс

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

Важно! Сonstraints нужно настраивать именно у слоя с иконкой, а не у всего компонента.

Настройка constraints

---

Массовые действия с иконками

Все вышеописанные действия можно проделать с несколькими иконками сразу.

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

---

Мусор в иконках

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

Например, Material Design иконки имеют белый фоновый слой.

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

В случае с одноцветной иконкой — все элементы должны быть объединены в один слой.

После того, как вы объединили слои, не забывайте применять “Outline Storke” к объединенной фигуре.

Объединение иконки в один слой

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

Так выглядит SVG код иконки когда компонент иконки имеет несколько слоев и они не объединены в один. Код получился очень длинным и имеет целых 7 параметров “Fill” для разных элементов иконки. Так делать нельзя.

Размер файла иконки 1318 байт

А так выглядит SVG код иконки когда все слои объединены. Код гораздо меньше и имеет всего 2 параметра “Fill”. Один для фона контейнера, другой для цвета иконки. Так делать можно.

Размер файла иконки 803 байта

После экспорта иконки вы можете ее дополнительно сжать используя этот сайт.

После сжатия код иконки стал еще меньше, но внешний вид иконки не изменился.

Размер файла иконки 588 байт

---

Ресурсы с иконками

Ну и напоследок несколько ресурсов откуда можно брать иконки.

Material Design Icons Community
Огромный набор иконок, который содержит официальные иконки Material Design, а также иконки созданные сообществом по гайдам Material Design. На мой взгляд, это лучший набор на данный момент. Он покрывает 90% моих потребностей.
В Figma есть специальный плагин.

Material Design Icons
Официальные иконки Material Design. К сожалению, на этом сайте иконки имеют довольно странные тэги. Из-за этого некоторые иконки нереально найти через поиск. Да и файл иконки содержит в себе лишний слой с белым фоном, который на мой взгляд, не нужен.
Плагин в Figma.

Boxicons
Есть хорошие альтернативы иконкам из предыдущих ресурсов. Но не все иконки pixel perfect. Так же имеется плагин в Figma.

Feathericon
Хороший набор качественных outline иконок. Иконки сделаны контуром с обводкой, что позволяет масштабировать и изменять толщину линий самих иконок.
Плагин в Figma

IBM icons
Иконки от IBM созданные самой компанией и сообществом.

Remixicon
Большое количество хороших Fill и Outline иконок

---

Спасибо

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

основные тенденции / Тренды / Сайты и биржи фриланса. Обзоры фриланс бирж.

Новости. Советы. Фриланс для начинающих. FREELANCE.TODAY

Автор: Елизавета Гуменюк

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

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

Давайте посмотрим, что нового и популярного в дизайне иконок нас ждет в 2021 году!

Рисованные значки

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

Лучшая часть рисованных стилей заключается в том, что вам не нужно рисовать их самостоятельно.

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

Иконки с глубиной

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

Такие стили довольно забавны и временами используют намеки на приходящие и уходящие тенденции, такие как удлиненные тени.

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

Иконки с состояниями наведения

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

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

И не пытайтесь что-то усложнять. Замысловатый значок может потеряться при наведении курсора. Данный тренд лучше всего подходит для простых пар иконок.

Упрощенные иконки

Даже веб-сайты и дизайны, которые ранее использовали сложные стили в иконках, переходят на более упрощенные варианты.

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

Линейные иконки с цветными фигурами

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

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

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

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

Абстрактные формы иконок

Не уверены, какой значок представляет ваш контент? Ответом может быть абстрактная форма.

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

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

Основные цвета

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

Эта тенденция дизайна иконок использует красный, синий, зеленый и желтый цвета (наряду с фиолетовым и оранжевым) для создания базового набора цветовых правил. Что заставляет этот стиль работать, так это акцент на цвете, чтобы привлечь внимание к маленьким элементам на экране. Основные цвета также будут выделяться среди всех «материальных» ярких цветов, которые доминировали в палитрах в последнее время.

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

Иконки с фоновыми значками

Некоторые трендовые иконки имеют свои собственные иконки. Серьезно!

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

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

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

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

Двухцветные иконки

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

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

Когда дело доходит до дизайна, выберите основной цвет для большей части иконки, а затем используйте дополнительный цвет, чтобы подчеркнуть элемент значка. Подумайте об использовании основного цвета для 70-80% дизайна и вторичного цвета для всего остального.

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

Иконка «Стенография»

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

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

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

Яркий цвет

Выбор ярких цветов имеет большое значение во всех аспектах дизайна. То же самое и с иконами. Яркий цвет — это заманчивый способ привлечь внимание к иконке.

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

• В качестве фона с белым или черным значком в линейном стиле
• Для полноцветных элементов иконок с более реалистичным внешним видом
• Для элементов иконок с более плоским, градиентным или супер ярким дизайном

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

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

Иконки в логотипах

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

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

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

Круги

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

Отчасти влияние круга на дизайн иконок может быть связано с некоторыми рекомендациями, изложенными Google в отношении Material Design. Все эти круглые кнопки идеально подходят для нажатия на мобильных телефонах. Та же философия применима и к дизайну иконок. (Подумайте, как часто значок является элементом, который можно коснуться или щелкнуть.)

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

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

Дизайн иконок в линейном стиле

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

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

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

Простые элементы и представления

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

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

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

Иконки с градиентами

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

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

Фокус на простой раскраске

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

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

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

Иконки в стиле приложений

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

Иконки в стиле приложений имеют свой собственный стиль, который включает в себя:

1. Квадратная форма
2. Закругленные края
3. Цветной фон (обычно один цвет)
4. Простая форма внутри значка
5. Большой контраст между цветом значка и фона
6. Ни текста, ни надписей

Толстые, равномерные штрихи

Популярны не только линейные значки, но и значки с толстыми штрихами.

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

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

Плоские иконки остаются популярными

Хотя большая часть пристального внимания к плоскому дизайну испарилась, дизайн иконок все еще довольно плоский (или, по крайней мере, почти плоский).

Это, вероятно, связано с супер-простой природой плоского дизайна и идеей, что этот внешний вид может довольно легко интегрироваться с рядом других стилей.

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

Иконки-эмодзи

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

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

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

Как создать хорошую иконку

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

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

• Начните с сетки
• Создавайте с геометрией
• Создайте уникальную форму
• Оставьте иконкам много места
• Придерживайтесь цветов своего бренда
• Будьте последовательны
• Создавайте из расчета на самый маленький размер, который вам нужен
• Не украшайте слишком

Вывод

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

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

Всем успешной работы и творчества!

Источник

Руководство для начинающих [+ Ресурсы]

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

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

В этом руководстве мы научим вас создавать собственный набор иконок. Мы расскажем:

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

Давайте углубимся.

Почему значки важны?

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

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

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

Передовой опыт в области дизайна иконок

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

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

1. Определите, какой цели будут служить ваши значки.

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

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

2. Используйте сетку.

Когда придет время рисовать, начните с сетки. Сетка обеспечивает согласованность формы, размера и размещения объектов с вашими значками. Ваш процесс проектирования будет намного более простым, если все размеры будут правильными.

Источник изображения

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

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

3. Используйте простые значки.

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

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

Источник изображения

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

Сравните это с четким, простым значком:

Источник изображения

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

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

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

4. Сделайте ваши иконки узнаваемыми.

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

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

Источник изображения

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

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

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

Источник изображения

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

Источник изображения

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

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

5. Стремитесь к визуальной согласованности.

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

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

Источник изображения

Этот значок, установленный Phosphor Icons, с другой стороны, имеет очертания, закругления и незаполненный. Эти значки предназначены для обозначения функций чата, и вы заметите единообразие дизайна: все они имеют одинаковый размер, толщину линии, форму края и цвет.

Источник изображения

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

• Старайтесь по возможности использовать целые числа, чтобы избежать проблем с визуализацией. Это относится к углам, скруглению углов и толщине линии.
• Избегайте рисования фигур и кривых вручную в пользу точных инструментов (например, инструмента кривой в Adobe Illustrator). Глаз может обнаружить, если форма значка хоть немного отличается.
• Для углов используйте 45 градусов (или кратные 45 градусам, например 90 градусов или 22,5 градуса).
• Совместите штрихи значка с пиксельной сеткой, чтобы избежать размытости при масштабировании изображения.
• Ограничьте количество толщин линий до двух, если возможно, до трех максимум. Любое большее может быть запутанным и чрезмерно подробным.

6. Добавить индивидуальность.

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

Если ваши значки являются частью узнаваемого бренда вашего веб-сайта, они должны выглядеть только как ваши значки. Давайте взглянем на некоторые иконки для навигационного приложения Waze.

Источник изображения

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

Иконки Google, напротив, проще. Упрощенный дизайн в конечном итоге функционален и прост, но цвет помогает различать разные категории мест.

Источник изображения

Карты Waze и Google Maps похожи по своей природе — обе предоставляют пользователям указания. Хотя их услуги пересекаются, их значки уникальны для их бренда и, следовательно, узнаваемы.

7. Проверьте свои значки.

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

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

Ресурсы по дизайну иконок

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

1. Material Design

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

2. Streamline Icons

Streamline Icons содержит более 30 000 готовых значков, доступных для загрузки. Их бесплатный пакет «Essential Icons» содержит часто используемые символы для функций электронной почты и музыки, а их платный «Ultimate Pack» включает нишевые значки, такие как символы путешествий и экологии.

3. Nucleo

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

4. Аниматиконы

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

5. Бесплатные ресурсы по дизайну

Бесплатные ресурсы по дизайну предлагают различные пакеты значков для загрузки и использования на вашем веб-сайте, например значки панели вкладок iOS. Некоторые наборы бесплатны, некоторые платны, и вы можете фильтровать значки по их совместимости с вашим любимым программным обеспечением для дизайна, таким как Illustrator, Figma или Sketch.

Иконки — необходимые элементы вашего сайта.

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

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

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

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

Создайте свой первый набор иконок.

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

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

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

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

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

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

Основные элементы значка

Размер

Согласованность является ключом к значкам, и все ваши значки должны быть одинакового размера при их создании. Во-первых, вам нужно убедиться, что вы знаете, как построена ваша сетка (кратно 8 или 10?). Оттуда ваш базовый размер значка должен напрямую относиться к этому. Итак, если у вас есть сетка, основанная на 8-ках, вы бы хотели строить на 16, 24 или 32.

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

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

Значок магазина с размерами 24 x 24, 40 x 40 и 80 x 80

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

Цвет

Для значков продуктов используйте 1 цвет: черный. Что-то большее, чем это, и ваши компоненты станут слишком сложными и трудными для использования другими дизайнерами. Для маркетинговых иконок вы можете использовать два цвета, если это важная часть вашего бренда, но лично я считаю, что иконки должны быть одного цвета. Все, что имеет 3 или более цветов, является иллюстрацией, а не значком.

Слева: это точечный рисунок. Посередине: иконка с перспективой. Справа: плоский значок.

Сетки

Сетка пикселей — это основная сетка, использующая наименьшее приращение: пиксель. При создании значков вы всегда хотите выровнять объекты по пиксельной сетке, особенно по прямым линиям. Но вы можете создавать другие фигуры на пиксельной сетке (и если вы используете Figma, вы уже делаете это автоматически). Вы хотите строить вещи на пиксельной сетке не только потому, что это будет лучше отображать, но и потому, что это сделает вашу жизнь проще. Равномерное размещение элементов намного проще, когда вы используете сетку. Это поможет вам оставаться в соответствии с вашим размещением, и в целом ваши значки будут выглядеть лучше. Вы можете легко увидеть в Figma разницу между чем-то, что находится «в пикселях» и выключено.

Слева: на пикселе. Справа: выключенный пиксель.

Мне нравится строить себе сетку перед тем, как начать. Вот мои настройки в Figma.

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

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

Визуально доминирующий объект должен быть центрирован как по вертикали, так и по горизонтали.

Доминирующий объект (прямоугольник) находится в центре

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

Обводки и заливки

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

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

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

Расстояние между штрихами должно по возможности отражать толщину штриха

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

Я не рекомендую делать значки с обводкой размером менее 10 пикселей (при толщине обводки 1-2 пикселя). Их будет очень трудно разобрать.

Выбор стиля

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

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

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

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

• Uber
• Google
• Apple
• Airbnb
• Square

Рисование иконок

Геометрические фигуры

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

Эта резиновая уточка состоит из кругов (и одного прямоугольника со скругленными углами).

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

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

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

Естественные формы

Рисовать более естественные формы в Figma очень просто. Вы можете либо использовать традиционный метод рисования кривых точка за точкой, либо использовать превосходный инструмент Figma для закругления углов точки. Мне нравится рисовать все точки в виде прямых линий, а затем скруглять углы с помощью инструмента «Радиус угла». Этот инструмент очень полезен для создания органических, сбалансированных форм. Поскольку углы Figma настраиваются автоматически, вы можете перемещаться по этим точкам, и углы будут подстраиваться под вас.

Углы/Соединения

Существует несколько вариантов углов: скошенные (квадратные), скошенные и закругленные. Я настоятельно рекомендую вам придерживаться одного стиля для вашего набора иконок.

Радиус угла

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

Большой образец концентрических радиусов в этом портфеле

Любая промежуточная точка на пути может быть скруглена с помощью свойства Угловой радиус в Инспекторе. Если вы выбираете весь путь, он скругляет все углы в одинаковой степени. Если вы перейдете в режим редактирования, вы можете выбрать отдельные точки и округлить их по отдельности.

Заглушки

Заглушки могут быть круглыми или квадратными. Придерживайтесь одного варианта.

Объекты с заливкой

Если для ваших значков требуются объекты с заливкой внутри их основных форм (например, окно в доме), в идеале вам следует сохранить обведенные фигуры в обведенных значках. И залитые объекты залитыми значками. Когда у вас нет места для фигур с обводкой, вы хотите использовать фигуры с заливкой, которые пропорциональны вашим обводкам. Например, если у вас толщина обводки 2 пикселя, вам не нужны заполненные фигуры размером более 4×4 пикселя.

Метафора

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

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

Перспектива

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

Верхний ряд: плоский. Нижний ряд: перспектива.

Введите (избегайте!)

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

Подсказки

Логические операции

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

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

• Union : Union объединяет выбранные фигуры в логическую группу. Если объекты перекрываются, внешний путь новой фигуры состоит из комбинации путей ее подслоев за вычетом любых перекрывающихся сегментов. Затем штрих будет применен к этому внешнему пути, игнорируя любые сегменты пути, которые перекрывают друг друга.
• Вычитание : Вычитание противоположно объединению. Вычитание удаляет площадь фигуры или набора фигур из базовой фигуры. Сплошным является только нижний слой формы, остальные вычитаются из него.
• Пересечение : Пересечение создает логическую группу, форма которой состоит только из перекрывающихся частей ее подслоев.
• Исключить : Исключить — это противоположность пересечения. Exclude показывает только области своих подслоев, которые не перекрываются.

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

Векторная сеть

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

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

Организация

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

Для таких значков может потребоваться несколько слов, например, поварская шапка.

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

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

Когда у вас есть один и тот же значок с вариантами, вот как мне нравится с ними обращаться.

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

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

Слева: кофе/поглаживание. Справа: кофе/заполненный

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

Первоначальный значок слева был бы «щитом». Затем слева направо: «щит/доллар», «щит/евро», «щит/фунт», «щит/иена», «щит/плюс» 9.0036 Управление вашими активами

Когда вы закончите со своими значками, вы хотите, чтобы они были как можно более чистыми для наилучшего возможного экспорта. Используйте логические операции, чтобы упростить себе работу (помните нашего друга Union?). Избегайте лишних линий или форм. Убедитесь, что все ваши линии попадают в кадр. Абсолютно стоит попросить другого человека просмотреть все ваши значки и дважды проверить их аккуратность.

Figma великолепна, потому что поощряет сотрудничество и прозрачность. Что касается значков, может возникнуть соблазн предоставить всем вашим дизайнерам доступ к редактированию, чтобы они могли добавлять новые значки. Я рекомендую собирать значки по отдельности, проверять их и добавлять самостоятельно, когда они соответствуют стандарту. Предоставления вашим коллегам доступа к просмотру (и доступа к вашей библиотеке) достаточно, чтобы вовлечь их в то, что вы делаете, не заканчивая библиотекой и файлом cattywampus. Некоторые из ваших коллег могут захотеть создать разные версии одного и того же значка (например, в разных цветах или с разными именами). Это часто происходит, когда кто-то связывает значок с концепцией или продуктом. Вы никогда не захотите иметь более одной версии каждой иконки в своей библиотеке. Используйте описание компонента для этих имен. Ваши коллеги-дизайнеры должны настраивать цвета значков в своих отдельных файлах, а не в главном. Поверьте мне, вам придется время от времени вносить изменения в эти значки, и вы не хотите делать это более чем в одном месте. Форматы файлов имеют ключевое значение, когда вы готовы экспортировать значки. Если вы предоставляете значки партнерам, не входящим в вашу команду дизайнеров или инженеров, вы, вероятно, предоставляете им файлы .png. Экспортируйте в 1-кратном, 2-кратном и 3-кратном увеличении для разных устройств. Для разработки и дизайна вы часто будете экспортировать файлы .svg, которые редактируются в программах для дизайна и рисуются в браузере с помощью кода при отображении онлайн в вашем приложении или на сайте. При экспорте SVG вам понадобится как можно более чистый код. Еще одна веская причина для выбора Figma — сверхминимальный экспорт SVG. Поскольку они оптимизированы, это устраняет необходимость дальнейшей оптимизации в будущем. Прочтите эту статью, чтобы узнать больше.

Передача ваших значков в руки другим

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