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

Содержание

Иконки для сайта: какие бывают, зачем нужны и где их брать?

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

Содержание

  1. Какие бывают иконки?
  2. Зачем нужны иконки на сайте?
  3. Где взять иконки для сайта?

Какие бывают иконки?

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

В зависимости от типа графики иконки делятся на:

  • Векторные (формат SVG).

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

  • Растровые (формат PNG).

    Растровые иконки в веб-дизайне целесообразно применять именно в PNG-формате: он имеет канал прозрачности и лучше подходит для картинок с относительно небольшим количеством цветов, чем формат JPG.

  • Символьные (форматы шрифтов).

    В веб-дизайне нередко применяются иконочные шрифты (например:

    FontAwesome, IcoMoon), содержащие множество иконок в качестве символов. Минус таких иконок в ограничении цвета и стиля: это всего лишь символы.

Существуют основные следующие стили оформления иконок:

  • плоские (flat),
  • контурные (outline),
  • объемные (3D).

Иконка с одинаковым значением в разных стилях:

Контурная

Плоская

Объемная

Зачем нужны иконки на сайте?

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

Иконкам можно найти применение на любом сайте:

  1. В дополнение к пунктам навигации.

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

    Joomla 4:

    Иконки в меню админки Joomla 4

    Иконки при скрытии текста пунктов меню

  2. Для функциональных кнопок.

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

    Иконки в кнопках админки Joomla 3

    Иконки на странице интернет-магазина

  3. Для обозначения любого элемента контента.

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

    Иконки преимуществ на лендинге

  4. Для обозначения мета-информации.

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

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

Где взять иконки для сайта?

Иконочные шрифты

Существуют следующие популярные иконочные шрифты, ознакомиться с которыми и скачать вы можете на соответствующих сайтах:

  • Font Awesome.

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

    Иконки из Font Awesome

  • IcoMoon.

    Иконки из этого шрифта применяются в админке Joomla 3.x.

    Иконки из IcoMoon

  • Themify Icons.

    Этот бесплатный шрифт включает более 320 контурных иконок.

    Иконки из Themify Icons

  • Fontello.

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

    Сервис Fontello

Иконки в формате изображений

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

Iconfinder отличается:

  • более 2 750 000 бесплатных и платных иконок и их наборов в самых разных форматах;
  • удобной системой поиска и фильтрации иконок по стоимости, формату и стилю;
  • сервисом создания и изменения иконок под заказ;
  • браузерным онлайн-редактором выбранных иконок;
  • возможностью выбора размера и формата иконки для скачивания.

Рассмотрим сервис Iconfinder на примере поиска иконки по запросу Joomla:

  1. Переходим на www.iconfinder.com.

  2. В строку поиска вводим запрос Joomla и ищем.

  3. Откроется страница с результатами поиска. Стоимость платных иконок указана в левом нижнем углу иконки. Отфильтровать платные иконки можно с помощью фильтра в левой части страницы.

  4. Для скачивания бесплатной иконки в нужном формате (в формате PNG иконка будет иметь размер 128×128 px) нужно кликнуть по названию формата левом нижнем углу иконки.

  5. Если необходимо скачать в формате PNG с размером 512×512, 256×256 px или с другим размером, в другом формате, то кликните по стрелке в левом нижнем углу иконки и выберите нужный вариант из контекстного меню.

  6. Из этого же контекстного меню можно перейти в онлайн-редактор иконки, нажав Open in Icon Editor: откроется страница редактрования, где можно изменить размер, цвет иконки, добавит текст и много другое. Для скачивания отредактированной иконки нужно нажать Download Icon в правом верхнем углу редактора.

пп. 1, 2

п. 3

пп. 4, 5

п. 6

Ознакомиться с наборами иконок можно на странице Icon sets:

Страница с наборами иконок

Комментарии для сайта Cackle

Круглые иконки, вкладки, схемы и ещё 89 приёмов для оформления контента на сайте :: Гудсайт

Структурируйте контент

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

Текст о компании на сайте «ТрансКапиталБанка» поделён на несколько информационных блоков.

1

На странице о компании на сайте «БКС Брокер» выделено четыре больших инфоблока: преимущества, история, финансовые показатели, руководители.

2

Информационные блоки на странице услуг «Тинькофф Банка» визуально разделены при помощи свободного пространства и горизонтальных линий.

3

Текст на странице о возможностях «Битрикс 24» поделён на небольшие блоки, в каждом из которых есть картинка. Инфоблоки разделены горизонтальными линиями.

4

Страница о компании на сайте «Инвестторгбанка» поделена на три крупных инфоблока: текст о банке, его миссии и ссылки на другие страницы.

5

Страница о кукурузе на сайте «Авангард-Агро» визуально поделена на блоки о характеристиках, сортах, географии выращивания и другие.

6

Превращайте тексты в списки

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

Все тексты на странице кредитной программы на сайте «ТКБ Банка» представлены в виде списков.

7

Нумерованный список на сайте «БКС Брокер» показывает последовательность действий персонального брокера.

8

Каждый пункт в списке преимуществ на сайте «Тинькофф Банка» подсвечивается при наведении мыши.

9

Делайте таблицы

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

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

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

10

Информация об управляющих компаниях выложена в форме таблицы на городском портале Якутска. Показаны только первые пять строк из пятидесяти трёх. Остальные строки можно развернуть, если нажать на кнопку «Показать больше».

11

Данные о сборе сельхозкультур на сайте «Авангард-Агро» занесены в таблицу. Если передвигать бегунок вверху таблицы, то буду отображаться данные за выбранный год. Таким образом, таблица остаётся компактной и занимает на странице немного места.

12

Строки в таблице о продукции «Авангард-Агро» подсвечиваются при наведении. Ссылка на подробную информацию о каждом растении появляется при нажатии на строку.

13

Столбцы в таблице с тарифами на сайте «Битрикс 24» подсвечиваются при наведении.

14

Пишите инструкции

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

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

