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

Содержание

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

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

Содержание

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

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

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

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

Векторные (формат SVG).
Такие иконки масштабируются без потери качества и поддерживают канал прозрачности.
Растровые (формат PNG).
Растровые иконки в веб-дизайне целесообразно применять именно в PNG-формате: он имеет канал прозрачности и лучше подходит для картинок с относительно небольшим количеством цветов, чем формат JPG.
Символьные (форматы шрифтов).
В веб-дизайне нередко применяются иконочные шрифты (например:
FontAwesome, IcoMoon), содержащие множество иконок в качестве символов. Минус таких иконок в ограничении цвета и стиля: это всего лишь символы.

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

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

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

Контурная

Плоская

Объемная

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

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

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

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

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

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

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

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

Font Awesome.
Самый популярный иконочный шрифт, который изначально создавался для Bootstrap.
Иконки из Font Awesome
IcoMoon.
Иконки из этого шрифта применяются в админке Joomla 3.x.
Иконки из IcoMoon
Themify Icons.
Этот бесплатный шрифт включает более 320 контурных иконок.
Иконки из Themify Icons
Fontello.
Это не шрифт, а веб-сервис, позволяющий создавать наборы нужных к применению на сайте иконок из представленного набора и сохранять их в формате шрифта.

Сервис Fontello

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

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

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

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

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

Переходим на www.iconfinder.com.
В строку поиска вводим запрос Joomla и ищем.
Откроется страница с результатами поиска. Стоимость платных иконок указана в левом нижнем углу иконки. Отфильтровать платные иконки можно с помощью фильтра в левой части страницы.
Для скачивания бесплатной иконки в нужном формате (в формате PNG иконка будет иметь размер 128×128 px) нужно кликнуть по названию формата левом нижнем углу иконки.
Если необходимо скачать в формате PNG с размером 512×512, 256×256 px или с другим размером, в другом формате, то кликните по стрелке в левом нижнем углу иконки и выберите нужный вариант из контекстного меню.
Из этого же контекстного меню можно перейти в онлайн-редактор иконки, нажав Open in Icon Editor: откроется страница редактрования, где можно изменить размер, цвет иконки, добавит текст и много другое. Для скачивания отредактированной иконки нужно нажать Download Icon в правом верхнем углу редактора.

пп. 1, 2

п. 3

пп. 4, 5

п. 6

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Линейные

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

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

Иллюстрации

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

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

Объемные

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

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

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

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

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

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

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

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

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

Где «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

Более 500 совершенно бесплатных и свежих иконок для Ваших новых и будущих веб — сайтов

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

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

Так же рекомендую посмотреть Вам прошлые подборки с иконками:

Социальные иконки в виде марок

Скачать

Разноцветные иконки закладок

Скачать

Иконки социальных сетей нарисованных от руки

Скачать

Прямоугольные иконки социальных закладок

Скачать

36 бесплатных винтажных иконок социальных сетей

Скачать

Несколько красивых квадратных иконок с закладками

Скачать

Круглые иконки закладок для тёмных сайтов

Скачать

Маленькие и квадратные иконки социальных сетей

Скачать

Минималистические иконки в светлом стиле

Скачать

Классные красные иконки в Метро стиле

Скачать

Ещё несколько монохромных иконок белого цвета

Скачать

E-Commerce иконки

Скачать

Набор иконок для школьника

Скачать

Экологические иконки

Скачать

Классные иконки для фотографа

Скачать

Летние и пляжные иконки

Скачать

Несколько классных иконок для сайта

Скачать

Очень красивые иконки для сайта

Скачать

Несколько красивых иконок в светлом стиле

Скачать

Несколько красивых системных иконок

Скачать

Красивые иконки в светлом стиле

Скачать

Системные иконки в светлом стиле

Скачать

Системные иконки в стиле метро

Скачать

30 красивых системных иконок

Скачать

Глиф — иконки — это иконки сделанные в PSD формате, которые можно редактировать в Фотошопе без потери качества.

Светлые глиф иконки на сайт

Скачать

Тёмные глиф иконки для Вашего сайта

Скачать

Несколько красивых ретро иконок

Скачать

Маленькие пиксельные иконки

Скачать

Маленькие глиф иконки для интернет магазинов

Скачать

Множество монохромных глиф иконок

Скачать

Глиф иконки от руки на сайт

Скачать

Классные иконки в мини стиле

Скачать

Светлые иконки для тёмных сайтов

Скачать

Мини глиф иконки

Скачать

Ещё одни мини иконки на сайт

Скачать

Иконки для сайтов с тёмным дизайном

Скачать

Светлые глиф иконки

Скачать

Тёмные иконки для светлых сайтов

Скачать

50 тёмных иконок

Скачать

Чёрные глиф иконки для сайта

Скачать

Иконки Token

Скачать

350 векторных иконок

Скачать

Красивые серые иконки

Скачать

Минималистические иконки

Скачать

Чёрные мини глиф иконки

Скачать

Иконки браузеров

Скачать

120 глиф иконок

Скачать

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

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

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

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

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

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

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

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

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

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

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

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

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

Список услуг

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

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

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

Контакты

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

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

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

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

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

Иллюстрации

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

Объемные

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

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

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

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

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

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

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

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

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. Смотрим на сайт, глазами пользователя. Определяем где по тексту можно проиллюстрировать информацию, чтобы было понятно пользователю, что же вы хотели донести.
2. Не выходя из образа вашего покупателя, представляем, какие особенности в дизайне иконок или размещении стоит использовать. Чтобы было понятно: для мам и для любителей мотоциклов, вы не будете использовать одинаковые изображения и иллюстрации.
3. Все должно вписываться в дизайн и подходить по стилю.
4. Если иконка понятна без текста — это the best. Не забываем по устоявшиеся стереотипы у пользователей. Рядом с номером телефон не стоит изображать грузовик, там должен быть телефон.
5. Ищем, что можно найти бесплатно и с нужной лицензией. Увеличиваем уникальность, если умеете редактировать изображения.

