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

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

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

Подробнее о вакансии здесь  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 Мб — в поле “комментарий” указывайте ссылку на файл на гугл/яндекс диске. Также в  поле  “комментарий” укажите, пожалуйста, ссылку на портфолио и сколько времени в часах/минутах заняло у вас выполнение всего тестового задания.

 

Почему «хорошие / плохие» руководства по дизайну не всегда подходят для создания иконок

Посты в Instagram или статьи в дизайнерских блогах представляют примеры «правильного» и «неправильного» способа проектирования. Хотя есть надежные и проверенные паттерны, которые зачастую работают лучше, чем другие, все же не стоит говорить продуктовым дизайнерам (особенно начинающим): «Это единственно верный способ разметки формы, карточки, использования цвета или типографики» и т. д.

Дизайн – это не универсальное решение.

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

«Цвет автомобиля может быть любым, при условии, что он черный»

— Генри Форд

Использовать правильные иконки не так просто

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

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

Скриншот поста, посвященного правильным / неправильным иконкам

Скриншот поста, посвященного правильным / неправильным иконкам

Уникальные визуальные идентификаторы бренда

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

Коллекция иконок разных брендов

Использование иконографики с кнопками

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

Пример навигации Notion

Пример навигации Facebook

Креативные решения

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

Скриншот поста, посвященного правильным / неправильным иконкам

Что означает эта иконка?

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

Что, если вы соедините иконки панели навигации с метками, а затем удалите метки после того, как клиент достиг контрольного показателя вовлеченности? То есть вы начинаете с использования меток, и после того, как убедитесь, что пользователь достаточно знаком с вашим продуктом, вы запускаете событие, скрывающее метки, и вуаля – вы удовлетворены обоими вариантами использования.

Как насчет демонстрации меток при наведении курсора или активном состоянии? Вы можете отображать метку иконки при тапе / клике по ней, давая этой кнопке текущий контекст.

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

Суть в том, чтобы искать креативные альтернативные решения проблем интерфейса, а не ограничиваться выбором «правильного/ неправильного варианта».

Скриншот поста, посвященного правильным / неправильным иконкам

Девайсы и контекст

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

Пример адаптивных иконок от UXMag. com

Обмен знаниями с дизайн-сообществом

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

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

Спасибо за прочтение, друзья!

---

Перевод статьи ryanhouk.medium.com

Icon Design Trends 2023

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

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

Важность значков

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

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

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

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

Как создать значок

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

1. Исследования — ваш лучший друг : Важно быть уникальным в сети. Убедитесь, что значок, который вы создаете, не имеет такого же дизайна, как другие, поскольку мы не хотим, чтобы вы имели дело с неправомерными действиями с товарными знаками и плагиатом.
2. Доска настроения : Подобно дизайну логотипов и дизайну веб-сайтов, вам нужна доска настроения, чтобы обмениваться идеями. Допустим, вы занимаетесь садоводством. Вы хотите показать своим клиентам влияние садоводства на окружающую среду на эргономику с помощью инфографического дизайна. Таким образом, вы добавляете стили значков, иллюстрации, цветовые схемы и типографику, которые вдохновляют вас на создание значков, чтобы лучше объяснить воздействие на окружающую среду.
3. Icon = Concept : В приведенном выше примере создается инфографика, показывающая влияние садоводства на окружающую среду. Так что ваша иконка будет именно такой. Это могут быть декорации или садовые работы для вашей иконы. Ваша иконка будет процветать, если у вас есть концепция дизайна.
4. Начать проектирование : Теперь вы можете приступить к созданию дизайна самой иконки. Добавьте последние штрихи, например, выберите один из трендов ниже и убедитесь, что это просто. Он также должен иметь правильный размер. Проверьте варианты ниже для справки.

Маленькие значки:

• 12 x 12 пикселей
• 16 х 16 пикселей
• 24 х 24 пикселей
• 32 х 32 пикселей
• 48 х 48 пикселей

Средние значки:

• 64 x 64 пикселей
• 96 х 96 пикселей
• 128 x 128 пикселей
• 256 x 256 пикселей

Крупные значки:

• 512 x 512 пикселей
• 1024 x 1024 пикселей

5. Файл имеет значение : Убедитесь, что вы сохранили окончательный рендер с надлежащим сжатием файла. Обычно он имеет формат .ico, поэтому он подходит для значка в Интернете.

Тенденции дизайна иконок 2022

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