На сайте «Тинькофф Страхование» выложена инструкция для клиентов, у которых произошёл страховой случай.

15

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

16

На сайте «БКС Брокер» есть краткая инструкция по обмену валюты.

17

Инструкция по инвестированию на сайте «БКС Брокер» состоит из шести пунктов. Название каждого пункта подписано внизу инструкции, а подробное содержание можно листать при помощи стрелок.

18

На сайте «БКС Брокер» выложена подробная пошаговая инструкция для новичков в интернет-трейдинге.

19

Инструкция для предпринимателей от «Тинькофф Банка» объясняет, как открыть расчётный счёт за четыре шага.

20

На сайте «Тинькофф Страхование» есть краткая инструкция по покупке страховки.

21

Рисуйте схемы

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

Факторинг в «ТрансКапиталБанке» представлен в виде схемы. Действия банка, покупателя и поставщика обозначены цифрами и расшифрованы под схемой.

22

Схема работы бонусной системы в «Тинькофф Банке» показывает как накопить и использовать баллы.

23

Действие беспроцентного периода по кредитной карте «Тинькофф Банка» продемонстрировано на интерактивной схеме.

24

Оформляйте цифры

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

Цифры на главной странице сайта «БКС Брокер» говорят об обороте компании, количестве клиентов и сотрудников.

25

На странице о компании на сайте «БКС Брокер» приведены финансовые показатели.

26

«Битрикс24» показывает количество клиентов и задач, которые они решили с помощью продуктов компании.

27

28

Цифры на главной странице «One click Yakutsk» подтверждают, что портал работает и решает проблемы жителей Якутска.

29

На странице о портале «One click Yakutsk» приведена краткая статистика обращений.

30

«Авангард-Агро» показывает статистику о ситуации на полях.

31

На сайте «Авангард-Агро» вместо традиционных текстов о компании выложен большой блок с цифрами.

32

Выделяйте заголовки и главные мысли

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

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

Страница о страховании путешествий в «Тинькофф Страхование» начинается с расслабляющего заголовка и знакомой туристам фотографии из кафе аэропорта.

33

Укусы животных, травмы и госпитализация — это неотъемлемая часть услуг по страхованию жизни и здоровья. Но у «Тинькофф Страхования» раздел начинается не со страшилок, а с эмоционального заголовка, который позволяет взглянуть на страхование здоровья под другим углом.

34

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

35

Главные мысли в новостях на сайте «МДМ Банка» размещены в рамке и выделены жирным шрифтом.

36

Баннер в начале страницы о «Тинькофф Банке» привлекает внимание к мысли о том, что это надёжный современный банк с большим количеством клиентов.

37

«Бонусные мили на карте» — слова знакомые, но не очень ясно, какая от них польза. А фраза «летать в отпуск бесплатно каждый год» звучит более конкретно и заставляет прокрутить страницу о кредитной карте «Тинькофф Банка» дальше.

38

Раздел об интернет-трейдинге в «БКС Брокер» начинается с описания сущности услуги в формате призыва к действию.

39

Баннер на странице о торговых стратегиях в «БКС Брокер» привлекает внимание к основной выгоде клиентов — возможности заработать деньги без стресса и переплат.

40

Иллюстрируйте контент

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

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

Информация о каждом акционере сопровождается диаграммой, которая показывает его долю в капитале «ТКБ Банка».

41

В разделе о кредитовании в «ТрансКапиталБанке» используются анимированные иллюстрации для оформления преимуществ.

42

Преимущества компании «БКС Брокер» проиллюстрированы иконками.

43

Инструменты интернет-трейдинга в «БКС Брокер» обозначены иконками.

44

О безопасности в «Тинькофф Банке» рассказано при помощи небольшого текста и пиктограмм.

45

К каждому из четырёх преимуществ компании «Тинькофф Страхование» подобраны пиктограммы.

46

Процесс выращивания сельскохозяйственных культур на сайте «Авангард-Агро» показан при помощи фотографий. Изображения сменяют друг друга по нажатию на название фазы роста растения.

47

Интерактивная картинка показывает долю полей «Авангард-Агро», которые заняты разными сельхозкультурами.

48

Интерактивная иллюстрация на сайте «Тинькофф Банка» показывает, как выглядит процесс накопления денег на отдельных счетах в интернет-банке.

49

Интерактивная иллюстрация показывает долю каждого направления деятельности в структуре холдинга «Ротек».

50

Интерактивная иллюстрация во всплывающем окошке показывает, какие виды объектов можно защитить в компании «Тинькофф Страхование».

51

Возможности городского портала Якутска показаны при помощи иконок.

52

Каждый инструмент для работы в «Битрикс24» обозначен своей пиктограммой.

53

Преимущества «Тинькофф Банка» обозначены иконками. Выгодные условия сотрудничества продемонстрированы при помощи анимированных картинок.

54

Иллюстрации на сайте «Инвестторгбанка» созданы на основе первой буквы в названии раздела и фотографий людей. Преимущества кредита поделены на короткие пункты и обозначены пиктограммами.

55

Преимущества компании «КИТ Финанс Брокер» обозначены иконками.

56

Используйте промоблоки

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

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

В конце страницы об ипотечном кредитовании в «ТрансКапиталБанке» есть промо-блок со ссылками на другие услуги.

57

Промоблок с фотографией и крупным текстом на странице об услугах «БКС Брокер» привлекает внимание к бесплатному вебинару.

58

Промо-блок в конце страницы о «Тинькофф Банке» ведёт в разделы о картах и вкладах.

59

Яркий баннер приглашает узнать подробную информацию о страховании путешествий в «Тинькофф Страхование».

60

Рисунок с холодильником на сером фоне привлекает внимание к подбору рецепта на сайте «Foodkultur».

61

Яркие картинки во всплывающих окошках привлекают внимание к разделам сайта «Авангард-Агро».

62

Промоблок в разделе для бизнеса на сайте «Тинькофф Банка» приглашает скачать мобильное приложение.

63

