Иконки сайта: Векторные иконки и стикеры — PNG, SVG, EPS, PSD и CSS

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

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

Чем руководствоваться и как не оттолкнуть свою аудиторию?

Рассмотрим ответы на эти и другие вопросы в нашей сегодняшней статье.

 

1. Аудитория сайта

 

Для чего вообще нужны иконки на сайте?

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

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

 

Общие рекомендации по подбору стиля иконок основываясь на целевой аудитории вашего сайта:

• Не используйте современные , креативные и «сложные» иконки , если аудитория вашего сайта 45 +
• Для молодежных проектов, старайтесь подобрать креативные и яркие иконки
• Если вы не уверены или еще не выяснили свою целевую аудиторию – правильным выбором будут современные иконки, но в приглушенных постельных тонах. Они не отпугнут возрастную аудиторию, кричащими цветами и сложной композицией и не заставят думать молодую аудиторию, о том, что ваша компания застряла в 2000-х годах

 

2.Стиль иконок

 

Условно мы можем поделить иконки на три большие группы

• Контурные (другие названия — строуковые, лайновые )
• Залитые (градиентом, сплошным цветом, двумя цветами и тд.)
• Объемные иконки которые долгое время были на всех сайтах во время движения стиля скевоморфизм. Самый яркий представитель – apple со своими первыми версиями ios.

 

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

Если ваш сайт минималистичен и лаконичен, вы можете использовать залитые иконки, чтобы акцентировать внимание на важном.

Если ваш сайт корпоративный и строгий — рекомендуем контурные легкие иконки, которые подчеркнут ваш стиль и строгость.

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

Однако, если вы питаете симпатию к объемным иконкам, вы можете использовать вместо плоских иконок, 3D модели.

Это оживит ваш дизайн и не будет смотреться старомодно.

 

3.Функциональность иконок

 

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

Они должны наглядно показывать смысл текста/ действия к которому они относяться.

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

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

 

4. Единство иконок и стиля

 

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

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

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

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

 

5. Размер иконок

 

Да, размер имеет значение.

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

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

Самая большая ошибка – это композиционно сложные, многоцветные иконки в маленьком размере, что толку, от того, что в ваших иконках отображена чуть ли не улыбка моны- лизы, если пользователь просто не разглядит ваше произведение искусства ?

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

 

Вот и все !

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

Иконки сайтов — Smartcopying

Чем мы можем вам помочь?

 

Разрешения

Book by Vectors Point from the Noun Project под лицензией CC BY 3.0 используется для представления «Текстовой работы» на странице «Правила авторского права» и на «Главной странице».
Искусство Адриана Коке из проекта Noun, лицензированного в соответствии с CC BY 3.0, используется для представления «Художественного произведения и изображений» на странице «Правила авторского права» и на «Главной странице».
Музыка йога прамана из проекта Noun под лицензией CC BY 3.0 используется для представления «Музыки» на странице «Правила авторского права» и на «Главной странице».
видеофильм Фаджара Вахью Прибади из Noun Project под лицензией CC BY 3.0 используется для представления «Фильмов и видео» в «Руководстве по авторскому праву» и «Домашней странице».
Интернет Вадима Соломахина из Noun Project под лицензией CC BY 3.0 используется для представления «Интернет и веб-сайты» на странице «Правила авторского права» и на «Главной странице».
Телевидение, созданное Нехой Тьяги из Noun Project под лицензией CC BY 3. 0, используется для представления «Радио- и телевизионных передач» на странице «Правила авторского права» и на «Домашней странице».
образование от ibrandify из проекта Noun под лицензией CC BY 3.0 используется для представления «Лицензии на образование» на странице «Руководство по авторскому праву» и на «Главной странице».
от Diky Setiawan из Noun Project под лицензией CC BY 3.0 используются для представления «Разрешений и согласий» в «Руководстве по авторскому праву» и на «Главной странице».
авторское право Адриана Коке из проекта Noun, лицензированного в соответствии с CC BY 3.0, используется для представления «Основ авторского права» в «Руководстве по авторскому праву» и на «Главной странице».
Список Iconstock от Noun Project под лицензией CC BY 3.0 используется для представления «Глоссария» на странице «Руководство по авторскому праву» и на «Главной странице».
Библиотека Vectorstall от Noun Project под лицензией CC BY 3.0 используется для представления «Библиотеки» на странице «Правила авторского права» и на «Домашней странице».
Закон от ibrandify from the Noun Project под лицензией CC BY 3.0 используется для представления «Текущих вопросов реформы законодательства об авторском праве» на странице «Реформа законодательства об авторском праве» и на «Домашней странице».
отчет Vectorstall от Noun Project под лицензией CC BY 3.0 используется для представления «Отчета Комиссии по производительности» на странице «Реформа закона об авторском праве» и на «Домашней странице».
инновация Sumit Saengthong из Noun Project под лицензией CC BY 3.0 используется для представления «Обзора Австралийской комиссии по реформе законодательства» на странице «Реформа законодательства об авторском праве» и на «Домашней странице».
лампочка от Linseed Studio из The Noun Project под лицензией CC BY 3.0 используется для представления «Быстрого совета» на странице «Создание учебных и учебных ресурсов: руководство по авторскому праву для министерств образования и неправительственных администрирующих органов».

