Значки для сайтов: Векторные иконки и стикеры — PNG, SVG, EPS, PSD и CSS

Как создавать и тестировать иконки, понятные пользователям?

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

Точно ли пользователи воспринимают ваши иконки именно так, как вы задумали?

Иконки — это крошечные иллюстрации, поэтому легко упустить из виду, как много они на самом деле значат для понимания продукта. Мы считаем само собой разумеющимся, что большинство пользователей знакомы с популярными иконками, такими как шестеренка (“Настройки”) или колокольчик (“Уведомления”).

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

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

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

Прежде чем мы начнем

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

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

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

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

1. Почерпнуть идеи из ответов пользователей

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

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

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

Перед вами интернет-магазин модной одежды с открытым меню. Над заголовками разделов размещены маленькие символы, которые задают контекст и отражают их значение. Например, над разделом «Домашняя страница» изображен дом, а над разделом «Поиск» — лупа. Иконка раздела «Спецпредложения» (Deals) скрыта за красным вопросительным знаком. Какой символ вы бы ожидали здесь увидеть?

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

2. Спросите, что, по их мнению, это значит

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

Вот подходящий вопрос для этого сценария — он короткий и дает достаточно информации, не подталкивая участников в какому-то конкретному ответу:

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

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

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

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

3. Сравните самые удачные иконки

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

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

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

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

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

Вопрос 1

Покажите несколько версий одного решения (например, звезды) и спросите, какое из них лучше всего отражает смысл:

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

Вопрос 2

Повторите этот вопрос, но покажите разные версии другой иконки (в нашем примере — бирки).

Вопрос 3

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

5. Убедитесь, что все работает

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

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

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

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

Хорошая практика — задать участникам дополнительные вопросы о том, насколько успешно они справились с заданием и насколько сложным оно им показалось, по окончании тестирования. Мы можем сделать это с помощью шкалы Лайкерта, которая позволяет оценить результаты по шкале от 1 до 7.

Дополнительный вопрос 1 — уверенность

Насколько вы уверены в правильности своего выбора?

Дополнительный вопрос 2 — сложность

Насколько легко, по вашему мнению, было найти кнопку «Спецпредложения»?

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

Что теперь?

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

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

что это такое, размер, как установить на сайт в 2023 году

Содержание

• Что такое фавикон
• Где его можно увидеть
• Зачем фавикон на сайте 
• Какой значок выбрать
• Размер фавикон
• Способы создания иконки
• Как установить фавикон

Статья обновлена 18. 06.2022

Что такое фавикон

Термин Favicon образован путём сочетания двух английских слов: Favorites — избранные и Icon — значок. Каждый современный сайт обладает собственной иконкой, которая отображается во вкладке браузера. Эти значки показывают некоторые поисковые системы напротив каждого сайта в поисковой выдаче. Иконка будет также отображаться на мобильных устройствах, если пользователь вынесет любимый сайт на рабочий стол для быстрого доступа.

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

Где его можно увидеть

Иконка фавикон отображается на панели закладок.

В поисковой выдаче Яндекса, а также в новостном разделе.

На панели закладок, а также на открытых вкладках в любом браузере.

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

В поисковой выдаче Google фавиконы не видны, но это не повод не добавлять такие изображения на свой сайт. Как видите, мест, где отображается иконка, предостаточно: браузерные вкладки, Яндекс, закладки избранных сайтов. Это особые места расположения и важно быть в них заметными — выделяться индивидуальной картинкой. Далее расскажем, почему именно.

Зачем фавикон на сайте 

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

• Выделение сайта в поисковой выдаче. Некоторые поисковые системы, например, Yandex — показывают иконку напротив каждого сайта после ввода поискового запроса. Яркий значок привлекает внимание пользователей, иногда даже заставляя кликать по ссылке.
• Упрощение поиска. При просмотре списка недавно посещённых сайтов гораздо проще найти ресурс с яркой иконкой. Кроме того, значки отображаются в закладках браузера. Значит, пользователи найдут любимый сайт гораздо быстрее.
• Визуальная привлекательность. Владельцы мобильных устройств нередко сохраняют закладки на главный экран, чтобы не тратить время на поиск любимых сайтов. Чёткая и красивая иконка станет приятным дополнением на рабочем столе. Главное, чтобы изображение соответствовало нужному разрешению.
  Устранение ошибок. Перед загрузкой сайта браузер обращается к файлу Favicon.ico, который обычно хранится в корневой директории хостинга. Если файл отсутствует — в журнале сервера появляется ошибка 404, означающая отсутствие документа по указанному адресу.
• Повышение функциональности. Динамический Favicon позволяет отслеживать изменения на сайте без открытия нужной вкладки браузера. Например, можно показывать уведомления, количество личных сообщений и другую информацию, полезную пользователям.

Какой значок выбрать

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

