10 советов по созданию классных иконок ...

Ну, я вернулся и на этот раз собираюсь сделать что-нибудь другое и надеюсь, вам будет интересно.

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

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

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

1. Узнай историю своей иконки

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

Вам не нужно сходить с ума от исследований, но вы должны хотя бы попытаться найти ответ на три простых вопроса:

• Кто?
• Когда?
• Почему?

Кто?

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

Когда?

«Когда», как вы уже догадались, означает «конкретное окно во времени», когда появилась потребность в icons как цифровых визуальных символах. Для тех, кто не знал, дизайн иконок появился только в 1981 году с рождением Xerox 8010 Star, которая была первым компьютером с графикой GUI или Graphic User Interface, то есть, до неё картинка не имела смысла. Но это не «молодо», так как он развивался невероятно быстро на протяжении многих лет, и ещё не достиг своего полного импульса.

Почему?

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

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

Теперь я не отпущу вас так легко, дав вам ответы, так как не хочу испортить вам путешествие. Но я оставлю вам ссылку на красивый интерактивный веб-сайт, который содержит всю информацию, собранную в одном месте и presents it so damn well.

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

2. Проведите базовые исследования для нового проекта

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

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

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

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

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

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

• Кто?
• Что?
• Как?

Кто?

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

Необходимо «просчитать» своего пользователя, создав исчерпывающий список характеристик, которые влияют на его/её опыт работы с иконками и самим UI.

Обычно это характеристики:

• Возраст (молодые или старые)
  
• Пол (мужчины или женщины)
• Раса (различие культур)
• Образование (образованные и без образования)
• Технические навыки (грамотные пользователи и те, которые боятся технологий)

Давайте рассмотрим на примере возраста и социально-демографической переменной то, как молодые взаимодействуют с UI по сравнению со старыми.

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

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

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

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

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

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

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

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

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

Что?

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

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

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

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

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

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

Как?

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

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

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

3. Вычислите тему

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

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

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

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

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

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

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

4. Определение стиля ваших значков

Когда у вас есть тема, следующее, о чём вам нужно подумать, это стиль для создания своих значков. Теперь, если «тема» - это ваша история, то «стиль» - это способ повествования и это действительно важно, поскольку даёт возможность отделиться от всего остального, сделав что-то уникальное.

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

4.1. Flat Icons

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

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

4.2. Line Icons

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

Можно обойтись и одними линиями.

Другое отличие в том, что приходится больше работать с Pen Tool (P) по сравнению с flat icons, где вы полагаетесь на базовые формы, такие как прямоугольники и круги, которые вы бы отрегулировали с помощью панели Pathfinder в комбинации с другими инструментами.

Будь это “line icons” или “flat icons”, не имеет большого значения, если вы создаёте что-то своё, что, если хорошо получится, сразу позволит людям узнать, кто автор.

Я считаю, что стиль - это сумма трёх различных аспектов:

• Цвет
• Форма
• Выражение

Цвет

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

Измените теплоту ваших цветов и «тон» переместится с дружественного в нечто более отдалённое.

Разумеется, это маленький пример, есть разные значения цветов, которые я не буду обсуждать, потому что об этом хорошо написано в well-written piece, с подробными пояснениями.

Форма

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

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

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

Выражение

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

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

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

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

Сегодня тенденция с icon дизайном сосредоточена на «линейной работе», где композиция составлена из цветов заливки и толстых линий, которые ограничивают различные секторы, формирующие собственно значок. Причина его популярности объясняется простотой, с которой выражена идея/эмоция, всего лишь парой форм и цветов, по сравнению с временами, когда создавались icons, максимально похожие на их реальных собратьев.

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

5. Создание с вариантами размеров

Размер - или, точнее, «размеры» - это, наверное, самый важный аспект, который необходимо учесть, поскольку ваши значки, вероятно, будут использоваться на разных экранах разного размера и плотности пикселей Это означает, что они должны следовать определённым размерам, установленным либо интерфейсом, либо самой ОС.

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

Будь это Google’s Android или Apple’s iOS, вы можете легко найти нужный размер/размеры, создавая набор icons для мобильного приложения.

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

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

С другой стороны, если вы создаёте пакет значков для продажи на онлайн-рынке, там тоже есть свои правила, поскольку обычно эти пакеты поставляются с точными вариантами размера от 16 x 16 px до 256 x 256 px.

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

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

Подробнее о процессе правильного scaling your icons в этом небольшом уроке, который я недавно написал.

6. Достижение согласованности и связности с помощью эталонных сеток

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

Значит, следующая вещь, которую вы должны изучить и всегда применять в работе - это Reference Grids. По определению, Grid это «структура, состоящая из ряда пересекающихся прямых (вертикальных, горизонтальных и угловых) или изогнутых направляющих линий, используемых для структурирования содержимого. Сетка служит арматурой, на которой дизайнер организует графические элементы рациональным, простым в освоении образом » (Википедия).

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

7. Всегда избегайте текста внутри своих иконок

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

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

Кроме того, подумайте, как создать супер мелкую иконку (24 x 24 px), поставить рядом с ней слово с весом шрифта 6 px и ожидать, что кто-то сможет его прочитать.

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

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

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

8. Стремитесь к достижению Pixel Perfection

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

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

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

Я видел множество плохих значков, которые расплывались на устройствах с большим разрешением и я удивлялся, почему они не делают всё правильно. В конце концов, это побудило меня исследовать вопрос и создать учебный курс «как это сделать», объясняющий процесс creating pixel-perfect artwork.

Если обучение с помощью просмотра вам интересно, то есть хороший видеокурс, который я создал несколько месяцев назад, где показан пошаговый процесс creating a set of pixel-perfect icons.

9. Учитесь рисовать просто

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

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

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

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

10. Всегда повторяйте

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

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

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

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

В заключение

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

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

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

• Media Player Icons by Yurlick
• Christmas Icons by Rodionova
• Universal Flat Icons by Vasabii
• The Christmas Icons by Lastspark
• Christmas Line Icons by Kuzzie
• Art Vector Icons by Naripuru
• Finance Icon by Albarn
• E-commerce Business and Finance by Kolo_designer
• Document Icons Set by In-Finity
• Office Icons by Mikkimikki_prg