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

иконки — Дизайн на vc.ru

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

18 142 просмотров

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

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

Мне интересна разработка сервисного дизайна, проектирование дизайн-систем и автоматизация дизайн- и бизнес-процессов.

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

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

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

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

Оставлять иконки без фрейма нельзя!

Всегда помещайте иконки во фрейм

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

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

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

Иконка выровнена по визуальному центру. Отступы: слева 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-код иконки, когда все слои объединены.

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

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

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

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

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

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

Material Design Icons Community

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Фон и цвет

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

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

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

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

Констрейнтс

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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 иконок

Спасибо

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

7 принципов дизайна иконок. Создание качественного семейства иконок… | Хелена Чжан

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

 Другие материалы из серии «Иконография»:• Основы иконографии• 5 способов создания значка настроек• Демистификация сеток и ключевых линий значков• Привязка к пикселям в дизайне значков• 3 классических семейства значков 

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

Основная цель значка — быстро передать идею.

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

Вот примерно как они у меня складываются:

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

Некоторые из самых непонятных значков, с которыми мне приходилось сталкиваться, находятся в приложении для фотографии VSCO . Можете ли вы догадаться, что они означают?

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

Со временем абстрактное может стать привычным при многократном использовании. Вот почему автомобильные контрольные сигналы стандартизированы; цель состоит в том, чтобы построить общее понимание. В 1984 году Susan Kare было поручено создать значок для «функциональной» клавиши на клавиатурах Apple. Она пришла к этому абстрактному символу, который также встречается в скандинавских знаках достопримечательностей.

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

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

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

Стрелка — простой, но мощный используемый символ в навигации: знак метро

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

Получив понятный символ, убедитесь, что он читаем.

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

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

Небольшая корректировка приводит к большому улучшению:

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

Карты Google отлично справляются со своими значками общественного транспорта — очень удобочитаемы при очень маленьком размере:

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

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

Точно так же, как типографы делают точную настройку, чтобы создать оптическую иллюзию баланса в шрифте (обратите внимание на смещенные от центра точки на «i» и «j» и на «O») —

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

Лучше.

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

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

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

Мы могли бы сказать более кратко (от Роберта Хайнлайна):

Когда один учит, двое учатся.

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

Просто скажите:

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

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

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

 Примеры принципов семейства иконок Phosphor (отсылка к тому, что мы рассмотрели выше):  • Ясность. Будьте ясны в первую очередь.  Сделать значок узнаваемым и читаемым. Никогда не жертвуйте ясностью того, что представляет значок.  • Краткость. Используйте как можно меньше деталей. Стиль  Phosphor упрощенный. Будьте лаконичны и преднамеренны в каждом штрихе, чтобы передать суть того, что изображается.   • Персонаж. Будьте причудливыми.  Аккуратно добавляйте уникальные детали, чтобы привнести немного тепла и игры в то, что в противном случае могло бы показаться очень строгим. 

 Пример технических правил из семейства значков Phosphor:  •  Используйте холст  48 x 48 пикселей   •  Использовать  смежных штриха , если только разорванные сегменты не помогают для понимания  •  Использовать  прямые сегменты, идеальные дуги и шаг угла 15° , где это возможно  • При необходимости откорректировать кривые  для соблюдения принципов проектирования  •  Использовать  целое, четное числовое приращение  для измерений, где это возможно;  •  Используйте следующие ключевые линии формы   : 28 x 28 пикселей, 25 x 25 пикселей, 28 x 22 пикселей альбомной ориентации, 22 x 28 пикселей портретной ориентации  •  Сохраните  6 пикселей толщиной.  зона