9 сайтов, о которых вы должны знать

Когда заказчик приходит к дизайнеру с заданием нарисовать иконку, его волнует два вопроса: стоимость работы и сроки исполнения. Дизайнеру же для ответа нужно четко понимать, что конкретно хочет заказчик. Хорошо, если знаешь, как выглядит иконка-мечта. Но что делать, если не понимаешь, чего хочешь? Ответ прост — смотрите на работы других и прислушивайтесь к себе. Мы собрали девять сайтов, которые помогут вам в этом.

Прежде чем писать дизайнеру иконок

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

Шаг #1: Потратьте время на изучение уже существующих коллекций иконок. Ваша задача смотреть, смотреть и еще раз смотреть.
Шаг #2: Отберите те, которые вам понравились. Скопируйте картинку в Word и опишите что именно понравилось (форма, цветовое решение, идея, стиль), почему иконка пришлась по душе.
Шаг #3: Отберите иконки, которые современны, но не понравились. Также сохраните иконку и опишите, что в иконке не то.
Шаг #4: Опишите что делает ваша программа и сформулируйте требования уже к вашей собственной иконке. Если есть какие конкретные пожелания к метафоре — их тоже запишите.
Шаг #5: С получившимся документом идем к дизайнеру. Теперь получить оценку будет легко и просто.

Где найти примеры современных качественных иконок

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

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

На этом сайте можно посмотреть на варианты иконок отдельно для MAC, а отдельно для iOS. Суммарно более 200 вариантов иконок всех стилей и тематик. Сайт постоянно обновляется и пополняется новыми образцами.

На девяти страницах собрано более 100 иконок для iOS. Недостаток ресурса – нет рубрикатора, так что вам придется пролистать все 9 страниц. Плюс ресурса есть как известные иконки, так и менее популярные образцы.

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