Блок с виджетами на главной странице сайта «КИТ Финанс Брокер» привлекает внимание к разделам с информацией о состоянии фондового рынка.

64

Облегчайте выбор продуктов

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

Вместо текстов о разных видах кредитов для малого бизнеса на сайте «ТКБ Банка» размещён подбор кредитной программы в зависимости от потребностей клиента.

65

На сайте «БКС Брокер» есть подбор персонального решения по инвестированию.

66

Пользователи перетаскивают продукты в кастрюлю и подбирают рецепты блюд на сайте «Foodkultur».

67

Разбивайте информацию на вкладки

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

Разные версии логотипа «Тинькофф Банка» спрятаны во вкладках.

68

Информация о руководстве и акционерах «ТКБ Банка» находится в переключающихся вкладках.

69

На странице о кредитах в «ТКБ Банке» переключаются две вкладки: требования к заёмщику и список документов.

70

На главной странице сайта «Инвестторгбанка» переключаются блоки с финансовыми решениями и каталогом услуг. При этом не происходит перезагрузка страницы.

71

На сайте «БКС Брокера» переключаются вкладки с тарифами.

72

Ответы на вопросы на сайте «БКС Брокера» расположены во вкладках.

73

Информация об акциях, фьючерсах и валюте на сайте «БКС Брокера» находится во вкладках.

74

Видеоролики «БКС Брокера» располагаются во вкладках.

75

Преимущества карты «Тинькофф Банка» и калькулятор начисления миль находятся в двух вкладках.

76

Информация о трейдинге на сайте «КИТ Финанс Брокер» находится во вкладках, которые переключаются без перезагрузки страницы. Длинные тексты на странице спрятаны. Подробную информацию можно развернуть, если нажать на ссылку «Узнать больше».

77

Краткое и подробное меню на сайте «КИТ Финанс Брокер» располагается в двух вкладках.

78

Прячьте подробные тексты в раскрывающиеся блоки

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

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

Краткое описание услуг «БКС Брокер» разворачивается по клику на название услуги.

79

Краткое описание офисных кресел в интернет-магазине «Herman Miller Shop» разворачивается по клику на товар.

80

По клику на название продукции «Авангард-Агро» появляется подробное описание в раскрывающемся блоке.

81

Содержание вакансий «Авангард-Агро» появляется в раскрывающемся блоке.

82

Полный список продуктов компании «БКС Брокер» изначально скрыт на странице. Названия продуктов можно развернуть, нажав на иконку с плюсом.

83

Ответы на популярные вопросы на сайте «Тинькофф Страхование» выводятся в раскрывающихся блоках.

84

Раздел «Вопрос-ответ» на сайте «КИТ Финанс Брокер» состоит из раскрывающихся блоков.

85

Длинные тексты о социальной ответственности «ТКБ Банка» спрятаны внутри разворачивающихся блоков.

86

Информационные блоки об общих условиях кредита в «ТКБ Банке» и о материнском капитале можно сворачивать и разворачивать.

87

Список документов по финансовой отчётности «Тинькофф Банка» за каждый предшествующий год раскрывается в отдельном блоке.

88

Описание операций по кредитной карте «Тинькофф Банка» разбито на три раскрывающихся блока.

89

Иконки для веб-дизайна — предназначение и правила использования

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

Зачем дизайнеры используют иконки

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

Если мы уберем сопутствующие изображения, скорость восприятия меняется:

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

Еще одна функция иконок — помощь пользователю сориентироваться в интерфейсе. Есть несколько универсальных символов, которые используются в дизайне для направления пользователя, например:

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

Такие изображения добавляют на сайты интернет-магазинов для облегчения покупки:

С помощью иконок клиент не теряется на новом ресурсе и понимает, какие действия он может сделать.

Как с помощью иконок повысить конверсию сайта

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

1. Привлечь внимание к преимуществам компании

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

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

2. Расскажите, как сделать заказ или как работает компания

Чтобы новые клиенты знали по какому алгоритму работает магазин или оказываются услуги, расскажите об этом с помощью иконок:

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

3. Расскажите о товаре с помощью изображений

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

4. Выделяйте акции и специальные предложения, а также нужные категории товаров

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

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

Какие иконки используют в дизайне

Использование самых разнообразных иконок, отличных по размеру, стилю, цвету и расположению является распространенным приемом среди дизайнеров. Обычно мы встречаем иконки на главном экране под большим слайдером, на страницах «услуги» или «контакты», в шапке сайта. Из-за такого разнообразия возникает вопрос: какие иконки лучше использовать для дизайна? Рассмотрим виды иконок и постараемся ответить на этот вопрос.

Линейные

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

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

Иллюстрации

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

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

Объемные

Некоторые веб-дизайнеры отходят от трендов «плоского» и минималистичного дизайна и используют вместо иконок самостоятельные изображения. Это могут быть вырезки из фотографий продукта или тематических картинок.

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

Простые элементы

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

А здесь вместо картинок использовали простой элемент галочку:

Такие иконки не отвлекают внимание пользователя от основной информации, но и не «цепляют» взгляд.

Шрифтовые иконки

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

Иконки встраиваются в HTML код как обычный класс с именем «fa» с помощью тегов <i> или <span>. Пример использования:

<i class=«fa address-book»></i>

Где «address-book» — название иконки-книжки. Изображения удобно использовать для обозначения мелких элементов, например, на странице «контакты», в формах или в меню.

Примеры использования иконок в веб-дизайне

Мы разобрались, как иконки различаются по стилистике и методам внедрения. Теперь рассмотрим деление элементов по назначению на реальных примерах.

Иконки для навигации

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

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

Информационные иконки

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

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

Социальные доказательства

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

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

Призыв к действию

Иконки встраивают в контент, который приводит пользователя к целевым действиям на сайте:

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

Разделы каталогов

Чтобы разделить одну категорию товаров от другого и вызвать ассоциации с определенным продуктом, иконки используют в оформлении разделов каталога:

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

Социальные кнопки

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

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

