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

04.04.2023 Разное

Содержание

Использование наборов бесплатных иконок на сайте

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

Большинство наборов содержат разбивку по категориям. Вы можете найти логотипы социальных сетей, платежных систем, CMS и именитых мировых компаний, например таких как: Apple, Android, Windows и множество других.

Библиотеки содержат иконки в различных форматах, что позволяет более тонко подойти к Вашим нуждам:

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

Вы можете сами выбрать какой формат использовать. Например SVG-формат. Некоторые коллекции уже встроены в такие фреймворки как Bootstrap, Foundation и другие.

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

Вы скачиваете с сайта разработчика архив, содержащий необходимые материалы, и подключаете скачанные файлы, в одном из документов сайта, с помощью html, например:
<link rel=»stylesheet» href=»/css/mfglabs_iconset.css»>

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

<link rel=»stylesheet» href=»//maxcdn. bootstrapcdn.com/elusive-icons/2.0.0/css/elusive-icons.min.css»>

Этот способ имеет свои преимущества. Для хранения и передачи файлов обычно используются CDN ( Content Delivery Network – сеть доставки контента) и даёт такие преимущества как:

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

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

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

1. Для Font Awesome необходимо вставить в нужном месте следующий код и получите результат:

Увеличение размера производиться с помощью добавления следующих классов: fa-2x, fa-3x, fa-4x и далее, по аналогии. В других подборках правила увеличения похожи, за исключением первых букв класса, которые обычно соответствуют аббревиатуре названия библиотеки иконок.

Так же в инструментарии Font Awesome присутствуют такие возможности как:

анимированые иконки;
рамка вокруг;
применение к спискам;
поворот;
наложение;
настраивыемый CSS.

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

2. Для OPENICONIC существуют сразу три основных способа и два способа для использования в фреймворках. Рассмотрим только 3 основных:

подключение в виде обычного изображения:
<img src=»/open-iconic/svg/account-login.svg»>
подключение в виде SVG-спрайта:
<svg viewBox=»0 0 8 8″><use xlink:href=»#account-login»></use></svg>
использование обычного inine-элемента с CSS-классом:
<span data-glyph=»account-login»></span>

Бесплатные библиотеки иконок для сайта

На большинстве сайтов можно произвести поиск по набору, используя английские названия необходимых вам иконок (например: search или loop – иконка лупы, используемая для поиска на Вашем сайте).

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

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

Font Awesome (fontawesome.io) — один из самых популярных и всеобъемлющих наборов — 675 шт.
Foundation Icon Fonts 3 (zurb.com/playground/foundation-icon-fonts-3) — набор относящийся к Front-end фрэймворку Foundation — 283 шт.
Elusive Icons (elusiveicons.com) — 304 шт.
MFG Labs Icon set (hmfglabs.github.io/mfglabs-iconset/) — 260 шт.
OPENICONIC (useiconic.com/open) — 223 шт.
GLYPH (glyph.smarticons.co) — используется в Front-end фреймворке Bootstrap — 800 шт.
IKONS (ikons.piotrkwiatkowski.co.uk) — 300 шт.
Dripicons (demo.amitjakhu.com/dripicons) – 500 шт.
Ionicons (ionicons.com) — 617 шт.

Material icons (material. io/icons) — 900 шт.
Entypo+ (entypo.com) — 411 шт.
Icons8 (icons8.com) — 62,300 шт.
Freepic (ru.freepik.com/free-icons) — 99,458 шт.
Flaticon (flaticon.com) — 632,500 шт.
IcoMoon (icomoon.io) — 550 шт.

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

Полное руководство по созданию интерфейсных иконок

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

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

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

Основные элементы значков

Размер

Согласованность и соответствие является ключевым условием для иконок, и все ваши иконки должны быть одинакового размера при их создании. Во-первых, вам нужно убедиться, что вы знаете, как построена ваша сетка (кратно 8 или 10?). Исходя из этого, ваш базовый размер иконки должен быть напрямую связан с данными условиями. Итак, если у вас есть сетка, основанная на 8, вы бы хотели построить в 16, 24 или 32.

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

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

Значок магазина в размерах 24×24, 40×40 и 80×80

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

Цвет

