Все, что вам нужно знать о дизайне иконок

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

Фон на иконах

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

Интересный факт: слово «икона» происходит от греческого слова «эйкона», что означает изображение. Цифровые значки начали появляться, когда появились самые первые операционные системы с графическим интерфейсом, такие как Macintosh и Microsoft.

Какие существуют типы икон?

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

Универсальные иконки

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

Иконки с разными значениями

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

Уникальные иконки

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

Какие форматы значков вы можете использовать?

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

• SVG — это масштабируемая векторная графика, обеспечивающая идеальный базовый формат. Поскольку он масштабируемый, это, по сути, означает, что вы можете изменить размер значка без потери качества.
• PNG — формат переносимой сетевой графики — это вариант, если вам нужна полная совместимость. Это растровый формат, что означает, что он основан на пикселях, и вы не можете масштабировать его, не влияя на качество. PNG будет работать в Word, PowerPoint и в электронных письмах. Их можно добавлять поверх любого цветного фона без редактирования.
• ICO — формат значков Microsoft Windows отлично подходит, если вы хотите использовать свой значок для любого приложения Windows или даже в качестве фавикона для своего собственного веб-сайта.
• ICNS — этот формат используется для очень специфических целей. Это специальный формат Apple, который можно использовать как с документами Mac OS X, так и с приложениями.

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

Что делает иконку эффективной или неэффективной?

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

Ясность

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

Читабельность

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

Выравнивание значка

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

Краткость иконки

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

Последовательность

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

Индивидуальность дизайна

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

Ваша иконка должна быть проста в использовании

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

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

Что должно быть в вашем брифе на дизайн иконок?

Рассмотрите все варианты использования

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

Мозговой штурм концепций и метафор

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

Найдите полезные ссылки

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

Выберите стиль иконки

Некоторые из популярных стилей: глиф, плоский, контурный, материальный и нарисованный от руки. Когда вы окончательно определитесь со стилем, вам нужно будет подумать о двух важных факторах. Одним из них будет интерфейс пользовательского интерфейса, на котором они будут отображаться, и его стиль. Во-вторых, это требования к этому интерфейсу, например, Material или iOS.

Подробно обсудите с вашим дизайнером

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

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

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

Контрольный список для создания новых иконок

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

Избегайте размытых значков

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

Проверьте размеры и вес

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

Использование геометрических фигур

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

Избегайте излишней детализации

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

Держите место

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

Контраст в иконах

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

Посмотрите на визуальное единство

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

Дизайн иконок — это весело, но сложно сделать правильно

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