Иконки для сайта, придание индивидуального стиля ресурсу

 

 

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

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

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

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

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

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

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

Использование иконок

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

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

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

Где брать иконки

Готовые значки можно подобрать и скачать на бесплатных ресурсах.

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

Вот примеры ресурсов, на которых иконки можно скачать бесплатно.

1. Thenounproject. Предоставляет большой выбор бесплатных иконок. Удобно реализованный поиск, и быстрая загрузка нужных иллюстраций. Для использования необходимо указание авторства.
2. Smashingmagazine. Большая коллекция иллюстраций, находящихся в свободном доступе. Высокое качество и большой выбор значков на любой случай.
3. Flaticon. Имеет один из самых больших архивов содержащий иконки разных типов и форматов. Все иконки сгруппированы в наборы. Удобный поиск и свободное использование иллюстраций.
4. Behance. Предоставляет неплохие варианты если использовать запрос free icons. Можно подобрать целые наборы хороших иконок.
5. Iconmonstr. Предлагает идеальное решение для тех, кто ищет наборы стильных иконок в черно-белом решении. Все иллюстрации выполнены в одном стиле. Просто и со вкусом.

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

1. IconFinder. Предлагает иконки различных стилей в стеках. Организован поиск вариантов по ключевым словам. Позволяет скачать часть иллюстраций без оплаты, но с указанием автора. Для получения полного ассортимента необходима подписка. Предлагает все форматы иконок.
2. Pixeden. Те же стили, что и на предыдущем ресурсе. Более удобно организован поиск нужных иллюстраций, добавлены дополнительные фильтры. Часть значков предоставляется бесплатно, остальная часть в соответствии с тарифом. Кроме этого, можно приобрести изображения штучно. Формат, которые предлагает сайт: AI, EPS, PSD.
3. IconSweets. Предлагает форматы PNG, PSD. Иллюстрации предлагаются паками по тысяче штук.

Преимущества иконки, заказанной у иллюстратора

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

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

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

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

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

Советы для выбора иконки для проекта

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

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

Если владелец ресурса способен самостоятельно редактировать изображения, то можно использовать форматы AI и PSD. Они дают возможность кастомизировать иллюстрацию под нужные требования, добавить нужные моменты, заменить цвета и так далее. Кроме того, одна и та же картинка может быть исполнена в разном стиле, как правило, это контурный, плоский или объемный.

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

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

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

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

Триггеры привлекают внимание клиентов, одним из видов — это эффект временного ограничения. 

 

При добавлении  организации на карты Гугл она станет более узнаваемой. Пошаговую инструкцию ты найдешь здесь. 

 

Не знаешь, как правильно распределить поисковые запросы по странице? Читай об этом в нашей статье. 

Применение иконок на странице

Вот примеры применения иконок, которые чаще всего встречаются на просторах сети.

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

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

Поделитесь с друзьями:
Просмотров: 4120   Маркетинг

Автор: Александр Мишустин, Vertex seo