Для иконок товара используйте 1 цвет: черный. Если добавить что то кроме этого, то ваши компоненты станут слишком сложными и трудными для других дизайнеров. Для маркетинговых иконок вы можете использовать 2 цвета, если это важная часть вашего бренда, но я лично считаю, что значки должны быть одноцветными. Все, что имеет 3 или более цветов, является иллюстрацией, а не значком.

Слева: это точечная иллюстрация. По-середине: значок в перспективе. Справа: плоский значок.

Сетки

Пиксельная сетка является основной сеткой, которая использует наименьший элемент: пиксель. При создании значков вы всегда хотите выровнять объекты по пиксельной сетке, особенно по прямым линиям. Но вы можете строить другие фигуры на пиксельной сетке (если вы используете Figma, это уже установлено автоматически). Вы хотите строить объекты на пиксельной сетке не только потому, что она будет выглядеть более красиво, но и потому, что она облегчит вашу жизнь. Равномерно распределять объекты намного проще, когда вы используете сетку. Это помогает вам оставаться в соответствии с вашим расположением, и в целом ваши значки будут выглядеть лучше. Вы можете легко увидеть в Figma разницу между чем-то, находящимся «на пикселе» и вне.

Слева: объекты на пиксельной сетке

Мне нравится строить себе сетку, прежде чем я начну. Вот мои настройки в Figma.

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

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

Визуально доминирующий объект должен быть центрирован как вертикально, так и горизонтально.

Доминирующий объект (прямоугольник) находится в центре

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

Штрихи и заливки

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

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

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

Расстояние между штрихами должно по возможности быть равным ширине штриха

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

Я не рекомендую делать контурные значки размером менее 10px (при условии, что ширина штриха будет 1px-2px). Их будет очень сложно расшифровать.

Выбор стиля

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

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

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

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

Uber
Google
Apple
Airbnb
Square

Рисование значков

Геометрические фигуры

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

Эта резиновая утка сделана из кругов (и одного закругленного прямоугольника).

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

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

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

Естественные формы

Рисовать более естественные формы в Figma легко. Вы можете либо использовать традиционный метод рисования кривых точка за точкой, либо вы можете использовать превосходный инструмент Figma углового радиуса. Мне нравится рисовать все мои точки в виде прямых линий, а затем закруглять углы с помощью инструмента «Радиус угла». Этот инструмент очень полезен для создания органических, сбалансированных форм. Поскольку углы Figma автоматически подстраиваются, вы можете перемещаться по этим точкам, и углы подстраиваются под вас.

Углы

Есть несколько вариантов углов: скошенный (квадратный), скошенный и закругленный. Я настоятельно рекомендую вам придерживаться одного стиля для вашего набора иконок.

Угловой радиус

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

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

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

Закрашенные объекты

Если для ваших иконок требуются закрашенные объекты внутри их основных форм (например, окна в доме), в идеале вы захотите сохранить контурные фигуры в заштрихованных значках. И закрашенные объекты в закрашенных значках. В случае, если у вас нет места для контурных фигур, вы хотите использовать закрашенные формы, которые пропорциональны вашим контурам. Например, если у вас контур шириной в 2px, вам не нужны закрашенные фигуры больше, чем 4x4px.

Метафора

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

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

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

Если вы ограничены пространством, вы можете упростить важные детали, а не удалять их.

Перспектива

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

Верхний ряд: плоский. Нижний ряд: в перспективе.

Шрифт (избегайте!)

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

Подсказки

Операции Boolean

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

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

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

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

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

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

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

Сеть вектор

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

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

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

Организация

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

Значки, подобные этому, могут нуждаться в нескольких словах, например, chef-hat.

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

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

Когда есть один и тот же значок в разных вариациях, вот как мне нравится обрабатывать их.

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

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

Слева: кофе / контурный. Справа: кофе / закрашенный

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

Исходный значок слева «щит». Затем слева направо: «щит / доллар», «щит / евро», «щит / фунт», «щит / иена», «щит / плюс»

Управление вашими активами

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