Итак, идеальный фавикон для вашего сайта может быть:

Тематический

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

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

Контрастный

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

Простой

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

Креативный

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

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

Размер фавикон

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

Размер фавикон для сайтов

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

Для устройств на Android

Лучше всего подходят графические файлы .png размером 180 на 180 точек. Чтобы прописать расположение значка, рекомендуется пользоваться Web App Manifest. Значок останется хорошо читаемым даже после добавления закладки на рабочий стол.

Для устройств на iOS

Обычно устройства компании Apple работают с иконками 180 на 180 точек в формате .png. В документации Safari они называются Web Clips. Прозрачность фона должна отсутствовать. Скругление углов осуществляется автоматически при добавлении закладки на главный экран.

Также поддерживается формат .svg, который подходит для закреплённых вкладок, показываемых на Touch Bar в современных ноутбуках MacBook. Особенность рассматриваемого способа — в возможности добавления монохромной маски. При наведении курсора значок заполняется цветом и выделяется на панели.

Способы создания иконки

Плагин для Photoshop

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

Специальное программное обеспечение

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

Онлайн-генераторы

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

1. Выбрать изображение с компьютера. Подойдут любые графические файлы. Рекомендуется пользоваться квадратными изображениями для повышения качества результата.
2. Подождать несколько секунд. Нажать зелёную кнопку «Скачать архив», который будет сохранен на компьютере в формате .zip.
3. Распаковать архив любым архиватором. В архиве будут находиться иконки в необходимых форматах.

Как установить фавикон

Рассмотрим 3 варианта установки фавикона: на главной странице сайте, в его подразделах, а также динамический фавикон.

Настроить фавикон для главной страницы сайта

1. Создайте изображение любым удобным способом из перечисленных нами выше.
2. Готовый файл сохраните в корневой директории.
3. Впишите ссылку на значок в код HTML главной страницы.

Рекомендуется пользоваться форматом .ico, если хотите добиться совместимости с устаревшими браузерами, например, с Internet Explorer. Современные веб-обозреватели могут показывать иконки в формате .png. Значок появляется через некоторое время после загрузки. Необходимо дождаться, пока поисковая система заново проиндексирует сайт.

Как настроить фавикон для других разделов сайта

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

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

В коде нужной страницы пропишите адрес расположения нужной иконки. Сохраните изменения.

Как сделать динамический значок

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

К сожалению, стандартные инструменты HTML не позволяют создать динамический значок. Реализовать поставленную задачу позволяет язык программирования JavaScript. Совершенно не обязательно писать скрипт самостоятельно и тратить время. Существуют готовые решения от различных разработчиков. Большой популярностью обладает проект Favico.js, предлагающий веб-мастерам бесплатно скачать нужный скрипт.

Установка скрипта осуществляется через Yarn или Bower.

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

Установка фавикон в конструкторах сайта

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

И напоследок

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

С точки зрения дизайна, в создании действует правило «Красота в простоте». Лишние детали только усложнят процесс запоминания иконки и сделают его менее броским. 
Фавикон — неотъемлемый атрибут любого ресурса. Обязательно обратите внимание на этот шаг при создании сайта. А

Надеемся, что благодаря всей этой информации ваш проект успешно стартанёт и быстро наберёт обороты!

Следующая статья: « Презентация товара в выгодном свете: проверенные техники

Содержание

• Что такое фавикон
• Где его можно увидеть
• Зачем фавикон на сайте 
• Какой значок выбрать
• Размер фавикон
• Способы создания иконки
• Как установить фавикон

Оцените статью:

Средняя оценка: 4.5 Количество оценок: 228

Понравилась статья? Поделитесь ей:

Подпишитесь на рассылку ROMI center: Получайте советы и лайфхаки, дайджесты интересных статей и новости об интернет-маркетинге и веб-аналитике:

Вы успешно подписались на рассылку. Адрес почты:

Читать также

Как увеличить продажи в несколько раз с помощью ROMI center?

Закажите презентацию с нашим экспертом. Он просканирует состояние вашего маркетинга, продаж и даст реальные рекомендации по её улучшению и повышению продаж с помощью решений от ROMI center.

Запланировать презентацию сервиса

Попробуйте наши сервисы:

• Импорт рекламных расходов и доходов с продаж в Google Analytics

  Настройте сквозную аналитику в Google Analytics и анализируйте эффективность рекламы, подключая Яндекс Директ, Facebook Ads, AmoCRM и другие источники данных за считанные минуты без программистов

  Попробовать бесплатно

• Импорт рекламных расходов и доходов с продаж в Яндекс Метрику

  Настройте сквозную аналитику в Яндекс. Метрику и анализируйте эффективность рекламы, подключая Facebook Ads, AmoCRM и другие источники данных за считанные минуты без программистов

  Попробовать бесплатно

• Система сквозной аналитики для вашего бизнеса от ROMI center

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

  Попробовать бесплатно