• Иконки, нарисованные от руки/каракули
• Иконки с перспективой (глубина)
• Иллюстрационные иконки
• Абстрактные иконки
• Значки толстой линии
• Значки приложений
• 3D-иконки
• Иконки эмодзи
• Значки с приглушенными цветами
• Градиентные иконки
• Значки стиля линии
• Круглые значки
• Парящие значки

Иконки, нарисованные от руки/каракули

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

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

Найдите вдохновение в нарисованных ниже рисунках.

Консервативный дизайн бесплатных иконок от Emmanuel Creations

Консервативный, бесплатный дизайн иконок от luiz otavio I DESIGN

Дизайн иконок для ресторанов и ресторанов от typeo1978

Иконки с перспективой (глубина)

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

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

Найдите свой свежий значок ниже.

Bold Icon Design by Melanie

Elegant, Business Icon Design by nafizrahat

Modern, Marketing Marketing Marketing Icon Design by galin ganchev

Illustration Icons

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

Найдите идеальный иллюстрированный дизайн ниже.

Элегантный, лучший дизайн иконок от an-illust

Элегантный, лучший дизайн иконок от Raoul Camion

Игривый, компьютерный дизайн иконок от INKKO

Абстрактные иконки 9010 9

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

Ознакомьтесь с идеями абстрактного дизайна ниже.

Красочные, яркие развлекательные иконки Дизайн от nas. ok

Красочные, развлекательные развлекательные иконки Дизайн от nreimer

Красочные, квадратные развлекательные иконки Дизайн от julia.gnedina

Толстые значки

Далее у нас есть иконки с толстые линии. Он отличается от следующего значка в виде линии ниже из-за, как следует из названия, толщины линий.

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

Получите идеи из рисунков с толстой линией ниже.

Смелый, серьезный дизайн иконок от julia.gnedina

иконки для функций продукта и гарантии для нового веб-сайта от TTK

Retro Icons от Abiyoso28

9010 8 Значки приложений

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

Профессиональный, элегантный дизайн иконок для магазинов для компании в США от Dedy Christian

Элегантный, современный дизайн иконок для винодельни от tervezoarts 03

3D Icons

В этом 2023 году основное внимание уделяется 3D-дизайну из-за его характеристик, бросающих вызов перспективе (анаглифы и действия) и представлений в реальном мире. Теперь поэкспериментируйте с уникальной цветовой палитрой с помощью цветовой психологии или цветового круга, и вуаля!

Проверьте свои уникальные 3D-значки ниже.

Набор гибких и плавных 3D иконок Максимилиана Чанба

Иконография Hyper63 Виктора Корчука

Swile — набор статических иконок Александра Букши

90 108 Emoji Icons

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

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

Яркая, игривая, иконка такси Дизайн дизайнера

Элегантная, игривая, телевизионная иконка Дизайн tapstudio Иконки с приглушенными цветами

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

Профессиональный, серьезный, деловой дизайн иконок от tapstudio

Элегантный, игривый, полиграфический дизайн иконок от Clara Bird

Серьезный, современный, сельскохозяйственный дизайн иконок от Elena 9

Grad ient Icons

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

В отличие от прошлого года градиенты сочетались с 3D-дизайном. В 2023 году они стоят особняком и готовы придать вашему бренду новое звучание. Ознакомьтесь со следующими градиентными рисунками ниже.

Профессиональный, элегантный дизайн иконок для магазинов от BlackK@t

Дизайн маркетинговых иконок от TechWise

Современный, престижный, дизайн иконок для магазинов от Synthesis

Иконки в стиле линий 90 109

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

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

Bold, Company Icon Design by Sofia Pereira

Modern, Company It Company Design Icon Company by luutrongtin89

Professional, Bespoke Architecture Icon Design by luutrongtin89

9 0108 Круглые значки

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

Найдите свой круговой дизайн ниже.

Bold, фирменная иконка, дизайн typeo1978

ресторан, иконка, дизайн, BOXagency

Playful, клубная иконка, дизайн, GEK (agentfortysix)

Парящие значки

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

Взгляните на дизайн парящих значков ниже для вдохновения.

Кнопка цветового режима: Переход от тьмы к свету и от тьмы к свету, Леви Джонс

Создай свою модную иконку Design Today

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

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

Удачного проектирования!

Узнайте больше о дизайне здесь:

• 12 трендовых идей дизайна визитных карточек
• Истории в Instagram: творческое руководство
• 18 дизайнов подписи электронной почты для лучшей узнаваемости бренда

Написано DesignCrowd во вторник, 26 июля 2022 г.

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

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 пикселя для закругленных форм.