Figma великолепна, потому что она поощряет сотрудничество и прозрачность. Со значками может быть заманчиво позволить всем вашим дизайнерам иметь доступ к редактированию, чтобы они могли добавлять новые значки. Я рекомендую собирать значки по отдельности, проверять их и добавлять их самостоятельно, когда они соответствуют стандарту. Предоставление вашим коллегам доступа к просмотру (и доступу к вашей библиотеке) достаточно, чтобы вовлечь их в то, что вы делаете, не заканчивая библиотекой и файлом cattywampus. Некоторые из ваших коллег могут захотеть создать разные версии одного и того же значка (например, разных цветов или с разными названиями). Это часто случается, когда кто-то связывает значок с концепцией или продуктом. Вы никогда не захотите иметь более одной версии каждого значка в вашей библиотеке. Используйте описание компонента для этих наименований. Ваши коллеги-дизайнеры должны настраивать цвета значков в своих отдельных файлах, а не в мастере. Поверьте, вам придется время от времени вносить изменения в эти значки, и вы не захотите делать это более чем в одном месте. Форматы файлов являются ключевыми для того, когда вы готовы экспортировать значки. Если вы предоставляете значки партнерам за пределами вашей команды дизайнеров или инженеров, вы, вероятно, даете им файлы .png. Экспорт в 1x, 2x и 3x для нескольких устройств. Для разработки и проектирования вы будете часто экспортировать файлы .svg, которые можно редактировать в программах проектирования и которые будут отображаться в браузере с помощью кода при визуализации онлайн в вашем приложении или на сайте. При экспорте SVG вам понадобится максимально чистый код. Еще одна веская причина для выбора Figma-это сверхлимитный экспорт SVG. Поскольку они оптимизированы, это устраняет необходимость дальнейшей оптимизации в будущем. Ознакомьтесь с этой статьей, чтобы узнать больше.

Передача ваших значков в другие руки

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

Другие источники

Не стесняйтесь связаться с Бонни Кейт Вольф по адресу [email protected]
Я люблю thenounproject.com→ это место вдохновлено различными взглядами на одну и ту же тему (кто знал, что было так много способов нарисовать папку с файлами!)

https://www.figma.com/file/v8WczgltywYcWbZyAqChfX/Design-Systems-Icon-Guide/duplicate?node-id=0:1

Перевод статьи Bonnie Kate Wolf

98 529 иконок веб-разработки — бесплатно в SVG, PNG, ICO

Получите неограниченный доступ к более чем 6 миллионам активов

Получите неограниченное количество загрузок

Веб-разработка Значок

Вектор веб-разработки Значок

Веб-разработка Значок

Веб-разработка Icon

Руководство для начинающих [+ Ресурсы]

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

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

В этом руководстве мы научим вас создавать собственный набор иконок. Мы расскажем:

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

Давайте углубимся.

Почему значки важны?

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

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

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

Передовой опыт в области дизайна иконок

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

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

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

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

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

2. Используйте сетку.

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

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

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

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

3. Используйте простые значки.

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

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

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

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

Сравните это с четким, простым значком:

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

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

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

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

4. Сделайте ваши иконки узнаваемыми.

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

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

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

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

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

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

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

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

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

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

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

5. Стремитесь к визуальной согласованности.

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

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

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

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

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

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

По возможности старайтесь использовать целые числа, чтобы избежать проблем с визуализацией. Это относится к углам, скруглению углов и толщине линии.
Избегайте рисования фигур и кривых вручную в пользу точных инструментов (например, инструмента кривой в Adobe Illustrator). Глаз может обнаружить, если форма значка хоть немного отличается.
Для углов используйте 45 градусов (или кратные 45 градусам, например 90 градусов или 22,5 градуса).
Совместите штрихи значка с пиксельной сеткой, чтобы избежать размытости при масштабировании изображения.
Ограничьте количество толщин линий до двух, если возможно, до трех максимум. Любое большее может быть запутанным и чрезмерно подробным.

6. Добавьте индивидуальности.

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

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

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

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

Иконки Google, напротив, проще. Упрощенный дизайн в конечном итоге функционален и прост, но цвет помогает различать разные категории мест.

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

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

7. Проверьте свои значки.

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

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

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

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

1. Material Design

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

2. Streamline Icons

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

3.

Nucleo

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

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

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

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

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

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

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

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

Comments

Leave Comment