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

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

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

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

Привет, меня зовут Андрей Насонов, я 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 иконок

---

Спасибо

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

Графический дизайн иконок и концептов, руководство

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

Подробнее о вакансии здесь  https://papavector.com/vacancy

Вы научитесь:

— размножать иконки по шаблонам:

• editable stroke 
• glyph
• chalk 
• color
• flat color

— сохранять иконки в 5 форматах;

— размножать концепты;

— сохранять концепты.

— размножать брошюру по образцу.

I. Начало работы

1. Скачайте ai файл.

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

2. Следуйте инструкциям в гайде. 

* Вам необходимо пройти полный цикл работы с иконками, концептами  и брошюрой : от размножение в разных стилях по шаблонам до сохранения в 5 форматах ai, eps, jpeg, svg и png.  

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

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

Рекомендации для  успешного прохождения т.з. :

• Ознакомьтесь с примерами работ студии  https://www.iconfinder.com/bsd555   
• Прочитайте статью по покраске иконок https://support.iconfinder.com/en/articles/2620425-colors 
• Узнайте, что является плагиатом в стоковом графическом дизайне.

II. Размножение иконок

Ваша задача:

1.  Переделать четыре иконки в разные стили по образцу (editable stroke, glyph,chalk,color, flat color).
2.  Сохранить иконки в 5 форматах (ai, eps, jpeg, svg, png)
3.  Построение композиции.

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

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

Однобокость иконки — это загруженность деталями иконки с какой-либо стороны. Пример:

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

Ниже приведен пример сета 2*2. Если иконка симметричная, то ее можно ставить в любой угол. 

Размножение по шаблонам

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

1. Шаблон editable stroke 

Шаблон editable stroke  — это линейные иконки, так и остаются в том виде, в котором вы их получили в исходном файле (не разобранные для форматов ai, eps и jpeg).

Для этого шаблона нужно: 

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

 

2)  При сохранении соло иконок, для форматов ai, eps и jpeg добавляем полосочку 

 

Пример, как должен выглядеть общий сет с заголовком, и соло иконок: 

 

 2. Шаблон glyph 

Шаблон glyph — это выдавливание разобранного контура.

Для этого шаблона нужно: 

1) Сделать шаблон по видео “Шаблон glyph”

2) Только для общего сета покрасить одну иконку в два цвета (но потом соло иконки сохраняются черным все. Цветная иконка только в сете)

Пример

3) Округлить внешние углы. Вот пример округления внешних углов. Красным помечены – все, которые нужно округлить (внешние углы, которые выпирают из иконки). А зеленым — те углы, которые не нужно округлять, они внутри иконки).

3. Шаблон chalk 

Шаблон chalk — это имитация мела. 

Для этого шаблона нужно: 

1) Сделать шаблон по видео “шаблон chalk”

2) Сделать подложку (только для AI, Eps, Jpeg) просто прямоугольником. Цвет подложки #262626. Для форматов Png и Svg — подложки не нужно, там белое на белом.

Пример

3) Убрать колючки. острые колючки — это торчки, которые сильно искажают форму, например, вот так. Их нужно аккуратно убрать, переместив точки или постирать

4) Кисть Feather

 4. Шаблон color 

Покраска color — это покраска всего сета в одном стиле с использованием бликов и теней. 

Для этого шаблона нужно: 

1. Подобрать референсы по смыслу темы и выбрать палитру.
2. Палитра должна быть реалистичной. Не нужно красить малиновым деньги, или зеленым собак.
3. Палитра не должна быть грязной или сильно яркой. Она должна привлекать потенциального покупателя к сету, но и не быть агрессивной. 
4. Покрасить весь сет в 3-4 цвета + цвета теней или бликов.
5. Можно менять цвет обводки.
6. Желательно не оставлять неокрашенные части иконки.

Пример:

Чего следует избегать: 

1. Не делайте кашу из цветов, лучше меньше, но аккуратно подобранная палитра, чем много оттенков.
2. Все иконки должны быть окрашены одной палитрой, а не каждая иконка со своими цветами.
3. Издалека покраска тоже должна восприниматься привлекательно, должны быть видны тени и блики. Попробуйте примерить на какой-либо сайт ваши окрашенные иконки. 

 5. Шаблон flat color 

flat color — это покраска, как color, только без линий обводки. Получается, что вы красите только контуры, а обводку нужно убрать

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

Пример иконок 

Сохранение иконок

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

По итогу должна получиться следующая структура папок. 

В основной папке Insurance-and-protection-icons у вас будет 5 папок с названием темы и названием шаблонов (в них сохраняются пары файлов форматов eps и jpeg).  

И отдельная папка Insurance-and-protection-icons-AI-PNG-SVG в которой вы повторяете всю структуру 5 папок, где будут файлы в форматах AI-PNG-SVG

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

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

Очень важен порядок файлов! 