Фильтры

Иконки можно использовать в фильтрах для товаров. Узнаваемые изображения помогут клиентам сориентироваться в каталоге и выбрать нужный продукт или услугу:

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

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

5 советов по созданию дизайна иконок

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

1. Иконки должны быть узнаваемыми и ассоциироваться с окружающим текстом

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

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

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

2. Дополняйте иконку текстом

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

3. Дизайн иконок должен быть похож между собой

Если вы используете несколько иконок одновременно, они должны быть согласованы друг с другом, чтобы не получилось так:

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

4. Прозрачный фон облегчает восприятие

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

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

5. Используйте векторную графику, если это возможно

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

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

50 лучших сайтов с красивыми бесплатными иконками

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

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

01. Smashing Magazine

Smashing Magazine – один из лучших ресурсов для поиска высококачественных, эксклюзивных значков в различных форматах, в том числе SVG, PSD, PNG . Большинство комплектов не требуют обратной ссылки.

02. Freepik

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

03. Gravual

Если вам нужна иконка для личного проекта, поищите на Gravual. Этот сайт предлагает две коллекции значков, идеально подходящих для минималистов: «кухонная утварь» и «на свежем воздухе». Чтобы использовать эти иконки для коммерческих проектов, свяжитесь с правообладателем.

04. Flat Icon

Flat Icon предлагает самую обширную базу бесплатных векторных иконок. Этот ресурс создали те же люди, что Freepik. Уникальность Flat Icon в том, что можно конвертировать иконки в загружаемый шрифт. Выбирать их и сохранять в библиотеке очень просто. Указание источника обязательно.

05. Behance

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

06. Web Design Freebies

Этот сайт забит бесплатными наборами иконок со всех уголков Интернета. На Web Design Freebies легко можно просмотреть сразу все коллекции.

07. Captain Icon

Красивые векторные значки на Captain Icon доступны в форматах: EPS, PSD, PNG, SVG и иконочный шрифт. Можно настроить всё – от цвета до размера. Допускается использование иконок в личных и коммерческих проектах, указание авторства обязательно.

08. Good Stuff No Nonsense

Как следует из названия, на Good Stuff No Nonsense вас ждут лишь качественные иконки и ничего лишнего. Значки нарисованы от руки, бесплатны и не требуют обратной ссылки.

09. DeviantArt

DeviantArt – яркое сообщество художников с почти 200 000 бесплатных иконок, доступных для скачивания на разных условиях. Обратите внимание, что некоторые авторы делятся только с членами сообщества DeviantArt.

10. Dribbble

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

11. Best PSD Freebies

Best PSD Freebies предлагает бесплатно скачать наборы PSD иконок из всей сети непосредственно с их сайта.

12. Iconfinder

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

13. GraphicBurger

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

14. Designbeep

Чтобы не искать графику по нескольким сайтам, зайдите Designbeep. Здесь вы найдёте наборы иконок с разных ресурсов от Freepik до Behance.

15. PixsHub

Pixshub – аккуратно организованный ресурс, на котором собраны иконки со всей сети. Примите к сведению, что требования к указанию авторства различаются.

16. Oxygenna

На Oxygenna вы найдёте уникальные наборы иконок в PNG, PSD и в AI форматах.

17. Dafont

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

18. Free Goodies for Designers

Free Goodies for Designers – отлично устроенный ресурс, который предлагает наборы PSD, SVG и векторных иконок для всех пользователей.

19. Freebiesbug

Freebiesbug – выбор новейших бесплатных графических элементов на разнообразную тематику.

20. Vecteezy

На Vecteezy в вашем распоряжении почти 60 страниц векторных иконок, наверняка, найдётся идеальный вариант для вашего проекта.

21. Iconmelon

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

22. PixelsMarket

На PixelsMarket вы найдете иконки со всей сети с известных и не очень сайтов.

23. GraphicsFuel

GraphicsFuel предлагает множество красочных коллекций со всего Интернета.

24. Fribly

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

25. Icojam

Очень симпатичные иконки от команды дизайнеров Icojam.

26. Blugraphic

Blugraphic – варианты PSD, PNG и векторных иконок. Поиск ограничен тегами, но можно подписаться на рассылку и еженедельно получать бесплатную подборку по электронной почте.

27. Icon Shock

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

28. CSS Author

CSS Author предлагает еженедельные подборки лучших бесплатных иконок в сети.

29. Creative Tail

Хотите свежих иконок? На Creative Tail есть наборы, которых больше нигде не найти.

30. All-Free-Download

All-Free-Download предлагает лёгкий поиск и прямые загрузки PSD, PNG и векторов.

31. Ego Icons

Ego Icons предлагает более 1500 премиальных иконок и 100 бесплатных векторных значков. Посетите также дочерние сайты, кликнув по кнопкам верхней навигационной панели.

32. AlienValley

На AlienValley представлен широкий ассортимент иконок высокого качества в обмен на ваш адрес электронной почты.

33. Dreamstale

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

34. DuckFiles

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

35. 1001 Free Downloads

1001 Free Downloads специализируется на плоских иконках, представленных множеством прекрасных и причудливых вариантов.

36. GraphicsBay

GraphicsBay – отлично организованный сайт с красивыми иконками, удобным поиском и прямой загрузкой.

37. Pixeden

На Pixeden можно искать иконки в нескольких размерах. Здесь широкий выбор от 16х16 до 512х512 в формате PNG.

38. NounProject

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

39. Iconmonstr

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

40. Fusionplate

На Fusionplate проводят еженедельные обзоры свежих бесплатных иконок.

41. Dryicons

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

42. Glyphicons

Ресурс Glyphicons для всех, кто ищет минималистские монохромные иконки в формате PNG.

43. MrIcons

MrIcons предлагает большой каталог из более ста тысяч иконок от веб-интерфейса до соцсетей.

44. Entypo

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

45. Endless Icons

На Endless Icons полно простых и элегантных значков доступных для скачивания в формате PNG и SVG.