Нестандартный подход – использовать pinterest для поиска иконок. Но, если вы зададите в графе поиск «IOS» и «Icon» результат вас удивит. Аналогично работает для Android Icon. А вот с Windows Icon не получится :(. Но в нашем портфолио уже сотни примеров, будет из чего выбрать.

Все, что было сказано строкой выше о pinterest можно смело применить к flickr. Ключ к успеху поисковый запрос «iOS App Icons».

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

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

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

Источник: icondesignlab

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

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

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

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

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

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

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

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

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

Что-то, о чем нужно помнить

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Скажи нет тенденциям

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

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

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

Недостаток визуального веса

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

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

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

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

Значок Удобство использования

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

К преимуществам иконок в графическом интерфейсе пользователя (GUI) относятся:

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

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

«Универсальные» иконки — редкость

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

Значок 3-строчный hamburger — отличный пример значка, который стремится стать всемирно известным.В то время как большинство интерфейсов используют этот значок для представления главного меню навигации, некоторые используют тот же (или очень похожий значок) для обозначения списка. Например, приложение для управления списком Buy Me a Pie использует трехстрочный значок как способ доступа к списку часто добавляемых элементов. Чтобы еще больше запутать, значок помещается справа от текстового поля, место, обычно связанное с кнопкой отправки. (Текстовое поле и значок списка имеют разные функции: если вы думали, что ввод текста в поле ввода и затем выбор значка меню предоставит суженный список подходящих элементов, вы ошиблись.)

Приложение Buy My a Pie (здесь, на Android) использует красочную версию 3-строчного значка гамбургера (в кружке), чтобы позволить пользователям получить доступ к списку общих элементов, функциональность, которая отличается от более распространенного меню навигации имея в виду. Окраска слишком тонкая, чтобы пользователи могли понять, что этот значок имеет другое значение.
Другие значки, которые пользователи часто неправильно понимают, включают сердце и звезду . Эти значки часто используются для обозначения избранного, закладок, избранных элементов и оценок других пользователей.Мало того, что точные функции, связанные с этими значками, варьируются от сайта к сайту, эти два значка конкурируют друг с другом. В результате эти значки и их точное значение трудно запомнить и точно интерпретировать. Например, значок в виде сердечка на сайте Combadi со списком отпусков позволяет пользователям отмечать, что им «нравится» поездка, но не сохраняет эту поездку в коротком списке, чтобы облегчить использование ссылок в будущем. (Пользователям, участвовавшим в нашем недавнем исследовании удобства использования, не нравилось, что кто угодно может «полюбить» поездку, в отличие от только тех, кто действительно ее купил.В отличие от этого, сайт покупок, посвященных дизайну интерьера, использует значок в виде сердца, чтобы пользователь мог сохранить этот предмет, чтобы потом легко его найти.
Значок сердца на Combadi (под основным изображением) имеет ограниченную функциональность по сравнению со значком сердца на Fab (справа от названия продукта), так как он не сохраняет показанный элемент в списке избранного, несмотря на использование тот же значок и аналогичное размещение.
Даже небольшое различие в значении и функциональности мешает пользователю понимать значок и полагаться на него, когда он будет встречаться в будущем.
Буквально на прошлой неделе мы сообщили о нашем исследовании удобства использования веб-сайта, на главной панели навигации которого используется значок часов. В то время как сам рисунок был легко узнаваем как часы, , означающий значка, был совершенно неясным, потому что это было нестандартное использование концепции часов или часов: значок часов используется для обозначения истории навигации и открывает ящик с самыми последними страницами, которые посетил пользователь. Ни один участник теста не щелкнул по этому значку. Непонятный значок = потерянная функция .
Иконки требуют текстовой метки
Чтобы помочь преодолеть неоднозначность, с которой сталкиваются почти все значки, текстовая метка должна присутствовать рядом со значком , чтобы прояснить его значение в этом конкретном контексте. (И даже если вы используете стандартный значок, часто безопаснее включать метку, особенно если вы слегка изменили значок в соответствии со своими эстетическими предпочтениями или ограничениями.)
Ярлыки значков должны быть видны постоянно , без какого-либо взаимодействия со стороны пользователя.Для значков навигации особенно важны метки. Не полагайтесь на при наведении указателя мыши на текстовые метки: это не только увеличивает стоимость взаимодействия, но также не может хорошо отображаться на сенсорных устройствах.
Веб-сайт Usability.gov использует значки навигации для методов , шаблонов и документов и руководящих принципов на каждой странице сайта. Если бы я попросил каждого человека, читающего эту статью, прислать мне значок, представляющий Методы , я уверен, что получил бы широкий выбор дизайнов.Как мы заявляли в рамках наших рекомендаций по дизайну для удобства использования домашней страницы много лет назад, «если вы обнаружите, что вам нужно подумать, чтобы придумать значок для навигации, скорее всего, он не будет легко узнаваемым или интуитивно понятным для пользователей». В то время как мобильная версия сайта признает, что текстовые метки должны сопровождать значки, чтобы придать какое-то значение, настольная версия скрывает эти метки, пока любопытный пользователь не решит навести на них курсор. Фиксация этих элементов навигации в левой части страницы, чтобы они оставались доступными для пользователей при прокрутке, указывает на то, что организация считает их важными и полезными.Однако удаление этих значков текстовых меток делает их совершенно бессмысленными и контрпродуктивными для обеспечения легкого доступа к контенту.
На веб-сайте Usability.gov для мобильных устройств текстовые метки отображаются рядом со значками в верхней части страницы. В настольной версии значки фиксируются в левой части страницы и отображаются только при наведении курсора. Принуждение пользователей к поиску ярлыков снижает эффективность навигации по значкам.
Относительный размер помогает заметности
В общем, значки обычно более заметны на мобильных телефонах, чем на веб-сайтах и приложениях для настольных компьютеров.Легко предположить, что, поскольку значок (например, гамбургер) работает в мобильном дизайне, он хорошо переносится на рабочий стол. Увы, это не так! На мобильных экранах меньше элементов, конкурирующих за внимание пользователей (просто потому, что экран меньше и вмещает меньше информации). Напротив, экраны рабочего стола больше и обычно содержат много контента; пользователи могут легко пропустить некоторые из них в зависимости от того, какая часть экрана привлекает их внимание. Если единственные элементы, которые в настоящее время видны на телефоне, состоят из логотипа, заголовка, одного изображения и значка меню, этот значок меню имеет гораздо больше шансов быть замеченным пользователем, чем тот же значок, представленный в верхнем углу. настольного сайта с привлекательным контентом.
Также учитывайте относительный размер значка по сравнению с другими визуальными элементами, представленными на экране. В типичном заголовке мобильного веб-сайта значок гамбургер-меню занимает примерно 20–25% доступной ширины экрана. Когда этот дизайн масштабируется на более крупном устройстве, размер значка обычно остается примерно таким же. В результате на настольных компьютерах (и планшетах большего размера, особенно в альбомной ориентации) значок будет меньше на и менее заметным по сравнению с другими элементами на экране.Этой проблемы можно избежать на больших экранах (где обычно много места), просто сделав навигацию видимой, а не сворачивая ее под значком. Таким образом, вы не только сможете легче обнаруживать пункты меню, но и сможете избежать многих проблем с удобством использования, которые возникают из-за сокрытия глобальной навигации.
Upworthy.com: В дизайне веб-сайта для мобильных устройств пространство, отведенное для трехстрочного значка гамбургера в главном меню (вверху слева), занимает около 20% ширины панели навигации под логотипом сайта.При просмотре на рабочем столе значок главного меню отображается с теми же размерами, а ширина панели навигации увеличивается. В результате значок занимает всего около 3,5% от общей ширины рабочего стола (и это измерение даже не включает желоба по обе стороны от содержимого сайта). Эта разница в относительном размере и количестве элементов, борющихся за внимание, объясняет, почему значок меню имеет тенденцию быть более заметным на мобильных устройствах.
Советы по дизайну с помощью иконок
Если вы решите включить значки в свой интерфейс, проведите исследование сначала ! Ознакомьтесь с иконками , используемыми вашими конкурентами , и с иконками, обычно используемыми на платформах, на которые вы нацеливаете , так как они будут наиболее узнаваемы для ваших пользователей.
Если вам необходимо разработать новые значки, постарайтесь сделать их легко узнаваемыми и запоминающимися, следуя этим рекомендациям:
Сохраняйте дизайн простым и схематичным . Уменьшите количество графических деталей, сосредоточившись на основных характеристиках объекта, а не создавая высокореалистичное изображение, чтобы ускорить распознавание. (Сложные детали трудно различить при меньших размерах.)
Используйте правило 5 секунд : если вам требуется более 5 секунд, чтобы придумать подходящий значок для чего-либо, маловероятно, что значок может эффективно передать это значение.
Проверьте значки на узнаваемость : спросите людей, что они ожидают от значков.
Проверьте значки на запоминаемость. : спросите у нескольких пользователей, могут ли они запомнить значение значка после того, как им рассказали, что он представлял, двумя неделями ранее.
И всегда включают видимую текстовую метку . Как однажды сказал Брюс Тоньяццини, «слово стоит тысячи картинок».
Узнайте больше о конструктивных особенностях при создании интерфейсов для устройств разных размеров в нашем дневном учебном курсе по масштабированию пользовательских интерфейсов, а также о компонентах навигации и стилях меню в дневном курсе Navigation Design.
Как использовать иконки в дизайне веб-сайтов
Как использовать иконки в дизайне веб-сайтов
Стратегические и технические методы добавления значков в ваш веб-дизайн
Иконки играют важную роль в современном веб-дизайне. Фактически, вам будет сложно найти веб-сайт, на котором не используются значки в той или иной форме, даже если это просто использование значков социальных сетей в нижнем колонтитуле. Иконки могут использоваться на вашем веб-сайте для различных целей, в том числе:
Замена текстового содержимого
Наиболее распространенное использование значков в веб-дизайне — замена текстового содержимого.Часто это делается для каких-либо кнопок или ссылок. Вышеупомянутый значок социальной сети является примером такой практики. Вместо текста вроде «Посетите нашу страницу в Facebook» используется значок с логотипом Facebook. Эту замену текста также можно выполнить в меню навигации. Использование значков вместо кнопок с более длинным текстом — это обычная дизайнерская обработка, особенно в дизайне приложений и для адаптивных веб-сайтов.
При использовании значков для замены текста вы должны помнить о ясности и осторожно, чтобы не переборщить.Использование значков вместо текста может быть чрезвычайно полезным, поскольку вы стремитесь создать более чистый общий дизайн и оптимизированный пользовательский интерфейс, но если значение, стоящее за вашими значками, неясно или если вы переборщите с тем, как вы используете эти значки, любые преимущества, на которые вы надеялись реализовать будет быстро отменено.
Экономия места
Заменяя текстовое содержимое значками, вы неизбежно сэкономите место в своем дизайне. Это очень привлекательный вариант для небольших экранных версий адаптивных веб-сайтов.Когда на этих маленьких экранах не хватает места, использование небольшого значка для пунктов меню или для иллюстрации других действий — это один из способов максимизировать доступное вам пространство.
Общайтесь, несмотря на языковые различия
В физическом мире мы видим, что значки используются постоянно. От дорожных знаков до вывесок, используемых для туалетов, значки могут преодолевать языковые барьеры и передавать смысл, несмотря на различия в языке. Это же преимущество может применяться к цифровым интерфейсам, но, опять же, вы должны убедиться, что ваши значки четкие и смысл, стоящий за ними, очевиден.Не все аналогии работают для каждого языка, поэтому вам следует быть осторожными при выборе значков, особенно если они предназначены для ключевых действий на сайте.
Подчеркнуть текст
В некоторых случаях значки не используются для замены текста, а фактически предназначены для добавления смысла в текст сайта. Это может быть особенно полезно при иллюстрации многоэтапного процесса или в качестве выделения определенных функций или функций. Простой пример этого можно увидеть здесь, в About.com. На главной странице этого сегмента веб-дизайна вы увидите большое изображение, которое используется для избранной статьи. Внизу изображения вы найдете слово «Поделиться» со значком стрелки. Эта кнопка позволяет вам поделиться этой статьей в социальных сетях, а функциональные возможности представлены как текстовой меткой, так и сопровождающим значком. В другом месте на этой странице вы увидите отдельный значок, который является примером пункта «заменить текстовое содержимое», описанного ранее в этой статье.
Добавьте немного веселья
Еще один способ использования иконок — это добавить немного забавы к дизайну сайта. Иллюстрированные элементы могут добавить немного причуды интерфейсу, в зависимости от того, как они используются. Конечно, не каждый дизайн позволяет добавить «веселья», но вы будете удивлены, когда можно использовать чувство веселья и восторга — а преимущества такого подхода значительны. В конце концов, восхитительный опыт часто остается незабываемым, а создание незабываемых впечатлений — это то, к чему стремятся все веб-сайты.
Как добавить значки
Есть несколько способов добавления значков на ваш веб-сайт. К ним относятся:
Встроенные изображения — файлы изображений, включая JPG, GIF и PNG, могут быть добавлены непосредственно в HTML-код вашего сайта.
CSS — вы также можете использовать фоновые изображения CSS для добавления значков к элементам HTML, таким как ссылки. Вы даже можете использовать методы замены изображений CSS, чтобы «стереть» текст HTML и оставить только значок на месте.Вы также можете использовать спрайты изображений, чтобы собрать все значки, необходимые для вашего дизайна, в один файл, тем самым уменьшив количество HTTP-запросов, которые ваш сайт должен сделать для загрузки этих значков.
SVG — Масштабируемая векторная графика также может быть добавлена как встроенные изображения, а преимуществом SVG является возможность масштабирования для различных устройств и размеров экрана. Иконки идеально подходят для выполнения в виде файлов SVG, и размер файла этих изображений часто очень мал, что помогает улучшить общую производительность веб-сайта.
Иконочные шрифты — в некоторых случаях файлы шрифтов, состоящие из значков, также могут использоваться на веб-сайте. Как и другие файлы шрифтов, эти символы можно масштабировать для различных размеров, но требовать от посетителей загрузки всего файла шрифта только для одного или двух глифов значков часто является ненужным требованием. Если вам нужно использовать несколько значков в шрифте, это возможный вариант, но в противном случае файл SVG или другое изображение, вероятно, будет лучшим выбором
Об авторе : Дайан Х.Вонг — специалист по поисковой оптимизации и бизнес-тренер. Кроме того, она пишет исследовательские работы в службе, где каждый может попросить «написать для меня эссе», поэтому она предпочитает тратить свое свободное время на разработку маркетинговых стратегий. В этом случае у нее есть возможность поделиться своим опытом с другими и не отставать от передовых технологий.
бесплатных и премиум-источников иконок
Перед отъездом на вечеринку многие люди завершают свой образ аксессуарами — украшениями, часами, сумками, подходящей обувью или, возможно, шарфом.Точно так же умные веб-дизайнеры и владельцы сайтов добавляют значки на недавно разработанный сайт перед запуском.
Иконки и аксессуары обеспечивают застегнутое чувство завершенности (каламбур, безусловно, подразумевается) и помогают донести до других основное чувство стиля или индивидуальности. В случае с аксессуарами — это другие люди, которых вы встретите ночью в городе. В случае вашего веб-сайта это ваши пользователи и посетители, и они самые важные люди, на которых вам нужно произвести впечатление.
Вот как это делают значки.
Преимущества иконок
Они могут показаться маленькими и даже несущественными, но на самом деле значки являются довольно важными компонентами дизайна для любого веб-сайта, предоставляя ряд преимуществ владельцам умных сайтов. Фактически, они могут быть важным аспектом хорошего дизайна сайта, пусть даже и маленьким.
Прежде всего, хороший набор иконок поможет вам донести важную информацию о вашем сайте и вашем бренде до ваших пользователей. Связывая ключевой контент с уникальным значком, вы помогаете пользователям лучше понять, каким контентом вы делитесь, для какой аудитории этот контент предназначен и для чего предназначен ваш сайт (или конкретная страница).
На самом деле, хорошо продуманные значки на самом деле становятся визуальными подсказками для ваших пользователей, сообщая, куда им нужно двигаться дальше, гораздо быстрее, чем просто текстовое описание. Значок действует как своего рода стенография или мгновенное общение. Это помогает улучшить взаимодействие с пользователем на вашем сайте, что увеличивает время пребывания на сайте, коэффициент конверсии и другие показатели, улучшающие результаты вашей поисковой системы.
Например, если у вас есть контент, который вы хотите направить определенным сегментам вашей аудитории, вы можете создать отдельные значки для каждого сегмента.Вы также можете использовать значки для обозначения различных областей или страниц в зависимости от задач, которые пользователь хочет выполнить для своей задачи. Прекрасным примером этого является небольшой значок, расположенный на главной странице Origin Energy.
Хорошо продуманный набор значков также поможет вам лучше рассказать о личности вашего бренда или организации. Игривые, красочные иконки в ярких оттенках и забавный дизайн передадут беззаботное чувство прихоти вашего бренда. С другой стороны, мрачный классический дизайн в приглушенных серых и темно-синих тонах передает более традиционный и серьезный характер бренда.
Иконки также помогают поддерживать единообразие визуального оформления вашего сайта. Вместо разнообразных изображений, хорошо подобранный набор значков в вашей цветовой схеме, которые соответствуют единому стилю или внешнему виду, помогут вам установить и усилить ваш бренд.
Наконец, значки помогают передать чувство надежности и долговечности. Бренды-однодневки, которые исчезают за несколько недель, обычно не вкладывают средства в дизайн иконок как продолжение брендинга. Таким образом и стратегическое использование значков на сайте сообщает вашей аудитории, что вы серьезно относитесь к своей миссии и намерены оставаться с ней надолго.
Где использовать значки на вашем сайте
Иконки следует использовать экономно и в наиболее заметных местах вашего сайта. Как и в случае с изображениями, чрезмерная зависимость от значков снижает их визуальное воздействие, что снижает пользу для вашего сайта.
Начните с поиска мест, которые могут использовать некоторый визуальный контекст для вашего письменного контента. Ключевыми примерами являются любые элементы навигации к страницам верхнего уровня в информационной архитектуре вашего сайта, а также ссылки на целевые страницы или страницы с содержанием, организованным по основным темам, сегментам аудитории или задачам пользователя.
Помните, что если вы организовали информационную архитектуру своего сайта вокруг определенных задач или сегментов аудитории, использование значков поможет пользователям, которые еще не знакомы с вашим сайтом, добраться туда, куда им нужно. Когда вы помогаете пользователям легко и быстро находить то, что они ищут, вы укрепляете доверие и доброжелательность аудитории по отношению к своему бренду.
Также ищите ссылки, которые интуитивно связаны со значками, такими как номера телефонов (идеальное место для размещения значка телефона), адрес электронной почты (значок «@» или стилизованный конверт) и значки социальных сетей.
На что обращать внимание в большом наборе иконок сайтов
Независимо от того, заказываете ли вы уникальный набор пользовательских значков у дизайнера или загружаете бесплатный набор с веб-сайта, вы должны ставить потребности вашего сайта на первое место. Ищите значки, соответствующие следующим критериям:
Они должны быть однородными . Другими словами, они должны выглядеть как совпадающий набор (или похожи друг на друга).
Они должны соответствовать вашей цветовой схеме . Близко недостаточно.Иногда небольшие различия в оттенках могут создавать визуальное отключение на вашей странице, которое раздражает человеческий глаз. Кстати, это не обязательно означает, что они должны быть одного оттенка. На самом деле, выбор дополнительных цветов часто бывает более разумным и выразительным выбором.
Им необходимо согласовать с другими визуальными элементами вашего бренда, включая общее «ощущение» или индивидуальность вашего бренда. Вам не нужны уравновешенные, консервативные синие значки, когда ваш бренд будет больше соответствовать беззаботным, градиентным синим значкам.
Они должны быть доступны в формате SVG и отлично выглядеть при всех размерах, включая очень маленькие и очень большие, потому что не каждый пользователь отобразит вашу страницу на 100%. Некоторые предпочитают другие размеры по разным причинам (в том числе из-за нарушения зрения).
Где найти отличные иконки для использования на страницах вашего веб-сайта
Многие дизайнеры сайтов включают в свои пакеты набор часто используемых дизайнов значков. Например, вы получите цветные и тематические значки для электронной почты, телефонных номеров, версий мобильных сайтов или приложений, а также основных социальных сетей (т.е., Facebook, Twitter, Instagram и YouTube, если не больше). Если дизайнер не включает набор иконок в пакет дизайна сайта, вы также можете приобрести один для своего сайта в качестве дополнительной услуги за дополнительную плату.
Как правило, наборы значков, приобретенные у дизайнеров в качестве надстроек или как часть существующего пакета дизайна, не изменяются. Другими словами, ваши значки будут (или должны быть) согласованы по цвету с цветовой схемой вашего сайта, но они не будут уникальными для вашего бренда.Некоторые другие бренды, покупающие такой же пакет или надстройку, могут использовать точно такой же набор значков на своем сайте. Таким образом, хотя этот вариант дает вам больше возможностей для настройки и контроля внешнего вида значков, чем, скажем, загрузка бесплатного набора из Интернета, это не полностью индивидуальное решение.
Для этого вам нужно будет либо создать свои собственные значки, либо нанять дизайнера, который сделает это за вас. Однако имейте в виду, что индивидуальный дизайн обойдется вам в несколько сотен долларов или больше.С другой стороны, загрузка бесплатных наборов иконок дает вам очень мало контроля над эстетикой набора. Решите, что будет поддерживать ваш бюджет, а затем выберите лучший вариант в этом ценовом диапазоне. Вы всегда можете выполнить обновление позже, когда позволит ваш бюджет.
Веб-сайт для получения бесплатных иконок для коммерческого использования
Создаете ли вы слайд-шоу или визитную карточку, вам придется искать броские значки, чтобы завершить свои проекты. Вы должны знать, что в Интернете полно бесплатных изображений и значков, которые вы можете использовать в любых дизайнерских проектах.Большинству веб-дизайнеров или разработчиков приложений для создания шаблонов требуется огромный список этих значков. Если вы хотите создать конкретное приложение или шаблон веб-сайта, вам придется искать идеальный ресурс, который предоставит вам бесплатные значки, которые вы можете использовать.
Чтобы выбрать значки наилучшего качества для вашего коммерческого проекта, вы можете начать свое исследование и найти веб-сайты, с которых вы можете легко загрузить эти значки. Мы поделимся несколькими ресурсами, которые вы можете использовать, чтобы получить бесплатные значки для коммерческого использования.Давайте посмотрим на веб-сайты, где вы можете легко загрузить бесплатные и платные значки для коммерческого использования.
5 бесплатных исходников иконок
Существует множество бесплатных источников, которые вы можете изучить, чтобы найти иконки лучшего качества для ваших дизайнерских проектов. Вот некоторые из них, которые следует учитывать.
IconStore
Icon Store считается одним из лучших бесплатных источников для поиска лучших иконок для вашего профессионального проекта. На этом веб-сайте вы найдете ряд бесплатных иконок в нескольких категориях.Если вы ищете значки для своего интернет-магазина или веб-сайта с едой, вы сможете найти броские значки. Icon Store также предлагает значки премиум-класса, которые вы можете использовать для своего дизайн-проекта. Вы сможете найти более 20 категорий, в которых вы сможете найти нужные значки. Каждому веб-дизайнеру необходимо иметь доступ к таким ресурсам, и этот веб-сайт предоставит вам несколько вариантов.
Обтекаемые иконки
Вот еще один отличный источник для поиска высококачественных иконок для вашего индивидуального проекта веб-дизайна.Чтобы найти лучшие значки, у вас будет возможность выбрать из более чем 30 000 значков. На веб-сайте также есть опции «Иконки в действии» и «Brand Love’m», которые помогут вам найти отличные иконки для вашего проекта. Вы также сможете найти несколько категорий, включая «пользовательский интерфейс» и «социальные сети», где вы можете найти свои любимые значки. На сайте также есть значки премиум-уровня, которые вы можете использовать в своих профессиональных проектах.
Программные символы
Softicons также считается пионером в получении иконок для ваших профессиональных проектов.Вы сможете найти множество бесплатных иконок, которые можно использовать для своего веб-дизайна или любого другого профессионального проекта. Есть творческие категории, которые вы можете изучить, включая значки Android, значки бизнеса, значки игр и многое другое. Кроме того, веб-сайт также предоставит вам несколько услуг, включая конвертер изображений в значки, генератор значков и несколько значков премиум-класса. Если вы ищете качественные иконки для своего проекта, вам следует подумать об использовании этого конкретного веб-сайта.
1001 Бесплатные загрузки
Это один из крупнейших ресурсов, доступных в Интернете для загрузки значков, векторных изображений и фотографий для ваших профессиональных проектов.Вы можете легко найти стоковые иконки самого высокого качества, которые обеспечат вам отличную ценность. Вы можете загружать фотографии, векторы, значки, шрифты, градиенты, узоры, текстуры и многое другое с помощью этого конкретного веб-сайта. Если вы ищете лучший клипарт, вам стоит подумать о посещении этого веб-сайта для своего коммерческого проекта. Сайт предлагает бесплатные иконки и векторы самого высокого качества для коммерческого использования.
FreePik
Если вы ищете высококачественные значки для коммерческого использования, вам следует рассмотреть этот конкретный веб-сайт.Он имеет большую базу данных профессиональных иконок, которые вы можете использовать в своих коммерческих проектах веб-дизайна. Кроме того, вы сможете найти множество значков премиум-класса, которые можно использовать на веб-сайте вашего клиента. Вы также можете найти векторные изображения, фотографии, PSD и многое другое на этом веб-сайте. Вы можете бесплатно скачать лицензионные иконки и векторы. Однако, если вы ищете товары премиум-класса, вы сможете найти желаемые товары.
Премиум-исходники для иконок
Если вы сосредоточены на создании коммерческого проекта с иконками премиум-класса, то вы найдете несколько веб-сайтов, где вы можете приобрести иконки премиум-качества для своего проекта.Вот несколько упоминаний, на которые стоит обратить внимание.
Пиконы
Если вы работаете над презентацией или создаете профессиональный веб-дизайн, то вы можете проверить пиконы, чтобы найти значки премиум-уровня. Он считается одним из самых популярных магазинов иконок, где вы можете найти массу значков премиум-уровня для вашего коммерческого проекта. Вы также сможете изучить предложения пакетов, в которых вы можете получить доступ к тысячам значков для коммерческого использования. Если вы думаете о создании интернет-магазина или креативного дизайна для веб-сайта, вы сможете выбрать из тысяч креативных иконок из этого магазина.
Iconfinder
Если вы работали в индустрии веб-дизайна, вы должны быть знакомы с Iconfinder. Это один из лучших источников для поиска значков премиум-уровня. Если вы не знаете, как создать потрясающий веб-дизайн с помощью значков премиум-уровня, вам следует подумать о посещении этого веб-сайта. Вы сможете найти множество отличных иконок, которые можно использовать для профессионального и коммерческого использования. Существует более 50 категорий, которые вы можете изучить, чтобы найти креативные и полезные значки для коммерческого использования.
Шрифт Awesome Pro
Вы, должно быть, слышали о Font Awesome и должны быть знакомы с имеющимися там запасами. Если вы хотите найти значки премиум-класса для коммерческого использования, вам также следует попробовать Font Awesome Pro. Font Awesome Pro может предоставить вам высококачественные значки для коммерческого использования с годовой подпиской. Вы можете получить столько иконок, сколько захотите, всего за 60 долларов в год. Вы также получите премиальную поддержку с этого веб-сайта.
Важность значков социальных сетей для сайтов электронной коммерции и их правильная установка
Организация вашего социального присутствия для бизнеса — важная задача.Сильное присутствие в социальных сетях — важнейший базовый компонент, который необходимо включать в любые усилия по брендингу. Использование значков социальных сетей на главном веб-сайте для бизнеса почти наверняка поможет продвинуть различные учетные записи в социальных сетях, которыми сможет управлять любой онлайн-бизнес.
Более популярные учетные записи в социальных сетях приведут к большему взаимодействию с клиентами и потенциальными клиентами, что, в свою очередь, повысит интерес к любым продуктам и услугам и потенциально приведет к увеличению продаж.
Именно здесь в игру входят значки социальных сетей.Ниже мы объясним, какие преимущества вы получаете, используя их, и как встроить их на свой сайт.
Что такое значки социальных сетей
Иконки социальных сетей позволяют разработчикам отображать различные логотипы социальных сетей (например, Facebook, Twitter и т. Д.) В некоторых заметных областях вашего веб-сайта. Таким образом вы сможете общаться с новыми клиентами и поддерживать связь с теми, которые у вас уже есть.
Покажите свое присутствие в социальных сетях!
В целом, существует два основных типа социальных иконок в зависимости от процесса установки:
Специальный плагин, который можно настроить в панели администратора без необходимости кодирования
Отдельные значки (SVG, PNG или другие), которые следует добавить вручную на страницу, сообщение или тему
Короче говоря, все дело в многоканальном продвижении, которое положительно влияет на влияние в Интернете.Социальные иконки на вашем сайте должны увеличить ваше присутствие в желаемых сетях. И ваш контент в социальных сетях должен делать все возможное, чтобы одновременно привлекать аудиторию на ваш сайт.
А теперь давайте подробнее рассмотрим преимущества использования значков социальных сетей для бизнеса.
Преимущества для вашего интернет-магазина
Заставьте людей снова посетить ваш магазин
Интернет-трафик необходим для любого интернет-магазина. Чем больше у вас его, тем больше потенциальных клиентов вы попадете в список.
Социальные иконки будут приглашать ваших посетителей в профили компании, где они смогут подписаться на вас и быть в курсе последних предложений, продуктов и тенденций.
Использование значков социальных сетей — отличный способ убедиться, что люди могут легко и быстро найти ваш профиль (ы), и стимулировать любые потенциальные возможности продаж.
Ваша аудитория получает доступ к вашему бренду в увлекательной и удобной форме. Сделайте так, чтобы о вас не забыли.
Если читатели будут следить за вашими активными профилями в социальных сетях, вы будете появляться там, чтобы оставаться в курсе событий.В результате вы сможете вернуть их в свой магазин для дополнительных покупок.
Не забудьте рассказать гостям Интернета, почему они должны подписаться на вас!
Но подождите, это еще не все. Социальные иконки улучшают обслуживание клиентов, давая вашему бизнесу прямые контакты с людьми. Они могут легко найти помощь, посетив ваш профиль и написав сообщение прямо в нем. Так что вы можете ответить на любой вопрос и решить проблемы в мгновение ока.
Вот все веские причины, по которым вам следует учитывать иконки:
Возврат покупателей за покупку новинки
Новые подписчики и подписчики в ваших сетях
Прямой контакт с вашими клиентами
Кстати, важно ежедневно следить за своими социальными сетями.Таким образом, ваши клиенты (которые стремятся получить немедленную обратную связь) получат ответы как можно быстрее и будут радоваться быстрой и полезной поддержке. Это будет приятным опытом и дополнительной причиной вернуться в ваш интернет-магазин.
Какие сети показывать
Хотя практически любая социальная сеть может удовлетворить потребности интернет-магазинов, некоторые услуги более актуальны, чем другие. Многое зависит от того, какие продукты вы продаете и какую маркетинговую стратегию придерживаетесь. В любом случае вам следует проанализировать плюсы и минусы каждой сети.
Например, первое, что нужно учитывать, — это количество активных пользователей. Ниже вы можете увидеть сети, ранжированные по этому параметру. А Facebook — абсолютный чемпион с почти 2 миллионами пользователей. Для любого интернет-магазина это прекрасная возможность привлечь новых клиентов.
Дополнительная статистика на Statista
Действительно, Facebook — практически одна из лучших социальных платформ, которая поможет вам повысить узнаваемость бренда и ежедневно взаимодействовать с клиентами. Более того, Twitter приемлем для поощрения взаимодействия с клиентами, а функция хэштега упрощает обмен ценным контентом.
Стоит отметить, что в Google Plus не так много пользователей, поэтому ваши сообщения получат меньше зрителей, чем в Facebook или Twitter.
Кто следующий? Взгляните на Pinterest. Вся сеть основана на визуализации, стоящей над текстовым форматом. Не сбрасывайте со счетов эту платформу, поскольку люди используют ее как цифровой список желаний. И, конечно же, YouTube может быть идеальным случаем, если вы хотите использовать видео для продвижения своего бренда.
Ой! Мы сохранили самое лучшее — Instagram.Это применимо практически к любому интернет-магазину. Просто найдите правильный подход к своей аудитории и создайте привлекательный визуальный контент, который убедит вас в покупке предметов на фото. Посмотреть на себя!
Instagram доминирует над ними всеми. Согласно исследованию TrackMaven, Instagram достигает наибольшей вовлеченности на подписчика. Это приводит к увеличению количества новых клиентов с каждой публикации с точки зрения максимизации работы компании в социальных сетях.
Таким образом, сети, которые мы недавно перечислили выше, — не единственные, которые можно использовать в качестве эффективного инструмента социального маркетинга.Существуют также другие ресурсы (LinkedIn, Tumblr и т. Д.), Которые будут вам полезны, если вы будете правильно ими управлять.
В конце концов, это зависит от вашего решения, на какую социальную платформу вы хотите ориентироваться.
Как и где установить
Как мы уже заметили, вы можете установить значки социальных сетей двумя способами. И все сводится к вашим личным предпочтениям. Вы можете использовать сторонние плагины, такие как наши значки социальных сетей, как самый быстрый метод размещения значков.Или вы можете найти различные наборы значков в Интернете и сделать все вручную.
Как бы вы ни устанавливали иконки, самое главное — их должен заметить каждый. Чтобы привлечь внимание, не только иконки должны быть заметными и привлекательными, но вы должны выбрать подходящее место для их установки. Поэтому они не должны быть разбросаны по странице, а должны иметь определенное местоположение.
Посмотрите пример размещения иконок слева от сообщения. Здесь мы использовали WordPress в качестве платформы, чтобы продемонстрировать вам этот случай.
Хорошее место для размещения значков социальных сетей находится где-то в верхней части страницы. Другими словами, выбирайте место, которое сможет поймать любой гость вашего магазина, не прокручивая страницу вниз. Чем ниже посетители будут прокручивать страницу вниз, тем меньше вероятность, что кто-то заметит ваши бизнес-профили
Кстати, для иконок социальных сетей больше одного места. Мы собираем все варианты вместе, чтобы вы могли выбрать наиболее подходящий или объединить сразу несколько:
В шапке вашего сайта
Вы можете найти такое место на коммерческих сайтах.Иконки часто помещаются в правой части заголовков
Наверх
Наверное, самое заметное место на всем сайте. Убедитесь, что ваша аудитория заметит ссылки и перейдет по ним.
На левой боковой панели
Здесь действительно имеет смысл размещать иконки, потому что посетители читают текст слева направо.
В нижнем колонтитуле вашего сайта
Какая информация представлена в нижних колонтитулах? Ставка на контакты — распространенный случай.Значки социальных сетей станут отличным дополнением.
Несмотря на популярность того или иного подхода, многое зависит от специфики вашего интернет-магазина и аудитории.
Самый простой способ встраивать значки социальных сетей
Команда
Elfsight разработала приложение, которое поможет вам реализовать значки социальных сетей для коммерческого использования. Он доступен в нашем сервисе Elfsight Apps. И вы можете попробовать его возможности прямо сейчас!
Наш социальный плагин поддерживает все ведущие сетевые сайты, так что вы можете быстро настроить его и повысить осведомленность о своем социальном присутствии.Более того, вы можете установить плагин практически в любом месте на сайте благодаря простому копипасту кода.
И, конечно же, у нашего приложения есть свои преимущества:
Бесплатное начало и использование
Более 50 иконок социальных сетей в формате SVG
1 500+ комбо для настройки
Простой и удобный редактор виджетов
Установка, которая не требует времени
Профессиональная помощь в любой момент
Плагин доступен для бесплатной установки в Elfsight Apps.Да, это означает, что иконки облачные, и их можно разместить практически на любом веб-сайте.
Подведем итоги
Влияние социальных сетей увеличивается, как и количество активных пользователей всех популярных сетей. Вы можете извлечь выгоду из этой тенденции. Вот почему значки социальных сетей — важная часть, на которую должен обращать внимание любой владелец веб-сайта.
Использование специальных плагинов позволит вам установить такие иконки за несколько минут без необходимости кодирования.