Это значит, что с именем Insurance-and-protection-icons-editable-stroke-1 должен идти общий сет, потом с именем Insurance-and-protection-icons-editable-stroke-2 должна идти иконка, которая в сете в левом верхнем углу, дальше с именем Insurance-and-protection-icons-editable-stroke-3 должна идти иконка, которая в сете в правом верхнем углу и т.д.

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

Все форматы вы сохраняете вручную.

Все файлы: 

• цветовой режим RGB 
• разрешение среднее 150

AI формат нужно выбрать Иллюстратор 10

 

Формат eps — 10 EPS

 

 Формат jpeg 

Формат svg 

Форматы png

Сохранение editable stroke: 

AI, Eps, Jpeg

• иконки не разбираются
• общий сет с заголовком
• соло иконки с подписью (под подписью имеется ввиду — полоска «Editable stroke»)
• цвет линий иконок #333333
• размер артборда 5000*5000 для сета и для соло
• каждая иконка сгруппирована

Png и Svg

• иконки разобраны (проверить с помощью вектор инспектор про, он должен показывать 0)
• сет без заголовка
• соло иконки без подписи
• цвет контуров #333333
• размер артборда 4000*4000
• каждая иконка сгруппирована

! Оценивается размещение сета и соло иконок на артборде. 

!! Следите за расстояниями, отступами, как в заголовках, так и самого сета.  

Сохранение glyph:

AI, Eps, Jpeg, Png и Svg

• иконки разобраны (проверить с помощью вектор инспектор про, он должен показывать 0)
• сет без заголовка
• соло иконки без подписи
• цвет контуров #000000
• размер артборда 5000*5000 (для AI, Eps, Jpeg). Размер артборда 4000*4000 (Png и Svg).
• каждая иконка сгруппирована

! Оценивается размещение сета и соло иконок на артборде. 

!! Следите за расстояниями, отступами, как в заголовках, так и самого сета. 

Сохранение chalk: 

• сет без заголовка
• соло иконки без подписи

AI, Eps, Jpeg

• иконки разобраны (проверить с помощью вектор инспектор про, он должен показывать 0)
• цвет контуров иконок белый
• цвет подложки #262626
• кисть Feather
• убраны колючки, и мусор мелкий
• размер артборда 5000*5000 для сета и для соло
• каждая иконка сгруппирована

Png и Svg

• иконки разобраны (проверить с помощью вектор инспектор про, он должен показывать 0)
• цвет контуров иконок белый
• подложку не нужно, получается белая иконка на пустом артборде
• кисть Feather
• убраны колючки, и мусор мелкий
• размер артборда 4000*4000 для сета и для соло
• каждая иконка сгруппирована

! Оценивается размещение сета и соло иконок на артборде.  

!! Следите за расстояниями, отступами, как в заголовках, так и самого сета. 

Сохранение color:

AI, Eps, Jpeg, Png и Svg

• иконки разобраны (проверить с помощью вектор инспектор про, он должен показывать 0)
• сет без заголовка
• соло иконки без подписи
• размер артборда 5000*5000 (для AI, Eps, Jpeg). Размер артборда 4000*4000 (Png и Svg).
• каждая иконка сгруппирована

! Оценивается размещение сета и соло иконок на артборде. 

!! Следите за расстояниями, отступами, как в заголовках, так и самого сета. 

 Сохранение flat color:

AI, Eps, Jpeg, Png и Svg

• иконки разобраны (проверить с помощью вектор инспектор про, он должен показывать 0)
• сет без заголовка
• соло иконки без подписи
• размер артборда 5000*5000 (для AI, Eps, Jpeg). Размер артборда 4000*4000 (Png и Svg).
• каждая иконка сгруппирована

! Оценивается размещение сета и соло иконок на артборде.  

!! Следите за расстояниями, отступами, как в заголовках, так и самого сета. 

III. Размножение концептов

Ваша задача:

1. Переделать апп скрины : перекрасить исходные апп скрины, создать из исходных двух апп скринов пару, перекрасить пару.
2. Сохраните концепты по инструкции.
3.  Построение композиции.

В исходном файле найдите два апп скрина из 3 страниц каждый.

1 апп скрин 2 апп скрин

1. Составьте пару (самостоятельно соедините эти два апп скрина, чтобы сделать 1 сет из 6 страниц — 3 страницы сверху, 3 страницы снизу). И перекрасьте пару в одну покраску (сделать цвет обводки как в верхнем апп скрине и поменять цвета).

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

3. Из синих тоже сделайте двойку, как в примере.

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

5. Сделайте сет из иконок из исходных апп скринов, и точно такой же сет из голубых апп скринов. Добавьте заголовок “Future office concepts” по ширине сета.

 

VI.  Построение композиции

Ваша задача:

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

   Особенности:

1.  Страница брошюры-симмиляра — составить композицию из иконок первой страницы и можно добрать из 4 страницы исходника. Перенести заголовок с первой страницы
2.  Страница брошюры-симмиляра — вставить иконки и заголовок с исходной 2 страницы. Перенести заголовок со второй страницы
3.  Страница брошюры-симмиляра — вставить иконки и заголовок с исходной 3 страницы. Перенести заголовок с третьей страницы.
4.  Страница брошюры-симмиляра — вставить иконки и заголовок с исходной 4 страницы (если останутся лишние иконки с исходника — можно в композицию первой страницы вставить).Перенести заголовок с четвертой страницы.

 

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

Пример готовой работы: 

   -исходная брошюра

 -переделанная брошюра

 

Сохранение концептов

После того, как вы закончили с размножением концептов, приступаем к сохранению.

По итогу должна получиться следующая структура папок. 

Future-office-app-screens: 

1. сохраняются просто исходные апп скрины и пара из них 
2. иконки и текст должны быть разобраны (вектор инспектор про должен показывать 0). Сами подложки страничек — не нужно разбирать
3. размер артборда 3000 по меньшей стороне
4. сохранить в 5 форматах, с такими же параметрами, как при размножении иконок

Future-office-app-screen-similars: 

1. сохраняются просто голубые апп скрины и пара из них 
2. иконки и текст должны быть разобраны (вектор инспектор про должен показывать 0). Сами подложки страничек — не нужно разбирать
3. размер артборда 3000 по меньшей стороне
4. сохранить в 5 форматах, с такими же параметрами, как при размножении иконок

Future-office-app-screen-concepts: 

1. это именно иконки с подписями из исходных апп скрина и сета
2. можно подтянуть подпись ближе к иконке
3. расположить иконки на артборде, так чтобы иконка занимала 70% пространства
4. для форматов Ai, Eps, Jpeg  — сохраняется соло иконка с подпись и подпись перекрашивается в цвет обводку. Иконка не разбирается. Текст — разбирается. Размер артборда 5000*5000

1. для форматов Svg и Png — соло иконки без полосочки. И все разобрано. Размер артборда 4000*4000

Future-office-app-screen-concept-similars

1. это именно иконки с подписями из переделанных голубых апп скринов и сет
2. можно подтянуть подпись ближе к иконке
3. расположить иконки на артборде, так чтобы иконка занимала 70% пространства
4. для форматов Ai, Eps, Jpeg  — сохраняется соло иконка с подписью и подпись перекрашивается в цвет обводки. Иконка не разбирается. Текст — разбирается. Размер артборда 5000*5000

1. для форматов Svg и Png — соло иконки без полосочки. И все разобрано. Размер артборда 4000*400.

Brochure-similars

1. Сохранить брошюру-симмиляр в отдельную папку. Папку назвать “Brochure-similars”
2. Разобрать брошюру ( текст и иконки — должны быть контурами, никаких линий обводки).
3. Брошюру-симмиляр сохранить отдельно в тех же форматах, что и апп скрины. Размер артборда 2600px по высоте (а по ширине — сохранить соотношение сторон).  

 

Отправка тестового задания

Чтобы отправить  тестовое задание, перейдите по ссылке https://papavector.com/vacancy , выберите раздел Отдел графики → вакансия — Графический дизайнер, симилярист → Отправить заявку → Прикрепить архив.

Тестовое присылайте в одном файле ZIP, если размер файла более 50 Мб — в поле “комментарий” указывайте ссылку на файл на гугл/яндекс диске. Также в  поле  “комментарий” укажите, пожалуйста, ссылку на портфолио и сколько времени в часах/минутах заняло у вас выполнение всего тестового задания.

 

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

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

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

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

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

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

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

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

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

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

Лучшие практики дизайна иконок

Несмотря на то, что иконки 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-дизайнер, ваша основная цель должна состоять в том, чтобы как можно четче передать значение ваших иконок, внося при этом некоторую креативность, когда это возможно.

IBM Design Language – значки пользовательского интерфейса

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

Библиотека значков IBM (16px, 20px)

Библиотека значков IBM (24px, 32px)

Мастер значков пользовательского интерфейса IBM

Значки пользовательского интерфейса IBM (.

svg)

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

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

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

Избегайте случайных десятичных точек в координатах x и y.

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

Значок должен оставаться внутри заполнения.

Избегайте размещения части значка в области заполнения.

Расширяйте значки до отступов, если требуется дополнительное пространство.

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

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

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

Не используйте формы ключей, которые не отражают реальную форму метафоры.

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

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

Стилистические условности пиктограмм IBM создают значимую связь с нашим шрифт IBM Plex®.

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

Закругленные наружные части с внутренним углом 90°

Квадратные клеммы

Характеристики плиты

Отличительные особенности наконечников

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

Соблюдайте толщину обводки 2 пикселя.

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

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

Не делайте значки визуально тяжелее остального набора.

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

Использовать иконку как есть.

Не создавать размерную иконку.

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

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

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

Подровняйте кончики стрел.

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

Используйте углы 45° для равномерного сглаживания.