46. Iconic

Iconic предлагает более 200 иконок в SVG, растровом и шрифтовом форматах.

47. IcoMoon App

IcoMoon App – прекрасная и простая в использовании библиотека, в которой насчитывается более 4000 специально разработанных векторных иконок.

48. Fontello

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

49. IconArchive

IconArchive предлагает молниеносный поиск нужной картинки среди 2443 наборов, насчитывающих 590 918 иконок, многие из которых являются общественным достоянием.

50. Squid Ink

На Squid Ink вы найдёте две тысячи ярких, креативных, масштабируемых векторных иконок. Бесплатный доступ к 50-ти картинкам для использования в личных и коммерческих проектах.

По материалам canva.com

Минусы и плюсы использования иконочных шрифтов

Существует два принципиально разных способа, добавления иконок на сайт:

  • в виде картинки (растровой или векторной)
  • в качестве иконочного шрифта

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

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

Браузерная интерпретация

Следует помнить, что иконочный шрифт – это всего лишь текст, который может выглядеть немного по разному (более или менее размытым) в зависимости от того, какой браузер использует пользователь. Кроме того, браузеры могут добавлять свои дефолтные значения у стилей, касаемые любых шрифтов, например line-height. Что в свою очередь сказывается на трудностях с позиционированием иконок. Мы, не можем быть уверенными, что иконка в макете, будет идентична на 100% той, что пользователь увидит на своем устройстве.

Одноцветные иконки

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

Анимация

Можно забыть про анимированные иконки.

Пустые теги и семантика

Обычно шрифтовые иконки вставляются в HTML разметку через пустые теги span и i. А сами иконки выводятся на страницу через псевдоэлементы after или before. Получается, что страница наполнена пустыми тегами. С точки зрения семантики, это не совсем хорошо.

<span><i ></i></span>
Сложности на больших проектах

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

Ограниченный дизайн

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

Векторный формат

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

CSS оформление

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

Поддержка браузерами

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

Подключение сторонних библиотек (Font Awesome) – лишний HTTP-запрос к серверу, на который ругается Google PageSpeed при тесте на скорость загрузки сайта. Например, при использовании SVG иконок, не будет ни одного запроса к серверу. При условии, что SVG код иконок встроен в HTML разметку, а не вставляется картинкой в формате SVG.

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

<ul>
    <li>
        <img src="man.png" alt="">
    </li>
    <li>
        <img src="female.png" alt="">
    </li>
    <li>
        <img src="boss.png" alt="">
    </li>
</ul>

Выводы

Как видите минусов больше, чем плюсов. На текущий момент предпочтительнее применять SVG иконки. Только использование встроенных SVG иконок в HTML-документ не оказывает ощутимого влияния на скорость загрузки сайта и позволяет не терять качество иконок при масштабировании. Поскольку вектор выглядит одинаково при любых размерах экранов.

Узнайте в этом видеокурсе все мои секреты успешного ведения бизнеса по созданию сайтов на заказ.

  • Создано 21.02.2020 10:01:09
  • Михаил Русаков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Подобрать иконки для сайта, как правильно » L-smart

Правильно подобрать иконки для сайта

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

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

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

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

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

Как правильно подобрать иконки для сайта

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

Преимущества компании. 

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

Преимущества товара или услуги. 

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

Список услуг

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

Как сделать заказ

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

Контакты

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

Виды иконок для сайтов и приложений

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

Линейные иконки

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

Иллюстрации

Это цветные рисунки. Хорошо бросаются в глаза. Могут быть выполнены в разном стиле и поэтому подходят для сайтов разных типов.

Объемные

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

Простые элементы

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

Шрифтовые иконки

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

Растровые и векторные иконки в веб-дизайне

Растровое изображение состоит из пикселей, окрашенных в определенный цвет. Однако, мы увеличиваем картинку и пиксели тоже увеличиваются. В результате получаем нечеткое изображение. Смотрится, как вы понимаете, так себе. Пользователи будут заходить на сайт с разных устройств, с разным размером экрана и разрешением. Надо быть уверенным, что все отображается корректно. Форматы растровых иконок: png, gif, с прозрачным фоном, JPEG будет с белым фоном. Растровые детализированные  изображения имеют, как правило, больший размер, что может отразится на времени загрузки сайта.

Сейчас все больше используют векторные элементы в дизайне. Векторные изображения состоят из опорных точек и соединяющих их кривых. Получаем контуры, залитые определенным цветом. Вы можете увеличивать изображение без потери качества. Векторные иконки, используемые на сайтах и приложениях, чаще можно встретить  в формате SVG. Зачастую вы можете использовать svg без изменения формата. Размер таких графических элементов небольшой, поэтому о скорости загрузки можно не беспокоиться. Масштабируются под любой экран. Конечно сложные изображения с множеством переходов цвета создать будет крайне непросто и трудоемко, а значит дорого. К счастью, для иконок не требуются такой детализации. Да и  минимализм в дизайне не собирается покидать свои позиции. Так что SVG вам в помощь, как говорится.

4 простых условия, как использовать иконки на сайте правильно 

  1. Иконки на сайте должны помогать с пониманием текста, подсказывать, какое действие следует совершить пользователю из вашей целевой аудитории. Возможно для конкретно ваших пользователей стоит использовать нестандартные иконки для каких то позиций, потому что им они будут более понятны. Мы ж ведь помним, что иконки — это не только  дизайн, это и ваши продажи. 
  2. Стоит дополнить иконки текстом, чтобы усилить эффект. Особенно. если они нестандартные. Заголовок и небольшое объяснение поможет получить максимум информации пользователю при чтении сайта.
  3. Не стоит создавать “какофонию” стилей. Это будет только “резать” глаз и отвлекать внимание посетителей. Любые значки на прозрачном фоне смотрятся лучше. Человеку их проще воспринимать. На подсознательном уровне, люди будут чувствовать несоответствие, даже если не смогут это объяснить. Нам такого не надо. Ничто не должно отвлекать человека от главного, сделать заказ.
  4. Иконка должна выглядеть корректно на любых экранах и должна быть распознана даже если она маленькая. Тут на помощь приходит векторная графика. Графические элементы в формате SVG могут масштабироваться. Стоит убедиться, что при изменении размера, смысл не теряется и по-прежнему понятно ясно, что же изображено.

