Ваша мышка проехала метров
До скидки 5% осталось м
Ваш промокод на скидку

Идеальная иконка за 6 шагов

04.03.2019

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

Три атрибута эффективного дизайна 

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

Форма

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

Эстетика

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

Распознаваемость

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

Всегда начинайте с сетки!

Внешние 2 пикселя сетки - это то, что называется «запретной зоной». Избегайте размещения какой-либо части значка в этом пространстве, если это не является абсолютно необходимым. Цель запретной зоны - создать вокруг иконки свободное пространство. Ориентация иконки также зависит от сетки. Например, если вы хотите нарисовать ограничительную линию вокруг иконки, как правило, это будет простая геометрическая фигура: квадрат, круг, треугольник и т.д. Круглые значки в большинстве случаев расположены по центру сетки и касаются всех четырех внешних краев, не переходя в запретную зону. Обратите внимание, что общая причина нарушения правила запретной зоны заключается в том, что некоторый акцент или второстепенный элемент должен выходить за пределы круга, чтобы сохранить целостность конструкции, как показано ниже.

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

Внутри 32-пиксельного квадрата вы заметите вертикальные и горизонтальные прямоугольники размером 20×28 пикселей. Мы свободно используем эти прямоугольники для значков, которые имеют горизонтальную или вертикальную ориентацию.

Начните с простых геометрических форм

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

Детализируйте

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

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

Уникальность

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

Будьте последовательны 

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

Заключение

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