Иконки для проекта: Иконки Project — скачивайте бесплатно в PNG и SVG — Независимое театральное объединение "Зрительские симпатии"

Содержание

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

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

16 555 просмотров

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

Привет, меня зовут Андрей Насонов, я UI/UX-дизайнер, работаю руководителем дизайн отдела в Elonsoft. Мы создаём программные продукты и помогаем компаниям из разных отраслей масштабировать свой бизнес.
Я занимаюсь дизайном с 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 байта

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

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

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

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

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

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

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

Линейные иконки запуска на белом фоне. Концепция запуска проекта векторное изображение ©Pixelalex 349337158

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

Изображения

ВидеоРедакционныеМузыка и звуки

Инструменты

Для бизнеса

Наши цены

Все изображения

ВойтиЗарегистрироваться

Скачайте это изображение,

зарегистрировав аккаунт

Уже есть акаунт? Войти

Я принимаю условия Пользовательского соглашенияПолучать новости и спецпредложения

Линейные иконки запуска на белом фоне. Запуск проекта. съедобный инсульт

— Вектор от Pixelalex

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

Войти

Та же серия:

Информация об использовании

Вы можете использовать это роялти-фри векторное изображение «Линейные иконки запуска на белом фоне. Концепция запуска проекта» в личных и коммерческих целях согласно Стандартной или Расширенной лицензии. Стандартная лицензия охватывает различные варианты использования, включая рекламу, UI-дизайн, упаковку продуктов, и допускает печать до 500 000 копий. Расширенная лицензия предполагает все варианты использования, что и Стандартная, с правом на безлимитную печать, а также позволяет использовать скачанные векторные файлы для сувенирной продукции, перепродажи товаров и бесплатного распространения.

Это стоковое векторное изображение масштабируется до любого размера. Вы можете купить и скачать его в высоком разрешении до 5000×5000. Загружен: 1 мар. 2020 г.

Depositphotos

О фотостоке
Наши планы и цены
Решения для бизнеса

Блог Depositphotos
Реферальная программа
Программа API
Вакансии
Новые изображения
Бесплатные изображения
Регистрация поставщика
Продавайте стоковые фото

English
Deutsch
Français
Español
Русский
Italiano
Português
Polski
Nederlands
日本語
Česky
Svenska
中文

Türkçe
Español (Mexico)
Ελληνικά
한국어
Português (Brasil)
Magyar
Українська
Română
Bahasa Indonesia
ไทย
Norsk
Dansk
Suomi

Информация

Часто задаваемые вопросы
Все документы

Доступно в
Доступно в
Bird In Flight — Журнал о фотографии

Контакты

+49-800-000-42-21
Свяжитесь с нами
Отзывы о Depositphotos

You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today. <span :class=»$style.nojs» v-html=»noJsMessage»></span>

Главная страница блога

— Блог The Noun Project

Коллекция иконок и фотографий для Хэллоуина

Джереми Эллиотт | 7 октября | Креативное вдохновение, графический дизайн, популярные

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

Как использовать иконки в дизайне: лучшие практики UX и UI

Джереми Эллиотт | 7 сентября | Креативное вдохновение, графический дизайн, популярные

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

Поддержка для Украины

Софья Полякова | 6 апр | Новости, Топ Избранное

Избранное фото мужчины с украинским флагом на Трафальгарской площади. Автор Авель Шах. Когда мне было 11 лет, я и моя семья иммигрировали в Штаты как беженцы из Санкт-Петербурга, Россия. Когда я рос в России, мои любимые моменты были потрачены на скитания по нетронутой…

Микровзаимодействия в дизайне пользовательского интерфейса: как анимировать значки в Figma

Джереми Эллиотт | 3 февраля | Графический дизайн, Сделай сам, Популярное

Figma — одна из ведущих (и наиболее доступных) платформ для совместной работы по проектированию, прототипированию и разработке первоклассных пользовательских интерфейсов и опыта. Дизайнеры UX и UI часто обращаются к Figma из-за ее универсальности и скорости, с которой они могут. ..

Создайте свой собственный трафарет для вырезания тыквы с помощью этих 5 простых шагов

по Линдси Стюарт | 16 октября | Графический дизайн, Креативное вдохновение, Сделай сам, Рекомендуемые

Вырезать тыквы в эти выходные? Вы можете создавать свои собственные трафареты для резьбы, используя значки Noun Project. Это просто, как (тыквенный) пирог. Сначала выберите значок. Посетите сайт thenounproject.com или откройте приложение Noun Project для Mac. Найдите значок, который вы хотите превратить в…

Охота за сокровищами: найди значки и выиграй призы!

Джереми Эллиотт | 11 октября | Новости, Избранные

Примечание. Это соревнование закрыто с 17:00 по тихоокеанскому стандартному времени 21 октября 2022 года. Следите за будущими соревнованиями! В этот сезон Хэллоуина в штаб-квартире Noun Project происходит что-то жуткое! Найдите и скачайте серию из 13 проклятых иконок с подозрительными тегами и…

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

по Линдси Стюарт | 22 сентября | Избранное, Советы по фотосъемке

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

Иконки для проекта: Иконки Project — скачивайте бесплатно в PNG и SVG