Где скачать иконки для сайта бесплатно

Иконка, какая бы маленькая она не была, кем то создавалась. Авторское право. Поэтому стоит быть осторожным переходя по ссылкам с текстом “скачать бесплатно”. Стоит всегда обращать внимание, как и где  можно использовать данные изображения, стоит ли указывать ссылку на автора, возможно ли их изменять. Конечно в идеале иконки, как и любые иллюстрации для сайта, заказывают индивидуально, чтобы они были уникальными. Однако не всегда есть на это бюджет. Вот несколько ресурсов, которые можно использовать по прямому назначению — скачать:

  • https://pixabay.com. Это не специализированный сайт для скачивания бесплатных иконок. Там есть и изображения и видео. Если забить в поиске “значок”, “иконка” и поиграться с фильтрами и тегами, можно подобрать, как векторные, так и растровые. Есть возможность создать аккаунт. Тогда вы можете загружать и свои изображения, а так же избавитесь от captcha. Как указано на сайте: “Все содержимое выпущено по лицензии Pixabay, что делает его безопасным для использования, не запрашивая разрешения и не отдавая должное художнику — даже в коммерческих целях”.
  • https://www.iconfinder.com. Вам доступны как SVG, так и PNG иконки. Этот сервис возможно заслуживает отдельного обзора. Пробежимся по основным возможностям. Есть фильтры, поиск. категории и теги. Удобно, что благодаря фильтрам можно подобрать иконки по стилю, с необходимым видом лицензии, размеру. Можно поменять цвет фона сайта, и посмотреть как иконка будет смотреться на определенном фоне. После регистрации, доступно создание своих коллекций. Есть редактор. При оформлении подписки вам открывается больше иконок.
  • https://icon-icons.com/ru/. Как указано на сайте, это лучшие бесплатные иконки для личного и коммерческого использования (SVG — PNG). Есть фильтры по размеру, цвету, категории, теги.  Иконки векторные и растровые. Иконок много и в разном стиле. Для каждой иконки указана лицензия. Есть, как с необходимостью указания авторства, так и без. Можно отфильтровать по необходимому вам типу.
  • https://www.flaticon.com/. Нельзя не упомянуть про этот сервис. Он заслуживает отдельного обзора. Возможно тут меньше иконок, но можно найти уникальные и интересные. Тут только кратко.  Иконок много в разных форматах PNG, SVG, EPS, PSD, Base 64, и размерах:. Найти легко. Есть фильтры, теги. Есть даже встроенный редактор. Можно собирать свои коллекции после простой регистрации или воспользоваться готовыми. Свои можно скачать сразу пакетом. В сутки вы сможете скачать не больше  100 шт., если вы создали аккаунт. Можно скачивать иконки бесплатно и не создавая аккаунт. Тогда 10 иконок в день. В любом случае при бесплатном тарифе вам обязательно следует указать ссылку, которая прилагается ниже под кнопкой для скачивания. Это так называемая атрибуция. Подробнее об указании авторства. Оплатив подписку необходимость в указании авторства отпадает, а так же доступно еще больше иконок. 
  • http://endlessicons.com/.. Чтобы найти иконку, можно использовать теги и строку поиска. Иконки черно-белые. PNG, SVG. Скачивается архив с иконками в двух форматах. Для типовых задач подходит.

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

Как подобрать иконки для сайта — ваши действия

  1. Вы приглашаете специально обученного человека. объясняете задачу, он все подбирает, рисует и размещает.
  1. Для тех, “кто все сам” — простой алгоритм в качестве второго варианта.:
    1. Смотрим на сайт, глазами пользователя. Определяем где по тексту можно проиллюстрировать информацию, чтобы было понятно пользователю, что же вы хотели донести.
    2. Не выходя из образа вашего покупателя, представляем, какие особенности в дизайне иконок или размещении стоит использовать. Чтобы было понятно: для мам и для любителей мотоциклов, вы не будете использовать одинаковые изображения и иллюстрации. 
    3. Все должно вписываться в дизайн и подходить по стилю. 
    4. Если иконка понятна без текста —  это the best. Не забываем по устоявшиеся стереотипы у пользователей. Рядом с номером телефон не стоит изображать грузовик, там должен быть телефон.
    5. Ищем, что можно найти бесплатно и с нужной лицензией. Увеличиваем уникальность, если умеете редактировать изображения.

