Иконки в веб-дизайне — Дизайн на vc.ru
{«id»:13679,»url»:»\/distributions\/13679\/click?bit=1&hash=5661b9982153a4b0193750911c794be5811ff0ac6ae379fac7797ccaf01a2c12″,»title»:»\u0418\u0441\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u0435: \u043a\u0430\u043a\u043e\u0439 \u0440\u0435\u043a\u043b\u0430\u043c\u043d\u044b\u0439 \u043a\u0430\u043d\u0430\u043b \u0441\u0435\u0439\u0447\u0430\u0441 \u0441\u0430\u043c\u044b\u0439 \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u044b\u0439″,»buttonText»:»\u0423\u0437\u043d\u0430\u0442\u044c»,»imageUuid»:»e6704744-04b5-59cb-adb1-9375496a00b2″,»isPaidAndBannersEnabled»:false}
Иконки на сайтах нужны для ускорения восприятия информации пользователем. Благодаря правильному использованию иконок, пользователь может сразу же понять о чем конкретно идет речь и какие смыслы хотел донести дизайнер.
385 просмотров
Иконки сфер деятельности компании не противоречат описанию, а дополняют и раскрывают суть.
Иконки с кратким описанием преимуществ компании, информация считывается быстро, все иконки подходят к своему описанию.
Использовать иконки, которые не ассоциируются с информацией, которую необходимо донести — неэффективно, такой вариант оформления страницы ресурса только введет пользователя в заблуждение. В таком случае, клиенту прийдется прочитать описание к каждой иконке, что займет больше времени на изучение информации о компании или же приведет к тому, что потенциальный клиент просто покинет ресурс. Например, не стоит заменять привычную всем иконку лупы (поиска) на какой-то другой образ, который может показаться более симпатичным — это может снизить показатели эффективности сайта.
Также, бывают случаи, когда лучше не использовать иконки, а просто прописать всю информацию хорошим текстом, так как иконки могут сбить с толку. Использовать иконки только ради дизайна не всегда удачная мысль, визуальные образы на сайте должны помогать пользователю в восприятии новой информации.
Итак, вот небольшой чек-лист по использованию иконок:
- Иконки должны быть понятные и отражающие суть информации.
- Правильно подобранные иконки помогают быстрее понять текст на сайте.
- Используем иконки только там, где это необходимо и уместно.
- Текст к иконке всегда должен подходить к ее образу.
- Все иконки должны быть в одном стиле.
Перейдем к полезным ресурсам, где можно найти разные иконки для ваших проектов:
- https://app. streamlinehq. com/icons/streamline-mini-line — 1 000 бесплатных иконок с возможностью редактирования;
- https://vertex. im/ — коллекция бесплатных 3д иконок для личного и коммерческого пользования;
- Icons by Premast — коллекция более чем тысячи тематических иконок для ваших проектов;
- Pichon — больше 135 тысяч иконок в различных стилях в одном приложении. Можно скачать для Mac, Windows, Figma, Photoshop и т.д.;
- The Icon Of — большая коллекция иконок из более чем 20 категорий с поддержкой самых популярных форматов;
- Streamline Flex Icon Set — коллекция из 500 стильных векторных иконок в минималистичном стиле, которые вы можете бесплатно использовать в любых целях;
- iconer — сервис с большим количеством иконок, можно настроить начертания, цвет и формат для экспорта;
- Iconduck — коллекция из 150+ наборов иконок и иллюстраций с открытым исходным кодом;
- Iconbay — бесплатная коллекция стильных современных иконок в пяти стилях.
Как правило, у людей образное мышление и когда мы видим привычный образ, нам легче понять суть. Потому иконки на сайте — отличный инструмент для привлечение внимания и ускорения восприятия информации. Используйте их правильно и будет вам счастье 🙂
Дизайн система: Иконки / Хабр
Подготовка иконок к работе в дизайн системе
Кто я и почему об этом пишу?
Привет, меня зовут Андрей Насонов, я 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 иконок
Спасибо
А если хотите узнать больше фишек — подписывайтесь, чтобы не пропустить новые статьи.
анимированных иконок | Font Awesome Docs
Наш Styling Toolkit избавляет от проблем с изменением размера, поворотом и размещением значков, поэтому вы можете сделать свой сайт эффектным с помощью анимации.
Advertisement
Мы расскажем об основах анимации, таких как удары, затухание, затухание, переворот и вращение для ваших значков, чтобы вы могли создать больший визуальный интерес на своем сайте.
Перед началом работы
Убедитесь, что вы:
- Настройте Font Awesome в своем проекте.
- Знакомы с основами добавления значков Font Awesome.
Beat
Используйте анимацию fa-beat
для масштабирования значка вверх или вниз. Это полезно для привлечения внимания или для использования со значками, ориентированными на здоровье / сердце.
Beat Utilities
Утилита | Подробная информация | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
-FA-FA-BEAT-SCALE | Установите максимум.0006 РекламаFade Используйте анимацию FADE Utilities
| 9003. |
. установить на уменьшить
, это указывает на то, что пользователь предпочитает меньше движения, что может вызвать дискомфорт на странице у людей с вестибулярными нарушениями движения. Реклама
Настройка
Мы добавили настраиваемые свойства CSS (открывается в новом окне), чтобы сделать настройку проще и эффективнее, и вы можете использовать эти настраиваемые свойства во всех наших анимациях. Определите свои собственные значения для следующих свойств, чтобы переопределить и настроить параметры Font Awesome по умолчанию.
Пользовательское свойство CSS Детали Допустимые значения --fa-animation-delay
2Установить начальную задержку для анимации Любое допустимое значение анимации-задержки CSS
(открывает новое окно) --fa-animation-direction
Установить направление анимации Любое допустимое направление анимации CSS
значение (открывает новое окно) --fa-animation-duration
Установить продолжительность анимации Любое допустимое значение CSS animation-duration
(открывает новое окно) --fa-animation-iteration-count
Установить количество итераций для анимации Любое допустимое значение CSS animation-iteration-count
(открывается в новом окне) -fa 9003 animation-timing Установить, как анимация проходит через кадры Любое допустимое значение CSS animation-timing-function
(открывает новое окно)
Icon Animation + Wobbles
Мы много работали, чтобы значки всегда находились точно по центру, когда они вращаются или пульсируют. Тем не менее, мы наблюдали проблемы в нескольких браузерах с использованием метода Web Fonts + CSS для Font Awesome . Похоже, это проблема с веб-шрифтами в целом, и мы не можем решить ее напрямую. У нас есть несколько способов обойти это:
- Установить отображение анимированного значка — Использовать
display: block;
где можно. Кажется, это очень помогает в этом вопросе. - Switch Frameworks — Переключение на SVG методом JavaScript; это работает намного лучше для этого.
Премиальные значки для веб-сайтов бесплатно
Простые иконы с открытым исходным кодом тщательно созданы для дизайнеров и разработчиков
Balloon
кофейки
Demply
Demply
Universi-ACCCCCS
Univers-ACCCCS
Univers-ACCCCS
Univers-ACCCS
Univers-
Univer универсальный доступ
замок
Shield-Minus
Shield-Minus
SHIELD-PLUS
SHIELD-PLUS
Vertical-Bottom
Вертикальная Top
Горизонтальный-правый
Object-Logs-Leat
Object-Bottal-Bottom
Object-Object-Object-Object-Object-Object-Bottom
. вертикаль-снизу
объекты-вертикаль-центр
объекты-вертикаль-центр
объекты-вертикаль-верх
объекты-вертикаль-верх
объекты-горизонт-справа
объекты-горизонт-право
objects-horizontal-center
objects-horizontal-center
objects-horizontal-left
objects-horizontal-left
reflect-horizontal
reflect-vertical
postgresql
mongodb
deezer
cart -добавить
корзину-загрузить
нет сигнала
сигнал-5
сигнал-4
сигнал-3
сигнал-2
сигнал-1
сыр
0004
Hard-Hat
Hard-Hat
Home-ALT-2
Home-ALT-2
Кабельный автомобиль
Кабельный автомобиль
Крикет Болл
Крикет Болл
Дерево-Альт
Мужчина-Фемляя
Invader
Baguette
Baguette
Circle-Half
Circle-Half
Circle-Three-Quarter
Circle-Three-Quard -рис
Bowl-Rice
Bowl-Hot
Bowl-Hot
Эскиз
Эскора вертикальный
коллапс-горизонтальный
коллапс-альт
впрыск
upwork
netlify
heroku
go-lang
99designs 900s 900r0004
docker
podcast
checkbox-minus
checkbox-minus
speaker
speaker
registered
registered
phone-off
phone-off
tiktok
sketch
trip-advisor
visual-studio
discord-alt
флаттер
мастодонт
tailwind-css
здания
здания
store-alt
-alt bar-chart-alt-2
bar-chart-alt-2
message-dots
message-dots
message-rounded-dots
message-rounded-dots
3 карты 90
Карта памяти
кошелек
Кошелек-Альт
SlideShow
Slideshow
Сообщение-квадрат
Сообщение-квадрат-точ
Сообщение-кваре
книжный контент
Редактировать ALT
Редактировать ALT
мышиный ALT
мышиный ALT
BUG-ALT
BUG-ALT
Notepad
Notepad
. квадрат
форма-треугольник
направление-лево
почта-отправка
код-альт
кавычка-одинарная-левая
кавычка-одиночная-правая
пользователь-00 копия-пин
копия-альт
Transfer-ALT
File-DOC
File-HTML
Комментарий-Detail
Комментарий-ADD
File-CSS
File-JS
File-JSON
File-MD
File-TXT File-TXT.
File-PNG
File-JPG
File-GIF
Анализ
Book-Open
Плоково-сделка
Плотость
парки пейзаж
пейзаж
Трафик
Комментарий
Комментарий
Комментарий-точка
Комментарий Dots
Pyramid
Пирамида
Цилиндр
Lock-Alt
Lock-Alt
Lock-Alt
alt
lock-open-alt
песочные часы-вверху
песочные часы-внизу
стрелка влево-alt
стрелка вправо-alt
стрелка вверх-alt
стрелка вниз-0-4alt 9 форма 9 круг
Cycling
Bowling Ball
Bowling Ball
Search-ALT-2
Search-ALT-2
Plus-Medical
Переворот уличного.
Paint-Roll
Shield-Alt-2
Shield-ALT-2
Ошибка ALT
Ошибка ALT
квадрат
квадрат
Квадратный размер
Квадратный размер
. полигон
Cube-Alt
Cube-Alt
Cuboid
Cuboid
Пользовательский голос
Пользовательский голос
Доступность
Building-House
Строительный доме
Doughnut-Chart
Douthn-chart
444444444444444444444444444444444444444. круг
вход в круг
вход в круг
выход из круга
выход из круга
вход в систему
выход из системы
уведомление
003 Check-Square
Check-Square
Message-ALT
Сообщение-Альт
Сообщение-Альт-Дотс
Сообщение-Альт-ДОТ-Барриер
Компонент
Планетный Альт
Палитра
Палитра
Корзина
Корзина
Приобретение Tag-Alt
Покупка-TAG-ALT
ПЕРЕДЕЛЕНИЕ
ПРИБОТА
Map-Pin
Map-Pin
0004
Map-Pin
Band-aid
Band-aid
Кредитный карт-ALT
Credit-Card-ALT
Кредитный карт
Wi-Fi-Off
Яркость
Яркость
Яркость
Яркость
Фильтр-ALT
DialPad-ALT
Граница-правая
РЕШИНГ-ЛЕТ
Пограничная версия
Бординка
Бординг-все
Mobile-Landscape
Mobile-Vibration Vibration
прямоугольник
стрелка вправо
стрелка влево
стрелка вверх
стрелка вниз
вправо-вверх-стрелка-круг
вправо-стрелка-вниз-круг
влево-
влево-наборный цикл
Институт
Школа
Черная доска
Skip-Previous-Circle
Skip-Next-Circle
Bell-Minus
.
поиск
Zoom-in
Увеличьте
USER-X
Проверка пользователя
Compass
GAS-PUMP
SPUTWATCH
ПЕРЕЙНАЛА-Альт-Альт-2
ПЕРЕПАКА-Альт-2
Время-пять
Время-пять
Instagram-ALT
закладки
Закладка Minus
Бортобец-Альт-2
Портфель-Альт-2
Brush-Alt
Calendar
Calandar-Alt
календарь-плюс
календарь-минус
Calendar-X
Calendar-Check
Calendar-EVENT
Настройка
Настройка
Карусель
Rewind-Circle
Fast-Forward
Mobile-Vibration
Quote -lt-Lotft Loft
. quote-alt-right
макет
принтер
sort-a-z
sort-z-a
разговор
кисть-alt
расширение
Проверка-защитник
Проверка
Border-Radius
Add-To-Queue
Add-To-Queue
Архив в
Архив-в
Архив
Archive-Out
Alard-Add
Alard-Add
Space-Bar
Изображение-Альт
Изображение-ADD
Image-ADD
Холодильник
холодильник
Bolt-Circle
Bolt-Circle
4.
биткойн
Ориентировочный цикл
Caret-Down-Down-Circle
Ледяя левая цикл
Кейс-правый цикл
Shekel
Facebook-Circle
JQUERY
Pinterest-ALT
Health
Baby-
Carriage
Clinic
Ручная вверх
Ручная правая
Распространение
.
Food-Menu
Camera-Plus
Business
MEH-ALT
Wink-Tongue
Happy-Alt
Happy-Heart-Heart-Eyes
Happy-Smile
CONSED
Sleepy
Shocked
4Sleepy
49499999.
Happy-Beaming
MEH-Blank
Вернув
Happy Heart-Eye
Wink-Smile
MEH-ALT
Стушен
Sleep
Шокирован
Happy Beam
.0003 MEH-Blank
Happy-ALT
Вверх с классом
Wink-Tongue
Algolia
Audible
Gitlab
Patreon
Albubble
Diamond
Комментарий -ерр-Эррир
44444404440004400044000440004400044044464440444000440444000444444444404440004404440004444444404440004444444044400044044 -middlealign-right
arrow-back
bell-minus
bell-off
bell-plus
закладка
закладки