Иконки на сайтах - что они делают и как выбрать правильные?

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

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

Я хочу сказать, что иконы "захватили" нашу жизнь, и мы не можем эффективно функционировать без них.

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

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

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

Они вносят разнообразие в содержание

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

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

Они привлекают внимание, выделяясь на фоне текста.

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

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

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

Несмотря на свой небольшой размер, они выражают много

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

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

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

Простота реализации и стиля

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

В нашем распоряжении есть HTML-сущности и коды. Использование их непосредственно в коде страницы приводит к отображению пиктограмм: ✓ ☎ ★

Также можно использовать так называемые иконочные шрифты, то есть готовые наборы иконок в виде шрифтов. Среди наиболее популярных - Font Awesome, IcoMoon или Ionicons.

Всегда есть возможность использовать иконки как изображения - в форматах GIF, PNG или векторном SVG.

Как умело выбирать иконки для сайтов?

1. Начните с рассмотрения возможностей

Ранее я уже упоминал, что существует несколько способов использования иконок.

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

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

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

2. Выбирайте значки так, чтобы пользователи могли их понять

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

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

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

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

3. Установите единый стиль

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

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

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

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

4. Старайтесь использовать векторы

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

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

Подробнее об этом вы можете узнать из нашего текста о SEO-оптимизации изображений.

5. Умело сочетайте цвета пиктограмм

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

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

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

6. Если контекст неясен, используйте ярлыки

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

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

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

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

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

Этикетка добавляет контекст и наиболее просто объясняет нам, для чего это действие.

7. Вы также всегда можете посмотреть, как это делают ваши конкуренты

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

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

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

Я также рекомендую, кстати, один из наших текстов о том, чему вы можете научиться у своих конкурентов.

Почему иконки на веб-сайтах так важны?

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

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

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