%d0%b8%d0%ba%d0%be%d0%bd%d0%ba%d0%b8 %d0%bf%d1%80%d0%b5%d0%b8%d0%bc%d1%83%d1%89%d0%b5%d1%81%d1%82%d0%b2%d0%b0 %d0%b4%d0%be%d1%81%d1%82%d0%b0%d0%b2%d0%ba%d0%b8 PNG, векторы, PSD и пнг для бесплатной загрузки

  • Мемфис дизайн геометрические фигуры узоры мода 80 90 х годов

    4167*4167

  • аудиокассета изолированные вектор старая музыка ретро плеер ретро музыка аудиокассета 80 х пустой микс

    5000*5000

  • схема бд электронный компонент технологии принципиальная схема технологическая линия

    2000*2000

  • поп арт 80 х патч стикер

    3508*2480

  • Мемфис шаблон 80 х 90 х годов стилей фона векторные иллюстрации

    4167*4167

  • 80 основных форм силуэта

    5000*5000

  • поп арт 80 х патч стикер

    3508*2480

  • green environmental protection pattern garbage can be recycled green clean

    2000*2000

  • набор векторных иконок реалистичные погоды изолированных на прозрачной ба

    800*800

  • мемфис бесшовной схеме 80s 90 все стили

    4167*4167

  • дизайн плаката премьера фильма кино с белым вектором экрана ба

    1200*1200

  • поп арт 80 х патч стикер

    2292*2293

  • 80 летний юбилей дизайн шаблона векторные иллюстрации

    4083*4083

  • милая ретро девушка 80 х 90 х годов

    800*800

  • Кубок 80 х с неоновым светом

    1200*1200

  • Традиционные цветочные наклейки в стиле ретро 80 х

    1200*1200

  • аль ба ис 99 имен аллаха

    1200*1200

  • Нерегулярная графика 80 х годов неоновый световой эффект

    1200*1200

  • Симпатичная наклейка в стиле ретро 80 х

    1200*1200

  • Ретро традиционные мультяшные наклейки 80 х

    1200*1200

  • Наушники 80 х годов неоновый световой эффект

    1200*1200

  • Корзина 80 х годов неоновый световой эффект

    1200*1200

  • Гитара 80 х годов неоновый световой эффект

    1200*1200

  • Ретро стикер 80 х

    1200*1200

  • Наклейки в стиле ретро 80 х

    1200*1200

  • Синяя наклейка в стиле ретро 80 х

    1200*1200

  • Наклейки в стиле ретро 80 х

    1200*1200

  • Наклейки в стиле ретро 80 х

    2500*2500

  • Наклейка в стиле ретро 80 х в мультяшном стиле

    1200*1200

  • Наклейки в стиле ретро 80 х

    1200*1200

  • Корейский медведь be quiet набор смайликов

    1200*1200

  • Нерегулярный прямоугольник 80 огней эффект неонового света

    1200*1200

  • аль ба ис 99 имен аллаха золото

    1200*1200

  • ценю хорошо как плоская цвет значок векторная icon замечания

    5556*5556

  • Наклейки на автомобиль ретро 80 х

    1200*1200

  • Микрофон 80 х знак неоновый световой эффект

    1200*1200

  • Стикер ретро 80 х годов вдохновляющая девушка

    1200*1200

  • Стикер ретро 80 х радуга

    1200*1200

  • Наклейки в стиле ретро 80 х

    1200*1200

  • Стикеры в стиле ретро 80 х

    1200*1200

  • скейтборд в неоновых цветах 80 х

    1200*1200

  • Стикер гитары ретро 80 х

    1200*1200

  • Стикеры ретро девушка 80 х

    1200*1200

  • 80 е брызги краски дизайн текста

    1200*1200

  • blue series frame color can be changed text box streamer

    1024*1369

  • Цветочные наклейки в стиле ретро 80 х

    1200*1200

  • Мемфис бесшовные модели 80 х 90 х стилей

    4167*4167

  • prohibited use mobile phone illustration can not be used

    2048*2048

  • горячая распродажа до 80 png дизайна с иллюстрацией

    2500*2500

  • be careful to slip fall warning sign carefully

    2500*2775

  • 4 главных преимущества использования иконок в веб-дизайне

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

    4 преимущества использования иконок в веб-дизайне

    1. Иконки — эффективные средства связи
    2. Иконки придают индивидуальность
    3. Иконки добавляют интереса
    4. Значки для помощи в навигации

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

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

    4 преимущества использования иконок в веб-дизайне

    1. Иконки — эффективные средства связи

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

    2. Иконки придают индивидуальность

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

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

    3. Иконки добавляют интереса

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

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

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

    4. Значки для помощи в навигации

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

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

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

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

    Выделитесь среди конкурентов с веб-сайтом Pixel Fish !

    Позвоните нам сегодня по телефону 02 9114 9813 или напишите по электронной почте info @ pixelfish.com.au


    Преимущества использования значков на вашем веб-сайте

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

    Вот 3 преимущества использования значков на вашем веб-сайте

    1. Передача информации

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

    2. Покажите личность

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

    3.Сохраняйте интересное

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

    Что нужно помнить

    Будьте осторожны с тем, что вы думаете о своем пользователе. То, что, по вашему мнению, означает значок, может отличаться от того, что думает ваш пользователь.Например, возьмем значок гамбургера : хотя он может быть мгновенно узнаваем дизайнерами, разработчиками и другими технически подкованными людьми как представляющий меню, несколько исследований показали, что это не все понимают. Исследование Джеймса Фостера показало, что сочетание значка гамбургера со словом «меню» увеличивает количество кликов на 7%. Помещение рамки вокруг значка, чтобы его внешний вид напоминал традиционную кнопку, увеличило количество кликов на 22%. Это исследование показывает, что кнопка гамбургера понятна не всем, и применима и к другим значкам.Поэтому при использовании значков на своем веб-сайте лучше всего сопровождать их текстом, если вы не уверены, что он будет понят для всех. Примером значков, которые могут быть понятны повсюду, являются значки домов, представляющие домашнюю страницу, или значки увеличительного стекла, обозначающие поиск. В противном случае вы можете запутать некоторых своих пользователей.

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

    Использование значков в дизайне веб-сайтов — см. Преимущества — High Five Media

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

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

    Культурные ограничения

    Если вы разрабатываете веб-сайт для международных пользователей, значки должны быть универсальными. Не должно быть ошибок перевода, а значки должны означать, что устная речь не пострадает. Значение, если значок должен быть одинаковым в разных культурах, не создавать двусмысленности и не должен мешать дизайну UX и UI.

    Адаптация к пользователю

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

    Используйте слова

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

    Скажи нет трендам

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

    Изменение размера

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

    Отсутствие визуального веса

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

    Улучшенный пользовательский интерфейс

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

    Посетите нас в High Five Media для дизайна бизнес-сайтов. Свяжитесь с нами, чтобы узнать о требованиях к цифровому маркетингу, а также о SEO, SMO и многом другом.

    5 преимуществ использования значков в инфографике

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

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

    Ниже приведены 5 причин, которые предоставят вам преимущества использования значков. Эти преимущества неподвластны времени и используются для достижения лучших результатов.

    • Они помогают сосредоточить внимание вашей аудитории.

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

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

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

    • Они упрощают понимание данных.

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

    • Они могут помочь вам сказать больше с меньшими затратами.

    С помощью значков легко изобразить что-то меньшим количеством слов.Например, вместо надписи «Интернет» можно добавить простой значок земного шара. Легко найти значки всех вещей, плюс есть инструменты, с помощью которых мы можем превратить что угодно в значки.

    • Они способствуют индивидуальности и репутации вашего бренда.

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

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

    • Флатикон
    • Иконки8
    • DaFont
    • Iconshock
    • Iconfinder

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

    аутсорсинг компании веб-дизайна Аутсорсинг веб-дизайна Индия аутсорсинг работы веб-дизайна компания веб-дизайна в Индии услуги веб-дизайна в Индии компания веб-разработки в Индии компания по разработке веб-сайтов в Индии

    Иконок в веб-дизайне; несколько советов и преимуществ | Apiumhub

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

    ОСНОВНЫЕ ПРЕИМУЩЕСТВА ИСПОЛЬЗОВАНИЯ ИКОН В ВЕБ-ДИЗАЙНЕ И UX-ДИЗАЙНЕ

    1.ОБРАТИТЕ ВНИМАНИЕ

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

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

    2. РАЗМЕСТИТЬ СОДЕРЖАНИЕ В NUTSHELL

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

    3.ПОВЫШЕНИЕ ЧТЕНИЯ

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

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

    4. УЛУЧШЕНИЕ ЭСТЕТИЧЕСКОЙ АПЕЛЛЯЦИИ

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

    5.УПРОЩЕНИЕ ЖИЗНИ ПОЛЬЗОВАТЕЛЕЙ

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

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

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

    9 СОВЕТЫ ПО ИСПОЛЬЗОВАНИЮ ИКОН В ВЕБ-ДИЗАЙНЕ

    1.ПРОВЕДИТЕ ПЕРВОЕ ИССЛЕДОВАНИЕ

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

    2. СОХРАНЯЙТЕ ПРОСТОЙ ДИЗАЙН

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

    4. ИСПОЛЬЗУЙТЕ ПРАВИЛО 5 СЕКУНД

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

    5. ВКЛЮЧИТЕ ВИДИМУ ТЕКСТОВУЮ ЭТИКЕТКУ

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

    Изображение взято из: Adobe blog

    6. УЗНАЙТЕ КУЛЬТУРНЫЕ РАЗЛИЧИЯ

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

    7. ОБЕСПЕЧЕНИЕ СООТВЕТСТВИЯ

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

    8. ИСПОЛЬЗУЙТЕ УНИКАЛЬНЫЕ ЦВЕТА И ФОРМЫ

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

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

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

    9.ТЕСТИРОВАНИЕ

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

    Плюсы и минусы значков в веб-дизайне

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

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

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

    Для этого иконкам нужны две вещи:

    1. Широкое признание
    2. Единое, широко признанное значение

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

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

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

    Но в цифровом мире иконы сталкиваются с некоторыми серьезными проблемами.Одно из самых больших — непоследовательное использование.

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

    Всеобщее признание и неуловимое глобальное определение

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

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

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

    Это может работать на вас или против вас.

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

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

    Культурные ограничения

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

    Это действительно жутковато вне контекста, тебе не кажется?

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

    Адаптация пользователя

    Как и другие средства коммуникации, значки являются динамическими — они находятся в постоянном состоянии семантического потока, на которое частично влияет их собственное использование.

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

    Если люди, использующие ваш сайт или цифровой продукт, ознакомились с результатами взаимодействия с определенным значком, продолжайте поддерживать отношения! Внезапное изменение значения символа в интерфейсе приводит к плохому UX.

    Представьте себе радикальное изменение этих значков. Так много Netflix и прохладных ночей испорчены.

    Неоднозначность сообщения и почему слова (по-прежнему) имеют значение

    Используйте свои слова

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

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

    Значки могут быть быстрее, но слова более надежны. А вместе они работают еще лучше!

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

    Избегайте моды

    Значки Vogue по определению никуда не денутся. Их приятно использовать для краткосрочных проектов, но для приложений, которые рассчитаны на длительный срок хранения, вы захотите придерживаться классики.

    В Hollow Icons Обри Джонсон объясняет свою реакцию, когда его попросили просмотреть мобильные проекты коллег.

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

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

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

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

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

    Без объяснений

    В девяти случаях из 10, если значок требует объяснения, он уже не работает. Знакомство возникает из-за повторения, а отклонения могут привести к путанице или плохому UX.

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

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

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

    Как мы можем улучшить?

    Используйте экономно и осознанно

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

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

    Обновленный дизайн навигации Facebook в 2013 году.

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

    Придерживайтесь условных обозначений

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

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

    Создайте осмысленный контекст

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

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

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

    Иконка ответственно

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

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

    Преимущества иконки «Избранное» на вашем веб-сайте | Веб-советы

    Преимущества значка «Избранное» на вашем веб-сайте

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

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

    Эти значки помогут вашему сайту выделиться среди других!

    Где Favicon?

    Квадратный значок 16×16 пикселей отображается либо слева от адреса веб-сайта (вашего URL) в строке местоположения в верхней части веб-браузера, либо на вкладках открытых страниц, как показано на изображениях ниже:

    Пример: рядом с адресной строкой

    Пример: на вкладках открытых окон браузера


    Различия в браузере

    Значок отображается в разных местах в зависимости от используемого браузера:

    Хром

    Firefox

    Кромка

    Internet Explorer


    Я люблю выделяться из толпы

    Значок избранного будет:

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


    Фавиконы в действии

    См. Примеры некоторых значков на этих клиентских сайтах:

    BeautyScoop
    Фермерский рынок Рентона
    Zonta Club of Yakima

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

    Если вас интересует значок избранного для вашего веб-сайта, свяжитесь с Yakindo Web Designs прямо сейчас!

    .

    Добавить комментарий

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