Как создать набор иконок [+ ресурсы]

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

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

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

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

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

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

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

Как создать набор иконок

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

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

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

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

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

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

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

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

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

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

Источник изображения

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

Источник изображения

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

Выбери стиль.

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

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

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

Источник изображения

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

Источник изображения

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

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

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

Начать творить.

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

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

Источник изображения

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

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

Вот пример того, что они называют занятым, слишком подробным значком, из Material Design :

Источник изображения

По сравнению с тем, что они обозначают как четкий и простой значок:

Источник изображения

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

Будь оригинальным.

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

Источник изображения

Источник изображения

Waze и Google Maps похожи по своей природе – оба предоставляют пользователям указания. Хотя их услуги пересекаются, их значки уникальны для их бренда и, следовательно, узнаваемы.

Протестируйте и внедрите свои значки.

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

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

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

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

Ресурсы по дизайну иконок

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

1 Материальный дизайн

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

2 Значки оптимизации

Streamline Icons содержит более 30 000 готовых иконок, доступных для загрузки. В их бесплатном пакете «Essential Icons» представлены часто используемые символы для электронной почты и музыкальных функций, а в платный «Ultimate Pack» входят нишевые значки, такие как символы путешествий и экологии.

3 Ядро

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

4 Аниматиконы

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

5 Бесплатные ресурсы для дизайна

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

Иконки – это необходимые элементы вашего сайта.

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

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

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

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

Источник записи: https://blog.hubspot.com