• Сквозная аналитика для Google Analytics позволит соединять рекламные каналы и доходы из CRM Получайте максимум от рекламы, объединяя десятки маркетинговых показателей в удобном и понятном отчете. Отслеживайте окупаемость каждого рекламного канала и перестаньте сливать бюджет.

  Подробнее → Попробовать бесплатно

• Сквозная аналитика для Яндекс. Метрики позволит соединять рекламные каналы и доходы из CRM Получайте максимум от рекламы, объединяя десятки маркетинговых показателей в удобном и понятном отчете. Отслеживайте окупаемость каждого рекламного канала и перестаньте сливать бюджет.

  Подробнее → Попробовать бесплатно

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

  Подробнее → Попробовать бесплатно

Вещи, которые вы должны не пропустить как дизайнер

ИКОНЫ! Мы все очень зависим от них.

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

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

Вспомните время, когда вы открываете Facebook. Каждый значок заменяется длинным предложением на навигационной кнопке. Половина времени пройдет без понимания того, что написано на экране.

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

В чем разница между логотипом и значком?

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

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

Да, вы можете взглянуть на экран рабочего стола и заметить, что Adobe Acrobat может отображать логотип Adobe в виде значка. Однако важно знать, что «логотип» — это то, что представляет всю компанию или организацию.

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

Значки почти часто создаются в квадрантах и ​​масштабируются до определенных пропорций. Это позволяет им вписываться в квадратные размеры значков приложений и/или обеспечивать единообразие при построении действий на сайте. Они имеют тенденцию быть довольно маленькими по размеру.

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

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

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

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

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

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

KISS — Keep It Simple & Schematic

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

Цвета

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

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

Просторный дизайн

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

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

Консистенция

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

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

Сходство

Все иконки должны иметь некоторое сходство. Сходство относится не к их содержанию, а к таким аспектам, как размер штриха, размер пикселя*пикселя, выравнивание и позиционирование.

Работа по сетке

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

Где найти бесплатные иконки или вдохновение?

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

Вот некоторые названия веб-сайтов с бесплатными иконками: 

• Плоская иконка
• Freepik
• Иконфайндер
• Иконки8
• 1001 бесплатная загрузка
• Пикседен

В ключе

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

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

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

                                                                                                                       Редактор: Amrutha

Иконки Для оформления веб-сайтов, тем, шаблонов и загружаемых графических элементов на Dribbble

1. Просмотр анимированных иконок для синтезированного веб-сайта

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

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

3. View ✨ Causal: ваша новая таблица для работы с числами ✨

   ✨ Причина: Ваша новая таблица для работы с числами ✨
4. Посмотреть Персональный сайт одного из наших клиентов

   Персональный сайт одного из наших клиентов

5. Посмотреть веб-дизайн для Komuso

   Веб-дизайн для Комусо

6. Посмотреть иллюстрации для CYCLONE Web

   Иллюстрации для CYCLONE Web

7. Посмотреть градиентные иллюстрации для веб-сайтов

   Градиентные иллюстрации для веб-сайтов

8. Посмотреть стартовую страницу для Eventbrite

   Стартовая страница Eventbrite

9. Просмотр абстрактного пользовательского интерфейса для страниц функций

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

10. Посмотреть ЗНАЧКИ для ЦИКЛОН ВЕБ

    ЗНАЧКИ для CYCLONE WEB

11. Просмотр 3D-иконок для приложения или веб-сайта для путешествий

    3D-иконки для приложения или веб-сайта для путешествий

12. Посмотреть редизайн сайта для маркетинговой компании

    Редизайн веб-сайта для маркетинговой компании
13. Посмотреть НОВИНКУ: Boost UI Kit для дизайнеров 🔥

    НОВИНКА: Boost UI Kit для дизайнеров 🔥

14. Посмотреть стекло Aero для Icon

    Аэростекло для Icon

15. Посмотреть 🍓 Набор иконок для PushPartner

    🍓 Набор иконок для PushPartner

16. Просмотр пользовательских значков для электронной коммерции

    Пользовательские значки для электронной коммерции

17. Просмотр веб-сайта компании, занимающейся кибербезопасностью

    Сайт компании, занимающейся кибербезопасностью

18. Просмотр векторных иллюстраций для веб-сайтов и целевых страниц

    Векторные иллюстрации для сайтов и лендингов

19. Просмотр #Exploration — Концепция целевой страницы для студии дизайна

    #Exploration — Концепция целевой страницы для студии дизайна

20. Просмотр страницы функций 3D Motion Веб-сайт для запуска ИИ

    Страница функций 3D Motion Веб-сайт для стартапа в области искусственного интеллекта

21. Просмотреть полную целевую страницу для арендодателей

    Полная целевая страница для арендодателей

22. Просмотр значков навигации для Infermedica.