Использование значков веб-сайтов в Enpass

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

Включить значки веб-сайтов

• Рабочий стол
• iOS
• Android

 Чтобы включить значки веб-сайтов в Enpass:

1. Перейти к 90 122 Настройки > Настроить .
2. Установите флажок Использовать значки веб-сайтов .

 Чтобы включить значки веб-сайтов в Enpass:

1. Перейдите Настройки > Общие .
2. Включите параметр Использовать значки веб-сайтов .
3. В окне подтверждения выберите Продолжить .

 Чтобы включить значки веб-сайтов в Enpass:

1. Перейдите Настройки > Общие .
2. Установите флажок Использовать значки веб-сайтов .

Полезно знать

Внешний вид значков веб-сайтов

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

---

Пользовательские значки в Enpass

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

• Рабочий стол
• iOS
• Android

Чтобы установить пользовательский значок:

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

Чтобы установить пользовательский значок:

1. В представлении сведений об элементе нажмите Изменить в правом верхнем углу.
2. Коснитесь текущего значка и выберите Выберите .
3. На экране «Выбор значка» выберите существующий значок или нажмите  в правом верхнем углу, чтобы добавить пользовательский значок из изображения на вашем устройстве.
4. После добавления нового значка найдите и выберите этот значок на экране выбора значка.
5. Нажмите  Сохранить , чтобы сохранить изменения.

Чтобы установить пользовательский значок:

1. В представлении сведений об элементе нажмите  в правом верхнем углу.
2. Коснитесь текущего значка и выберите Выберите значок
3. На экране «Выбор значка» выберите существующий значок или нажмите  в правом верхнем углу, чтобы добавить пользовательский значок из изображения на вашем устройстве.
4. (При появлении запроса разрешите Enpass доступ к фотографиям и файлам на вашем устройстве.)
5. После добавления нового значка найдите и выберите этот значок на экране выбора значка.
6. Нажмите  Сохранить , чтобы сохранить изменения.

Замените пользовательский значок

• Надзор
• IOS
• Android

, чтобы заменить пользовательский значок на значок веб -сайта:

1. В деталях детали, нажмите на стержень меню.
2. Щелкните текущий значок и выберите Использовать значок веб-сайта .
   
3. Когда появится значок веб-сайта, нажмите Сохранить , чтобы сохранить изменения.

Чтобы заменить пользовательский значок значком веб-сайта:

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

Чтобы заменить пользовательский значок значком веб-сайта:

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

Отключение значков веб-сайтов

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

• Рабочий стол
• iOS
• Android

Чтобы отключить значки веб-сайтов для всех элементов:

1. Перейдите в раздел «Настройки» > «Настроить ».
2. Снимите флажок Использовать значки веб-сайтов .

Чтобы удалить и отключить значок веб-сайта для отдельного элемента:

1. В представлении сведений об элементе нажмите  в строке меню.
2. Щелкните текущий значок и выберите Удалить значок веб-сайта .
3. Нажмите Сохранить , чтобы сохранить изменения.

Чтобы отключить значки веб-сайтов для всех элементов:

1. Перейти к Настройки > Общие .
2. Отключите параметр Использовать значки веб-сайтов .

Чтобы удалить и отключить значок веб-сайта для отдельного элемента:

1. В представлении сведений об элементе нажмите  Изменить в правом верхнем углу.
2. Коснитесь текущего значка и выберите Удалить значок веб-сайта из наложения параметров.
3. Нажмите Сохранить , чтобы сохранить изменения.

Чтобы отключить значки веб-сайтов для всех элементов:

1. Выберите Настройки > Общие .