7 Основ Дизайна Иконок
Цифровой маркетинг требует использования большого количества визуальных средств, таких как инфографика, брендинг сайта и другой визуальный контент. Для достижения этой цели следует применять маркетинг привлечения, который подразумевает брендинг вашего бизнеса в дружественной и личной манере.
Такой маркетинговый подход требует профессиональных, но в то же время персональных наборов иконок, которые будут использоваться в различных приложениях. Иконки, которые вы разработаете, должны быть привлекательными, модными и иметь модернистский вид.
Начните ли вы с эскизов и заметок о том, как должна выглядеть иконка, или сразу переходите к программной части процесса.
Как взломать код создания профессиональных наборов иконок? Вот семь основных принципов, которые вы можете применить прямо сейчас.
Важное раскрытие информации: мы являемся гордыми партнерами некоторых инструментов, упомянутых в этом руководстве.
Если вы перейдете по партнерской ссылке и впоследствии совершите покупку, мы получим небольшую комиссию без дополнительных затрат с вашей стороны (вы ничего не платите дополнительно).
1. Постоянный Визуальный Вес 💁🏻♂️
Сколько раз вы чувствовали себя очень неловко из-за того, что набор иконок не соответствует размеру? Возможно, вы чувствовали себя перфекционистом, но есть миллионы других людей, которые чувствуют то же самое.
Чтобы не вызывать у целевой аудитории подобных ощущений, убедитесь, что все разработанные вами иконки имеют одинаковый визуальный вес.
Это означает, что их высота и даже ширина имеют одинаковый размер во всем наборе значков. Если один значок заметно больше другого, это повлияет на профессиональный имидж бренда.
Как вы можете доверять бренду, который не может согласовать размер своих иконок с вашими деньгами? Легко превратиться в перфекциониста при создании иконок, потому что непоследовательный визуальный вес может раздражать клиентов и заставлять их ругать компанию в социальных сетях и на ее сайте.
Если вы создаете приложение, веб-сайт или другой визуальный контент с использованием иконок с непоследовательным визуальным весом, это заставит проект выглядеть «шумным».
Это относится даже к значкам, не похожим по форме. Все ваши круги должны иметь одинаковый визуальный вес с квадратами и другими фигурами. Чтобы добиться этого, используйте линии сетки на используемом инструменте дизайна, а не пытайтесь определить на глаз.
После создания начальной иконки используйте ее размерную сетку, чтобы идеально сохранить аккуратный набор иконок, способствующий профессионализму.
Прежде чем использовать набор значков, проверьте все значки, чтобы определить, имеют ли они одинаковый визуальный вес. Если есть какое-то несоответствие, быстро исправьте его, прежде чем использовать этот набор значков в любом проекте, чтобы избежать потери профессионального имиджа бренда.
2. Простота И Минимализм ✅
Очень легко иконки, используемые в анимационных приложениях, могут быть неправильно истолкованы для чего-то другого, что может быть оскорбительным или иметь полярно противоположное значение.
Некоторые вещи могут быть не совсем понятны, и клиенты могут решить не утруждать себя дальнейшими исследованиями, а это может означать, что они упустили важные ресурсы. Люди отвергают то, что они не могут понять, поэтому иногда полезно излагать вещи простыми словами.
Это особенно важно при создании наборов иконок, которые будут использоваться в различных приложениях. Помните, что при создании профессиональных наборов иконок лучше меньше, чем больше, поэтому старайтесь избегать слишком большого количества деталей.
Придерживайтесь основных элементов дизайна и не выходите за рамки того, что необходимо для четкого восприятия набора иконок. Большое количество элементов может сделать иконку тяжелой и шумной.
Удалите все, что не является абсолютно необходимым для хорошо понятных иконок. Цель должна заключаться в том, чтобы потребители понимали значок сразу, как только на него взглянут. Если им требуется некоторое время, чтобы понять, о чем идет речь, это может привести к катастрофе.
Старайтесь быть как можно более минимальными, особенно при создании анимированных иконок.
При разработке профессионального набора анимированных значков старайтесь не заострять внимание на деталях. Вместо этого сместите акцент на передачу контекста иконки с помощью меньшего количества элементов дизайна. После разработки каждой иконки посмотрите на нее пару минут и спросите себя, все ли эти векторы необходимы, если нет, то удалите все ненужные элементы.
3. Создание Иконок С Последовательным Голосом Бренда 👏🏼
У каждого бренда есть уникальный идентифицирующий голос или индивидуальность, которую он должен поддерживать. В руководстве по входящему маркетингу говорится о том, что необходимо создавать убедительный контент для всех этапов цикла покупки.
Это означает, что все иконки, используемые в визуальном контенте, должны быть одинаковыми во всех типах публикуемых вами медиа. Последовательность является ключевым фактором, и если клиенты видят разные типы иконок на каждом этапе цикла покупки, это может навредить им.
Клиент может подсознательно думать, что имеет дело с перевертышем. Это признак мошенничества или непрофессионального бизнеса. Поэтому старайтесь во что бы то ни стало использовать один набор иконок для маркетинговых целей. Даже в рамках своего набора иконок вы должны обеспечить его единообразие. Не используйте анимированные иконки, а затем используйте другой тип в рамках этого набора.
Если вы решили использовать тени, отражения или определенные эффекты освещения, убедитесь, что эти элементы присутствуют на всех иконках. Приступая к проекту дизайна набора значков, имейте целостное представление о том, что вы ожидаете увидеть. Затем вы должны работать над созданием набора иконок с учетом этого целостного представления об ожидаемых результатах.
Постарайтесь сделать весь набор уникальным по сравнению с конкурентами или другими существующими предприятиями.
Очень важно привнести голос бренда в этот этап разработки. Все иконки, которые вы используете, должны хорошо напоминать вас и ваш бренд.
Кроме того, учитывайте, для чего будут использоваться эти иконки, а также предполагаемую целевую аудиторию. При разработке профессиональных наборов значков следует убедиться, что голос вашего бренда передан в модернистской и модной манере.
4. Дизайн Иконок С Достаточным Количеством Белого Пространства 💻
Загроможденные иконки, на которых все лежит одна на другой, не похожи на профессионализм и удобство использования. Даже если ваше приложение или веб-сайт просты в использовании, загроможденный набор значков может разочаровать потребителей.
Наличие достаточного белого пространства в дизайне, который вы используете в профессиональных целях, очень важно. Это белое пространство будет способствовать созданию красивого, привлекательного впечатления и удобству использования среди потребителей.
Чтобы создать иконки с достаточным количеством белого пространства, необходимо все правильно спланировать и определить размеры. На этот этап также влияет вышеупомянутый принцип простоты и минимализма. Если вы попытаетесь вместить много элементов дизайна, вам будет трудно обеспечить достаточное количество белого пространства. В результате у вашего набора не будет достаточного пространства для дыхания, что приведет к неприятным ощущениям у пользователей.
Большинство иконок имеют небольшое рабочее полотно, поэтому при их разработке следует минимизировать используемые элементы.
Наличие большого количества ненужных векторов может выглядеть неопрятно и очень неудобно после сворачивания иконки, резко сокращая белое пространство. Другим важным фактором в этом пункте является создание иконок, у которых сбалансировано белое пространство с обеих сторон.
Если иконка непреднамеренно плохо отцентрирована, она также может выглядеть неопрятно.
В этом случае использование линий сетки на используемых вами инструментах дизайна очень важно. После создания набора получатся красивые и профессиональные иконки.
Если ваш дизайн включает текст, наличие белого пространства гораздо важнее для создания читаемого значка. Не пытайтесь втиснуть все в один маленький холст, а импровизируйте, когда сталкиваетесь с проблемой.
5. Пиксельно-Совершенный дизайн 😍
Размытые иконки могут привести к неприятному потребительскому опыту и непрофессиональному имиджу бренда. С другой стороны, четкий дизайн с высоким разрешением может создать очень профессиональный образ.
Именно поэтому при разработке иконок необходимо знать, как достичь пиксельного совершенства. При выполнении этой задачи необходимо учитывать различные факторы, такие как место использования ваших иконок, размер экрана и размер.
Например, создание иконок, предназначенных только для смартфонов, и использование их на больших плакатах или даже рекламных щитах резко снизит их пиксельное совершенство.
Создавая профессиональные наборы, помните, что эти дизайны могут быть использованы как для визуального контента небольшого размера, так и для очень большого. Иногда вас могут подвести ваши инструменты, поэтому попробуйте использовать высококлассное программное обеспечение для дизайна.
Последние тенденции в программном обеспечении для дизайна улучшили их пиксельное совершенство. Например, Adobe Illustrator может помочь дизайнерам и иллюстраторам создавать четкие иконки высокого разрешения.
Если вы сделаете все возможное для создания наборов высокого разрешения, это поможет повторно использовать значки в различных приложениях без потери качества. Прежде чем использовать набор значков, увеличьте масштаб каждого значка, чтобы увидеть, когда он теряет качество, и сделайте некоторые исправления перед выпуском.
Еще один прием, который вы можете использовать, — это просмотр всех дизайнов на различных устройствах, начиная от смартфонов, планшетов и заканчивая настольными компьютерами. Если вы заметили размытость, есть несколько приемов, которые следует изучить.
Некоторые из этих техник включают в себя наведение пикселей, подгонку, подталкивание, размазывание вращение и т.д. Использование этих приемов может помочь исправить иконки, которые не являются идеальными с точки зрения пикселей, особенно при увеличении масштаба.
6. Контраст И Цветовая Палитра 🎨
Выбор цветовой схемы для профессиональных наборов иконок — важный аспект их разработки. Вы должны учитывать цветовую схему вашего брендинга и его применение. Например, дизайнеры мобильных операционных систем используют цвет, который прекрасно сочетается с любым типом цвета.
Рассмотрим последние цвета меню смартфонов, большинство разработчиков ОС используют серый, черный или белый цвет, чтобы соответствовать другим цветам миниатюр приложений.
Следовательно, если вы собираетесь разрабатывать иконки, которые будут использоваться с другим цветным контентом, использование таких цветовых схем может быть полезным.
Если вы хотите добавить немного жизни, используя различные цвета, подумайте об использовании иконок, которые соответствуют вашему текущему брендингу. Избегайте использования несовпадающих цветов, так как это не обеспечит последовательного восприятия.
Еще один момент, который следует тщательно продумать, — это контраст. Если цвет иконки слишком темный, может быть трудно определить, что это на самом деле. С другой стороны, слишком светлая иконка может разбавить внешний вид и снизить профессионализм.
Слишком светлые цвета также могут не сочетаться с более светлыми темами веб-сайтов или фоновыми изображениями. Вы можете провести пробное тестирование различных иконок в различных приложениях, в которых вы будете их использовать, чтобы найти идеальную цветовую схему.
К этому шагу не следует относиться легкомысленно, потому что эти иконки вы будете использовать в течение долгого времени.
Помните об этом при выборе цветов и контрастов для наборов иконок, чтобы они были профессиональными и обеспечивали отличный пользовательский опыт. В то же время, не будьте безвкусными при создании иконок, потому что это может наскучить пользователям. Учитывая вышесказанное, можно с уверенностью сказать, что цветовая гамма для набора иконок должна быть выбрана с учетом того, как, где и для чего они будут использоваться.
7.Геометрические Формы Имеют Большее Влияние 👏🏼
Вы хотите, чтобы ваши иконки были более влиятельными и имели больший авторитет для пользователей? В этом случае постарайтесь свести к минимуму использование свободных форм, поскольку они могут показаться непрофессиональными и неавторитетными.
Вместо этого при создании иконок всегда ориентируйтесь на геометрические формы.
Свободный дизайн может быть неаккуратным и не достичь целей и задач, которые вы ставили перед собой.
Даже если весь дизайн не может быть реализован с помощью всего нескольких геометрических фигур, постарайтесь сконцентрировать его внешний вид с помощью цельной формы. Форма может быть любой: круги, треугольники, квадраты, прямоугольники и т.д.
Значок, расположенный по центру или созданный с использованием геометрических форм, выглядит гораздо более устойчивым. Эти факторы способствуют созданию профессионального и влиятельного дизайна. Неаккуратная иконка может заставить потребителей чувствовать себя неуверенно и снизить их доверие к вашему сайту, приложению или визуальному контенту.
Также, придерживаясь геометрических форм, вы можете разработать упрощенный дизайн без лишних деталей. Во всем, что вы делаете, просто убедитесь, что каждая иконка понятна, ясна и привлекательна для потребителей. Используйте геометрические формы для создания иконок с контекстом вместо создания абстрактных дизайнов.
При использовании геометрических форм выравнивание элементов пиктограмм может быть проще и способствовать созданию дизайна с достаточным количеством белого пространства, который является сбалансированным.
Соблюдение линий сетки также упростит работу над цифровым холстом и ускорит процесс проектирования. Преимущества использования геометрических фигур десятикратны, и нет причин, по которым вы не должны использовать эту стратегию при разработке ваших наборов иконок.
Итог 👈🏽
Последовательность очень важна при разработке иконок, поскольку она создает профессиональный имидж компании. Кроме того, при выборе цветовых схем, размера и старайтесь, чтобы пиксели были идеальными, учитывайте пользовательский аспект дизайна.
Этот пост был написан Томасом Ланиганом. Томас работает старшим писателем и редактором. Он обладает богатым опытом в области академического письма и пишет диссертации, рефераты и курсовые работы, которые всегда получали высокую оценку со всех сторон.
В настоящее время он является автором книги о юридических аспектах приобретения бизнеса.
Принципы дизайна для идеального набора иконок
12 шагов, которые необходимо выполнить, если вы хотите создать выдающийся набор иконок
Привет! Меня зовут Дима, я дизайнер и создатель универсального набора иконок. Не так давно я выпустил версию 2.0 этого набора. Работая над версией 1.0, я четко не определил правила построения единой системы иконок. В результате возникли некоторые несоответствия.
Чтобы избежать подобных ситуаций в будущем, я создал принципы, которые можно использовать при построении системы иконок.
Мой список принципов верен для каждого стиля в наборе (линейный, сплошной, двухцветный). Таким образом, каждый стиль можно использовать отдельно или комбинировать друг с другом, в обоих случаях это будет выглядеть гармонично.
За основу я взял принципы Material Design и руководства IBM Design Language. В версии 2.
0 я изменил дизайн всех значков и добавил новые. Теперь здесь 1671 иконка (557 для каждого стиля).
В общей сложности у меня получилось 12 правил. Продолжайте читать, в этой статье я делюсь своим опытом.
ЯсностьКаково основное назначение иконки? Быстрое понимание ее смысла. Человеческий глаз обрабатывает визуальные образы гораздо быстрее, чем текст. Кроме того, это универсальный способ понимания информации на любом языке. Поэтому, чем точнее метафора вашей иконки, тем быстрее она будет «прочитана». И это первое, на что следует обратить внимание при создании иконок.
✅ “Используйте четкие образы”
❌ “Избегайте сложных для понимания образов”
Также важно обращать внимание на контекст использования иконки. Например, один и тот же значок дома будет иметь разное значение для интерфейса браузера и на картах.
ПростотаПрежде чем начать рисовать, необходимо подумать о том, как будет выглядеть ваша иконка.
Чем проще будет ее изображение, тем легче будет понять ее конечному пользователю.
Простоты можно добиться, используя минимально возможное количество деталей для создания иконки. Если в процессе работы она окажется сложной, не бойтесь убрать лишние детали, оставив только самые важные.
✅ “Сделайте свои иконки как можно более простыми”
❌ “Не используйте в своих иконках много деталей”
Стиль набора иконокЕсли вы зайдете на Dribbble и наберете в строке поиска «иконки», вы увидите множество вариантов различных стилей иконок. Каждый стиль подходит для своих нужд. Все иконки в наборе должны быть выполнены в одном стиле, не забывайте об этом.
У меня в наборе три разных стиля — линейный, сплошной, двухцветный. По моему опыту, этого более чем достаточно, чтобы покрыть большинство случаев использования иконок.
✅ “Придерживайтесь единого стиля в рамках одного набора иконок”
❌ “Не используйте разные стили в рамках одного набора”
Вы можете использовать два стиля иконок, когда вам нужно выделить одну из них.
Например, для навигации можно использовать значки в стиле линии, а для выделения — в стиле сплошной линии.
Перейдем к более техническим принципам. Они помогут нам создать систему с четкими правилами. Прежде всего, начните с выбора базовой сетки. Все иконки будут строиться на ее основе. Каждая часть вашей иконки должна быть помещена в пиксельную сетку.
Сетки различаются в зависимости от задачи. Наиболее распространенные размеры — 16×16, 24×24, 32×32, 48×48, 64×64, 96×96;
Размер сетки зависит от причины использования иконок, рекомендаций и особенностей операционной системы. Например, для Android размер сетки составляет 24 x 24 dp (dp — density independent pixels — плотность независимых пикселей).
✅ “Расположите иконку внутри пиксельной сетки”
❌ “Не помещайте иконку на десятичные значения координат x- и y-”
Область обрезкиОбласть обрезки (или отступы) указывает область сетки, которую следует избегать.
Основная часть иконки должна располагаться точно в безопасной области (или живой области). В большинстве случаев это не правило, а рекомендация. Вы можете зайти в зону обрезки, если этого требует здравый смысл. В своем наборе я использую эту область как дополнительное пространство для маневра в исключительных случаях.
✅ “Иконка должна размещаться внутри области обрезки”
❌ “Избегайте размещения частей иконки на область обрезки”
В некоторых случаях это правило нельзя нарушать. Например, когда мы имеем дело с иконками приложений для операционных устройств.
Основные формыВизуальный вес иконки должен быть одинаковым, если вы хотите, чтобы они выглядели гармонично. В этом помогут основные формы. К ним относятся квадрат, круг, горизонтальный и вертикальный прямоугольники.
Они помогают упростить создание иконок, сохраняя единый визуальный баланс для каждой из них. Визуальный вес иконки можно рассчитать по формуле. Значения будут приблизительными, но этого будет достаточно.
А теперь давайте вспомним геометрию!
Начнем с площади круга:
d — высота безопасной зоныВ нашем случае диаметр «d» равен 20 пикселям, а радиус «r» — 10 пикселям, площадь круга приблизительно равна 314 пикселей².
Далее найдем стороны квадрата и его площадь:
а — округлите до ближайшего четного значенияСторона ‘a’ будет равна приблизительно 17,7 пикселя. Округлите до ближайшего четного числа. В нашем случае — 18 пикселей. Площадь квадрата составит 324 пикселей².
Теперь давайте найдем стороны прямоугольника:
b — высота безопасной зоныВ нашем случае сторона «b» составляет 20 пикселей, а сторона «c» — 16 пикселей.
Это дает нам размеры наших основных фигур:
Основные формы (примеры)Ширина линииПосле того как мы настроили основные параметры нашей сетки, мы можем приступить к созданию значков. Нам нужно выбрать ширину линии для иконок. Чтобы ваши иконки выглядели пиксельно идеально на любом устройстве, я рекомендую придерживаться целочисленного значения.
Например, 1 px или 2 px.
Также важно не забывать о минимальном расстоянии между элементами. Оно также должно быть равно ширине линии или быть чуть больше нее.
Ширина линии (примеры)✅ “Будьте последовательны в использовании ширины линии и минимального свободного пространства”
❌ “Не используйте разные веса начертания и минимальный пробел меньше ширины линии”
УглыПри создании гармоничного набора иконок важно определить углы у ваших объектов. Для начала выберите форму углов: острые или закругленные. С острыми углами все понятно. Однако для закругленных углов следует установить правила, по которым они будут закругляться, в зависимости от размера объекта.
Например, у меня для основных объектов установлено закругление от 2 до 4 px в зависимости от размера.
Углы (примеры)Угол наклонаВы можете указать базовые значения или один шаг (например, 15 градусов) для выравнивания угла наклона косых линий. Это ограничение также поможет вам при создании иконок.
Часто то, что аккуратно с геометрической точки зрения, не является таковым с визуальной. При создании иконок необходимо выравнивать объекты по их визуальному весу. В первую очередь это относится к асимметричным объектам. Например, мы часто сталкиваемся с такой проблемой при рисовании иконки «воспроизведения».
Оптический баланс (примеры)✅ «Используйте оптический баланс»
❌ «Не полагайтесь только на цифровые значения»
В дополнение ко всем принципам, для единообразия иконок важно придерживаться одной перспективы. В большинстве случаев подойдет двухмерный вид значка. Это может быть вид сверху или спереди. Можно использовать 3D-вид, но тогда необходимо использовать одну и ту же перспективу для всех иконок в наборе.
Перспектива (2D / 3D) (примеры)Здравый смыслЯ рекомендую придерживаться этих принципов для создания целостного набора иконок, но вы также должны руководствоваться здравым смыслом и своим личным визуальным вкусом.
Из любого правила есть исключения, так что нарушайте его, если это необходимо.
“В этом примере я использовал различные углы наклона, чтобы получить идеальную иконку с точностью до пикселя”
“В этом примере часть элемента “замка” расположена на области обрезки, таким образом его отображение на всех иконках останется единым”
ЗаключениеВместо скучного вывода я хочу показать вам видео, которое я сделал для Universal Icon Set v2.0.
Спасибо, что дочитали до конца. Надеюсь, эта статья была для вас полезной.
Вот как создать иконку с нуля [шаг за шагом]
Иконки: маленькие символы, которые так много говорят. В наши дни они повсюду и играют огромную роль в успехе пользовательских интерфейсов (UI). Независимо от того, являетесь ли вы начинающим дизайнером пользовательского интерфейса или UX-дизайнером, желающим освежить некоторые навыки визуального дизайна, процесс создания иконок является ключевым в вашем наборе инструментов.
Когда дело доходит до разработки нового набора значков с нуля для нового проекта, важно уделить этому процессу достаточно времени. Также следует помнить о некоторых рекомендациях, которые помогут сделать ваши значки узнаваемыми и удобными для пользователя.
В этом руководстве мы шаг за шагом рассмотрим процесс создания иконки. Во-первых, я покажу вам семь ключевых соображений, которые следует учитывать при разработке иконок с нуля. Затем мы применим нашу теорию на практике, разработав значок камеры от начала до конца.
Этот пост разделен на две части:
- Семь золотых правил создания иконки
- Как создать иконку с нуля (шаг за шагом)
Готовы? Давайте погрузимся!
В этом разделе мы рассмотрим семь ключевых моментов, которые следует учитывать при разработке значков.
1. Помните о сетке
Многие вещи в цифровом дизайне управляются сеткой. Иконки ничем не отличаются. При разработке значков вы должны уделять пристальное внимание пиксельной сетке и тому, как ваш значок вписывается в нее.
Самый простой способ убедиться, что ваши значки плотно вписываются в пиксельную сетку, — это придерживаться целых чисел. Избегайте десятичных точек любой ценой — эти ребята дают размытые края. Давайте посмотрим, как это выглядит на практике.
Ниже я нарисовал простой значок дома и оставил пиксельную сетку включенной. Слева вы увидите значок, состоящий из штрихов, идеально вписывающихся в пиксельную сетку. Справа штрих немного падает. Вы можете сказать это, взглянув на линии, составляющие пиксельную сетку — они проходят прямо через штрих.
Теперь давайте на секунду посмотрим на диагонали, из которых состоит крыша. Они не идеально сидят на сетке. Мы бы не смогли их подогнать, потому что сетка состоит из вертикальных и горизонтальных линий, без диагоналей. В этих случаях мы следим за тем, чтобы начальная и конечная точки, составляющие диагональ, находились на сетке.
2. Сначала осмотритесь
Заманчиво захотеть создать совершенно новую, безумную новеллу или набор.
Мы креативщики, в конце концов! Однако у нас есть стандарты, которых мы хотим придерживаться. Мы познакомились со специфическими значками, обозначающими стандартные функции.
Обратите внимание на маленькое увеличительное стекло с надписью «искать», которое мы видим повсюду. Увеличительные стекла — не единственный предмет, на котором может быть написано «поиск». Однако мы использовали их так часто, что теперь они стали стандартным значком поиска. Использование другого значка требует от пользователя изучения чего-то нового, что в результате замедляет его работу. Это не очень способствует плавному взаимодействию с пользователем!
Перед созданием значка осмотритесь и определите стандарты, которые вам, возможно, придется учитывать при работе. Значит ли это, что нет места творческой свободе? К счастью, это не так! Если значок не представляет функциональность, регулируемую стандартами, мы можем дать волю своим творческим сокам. Если это так, мы все еще можем дать ему творческий поворот.
Пока значок и его функция по-прежнему узнаваемы, вы можете добавить свой собственный стиль дизайна!
3. Не увлекайтесь деталями
Мы часто размещаем значки в крошечных местах, например, на панели вкладок на iPhone. Когда вещи становятся маленькими, слишком много деталей начинает теряться.
При проектировании тщательно подбирайте детали, которые вы хотите включить. Будьте осторожны с мелкими частями и убедитесь, что ваши значки читаются четко, даже в небольших размерах.
4. Будьте последовательны
Когда мы разрабатываем набор иконок, они должны быть похожи на семью. Они не все будут выглядеть одинаково, но будут иметь схожие визуальные атрибуты, что заставит их чувствовать себя связанными.
При разработке дизайна подбирайте согласованные стили. Если, например, вы использовали закругленные углы и концы в одном значке, убедитесь, что вы делаете то же самое для всех остальных. Стиль, размер и уровень детализации должны быть одинаковыми. Это способствует связному визуальному языку — важной части брендинга!
5.
Следите за зазоромБудьте осторожны с мелкими деталями или элементами, расположенными слишком близко друг к другу. При небольшом размере элементы, которые не расположены тщательно, могут быть трудными для чтения и начнут терять смысл.
6. Проверьте свою работу
Лучший способ убедиться, что ваши значки четко и быстро взаимодействуют с пользователями, — это протестировать их. После того, как вы закончили разработку своих иконок, рекомендуется провести быстрый тест.
Покажите свои значки другу или другому члену вашей команды. Попросите их рассказать вам первое, что приходит на ум, когда они их видят. Если это совпадает с тем, что вы намеревались сообщить, вы в хорошей форме!
7. Сборка из простых форм
Все можно разбить на основные формы. Помните нашу иконку дома выше? Мы разработали с двумя прямоугольниками и треугольником.
После того, как вы определили, какой будет ваша иконка, попробуйте разбить ее на простые формы. Это лучший способ начать создавать и упрощать свои иконки.
Мы рассмотрели, что следует учитывать при разработке значка. Теперь давайте применим это на практике. Для этого мы создадим простую иконку камеры.
Я буду использовать Sketch. Однако вы можете повторить следующие шаги в другом программном обеспечении для проектирования, таком как Figma. Если вы не можете определиться с инструментом, посмотрите это сравнение Figma и Sketch.
Шаг 1: Ознакомьтесь с объектом съемки
Для начала давайте познакомимся с тем, как выглядят камеры. Самый простой способ сделать это — найти в Google то, что вы собираетесь проектировать. Я погуглил «камера» и получил следующие результаты:
Мои результаты показывают множество камер, все разных форм и размеров. Однако у них есть несколько общих определяющих характеристик:
- Большой объектив в центре корпуса
- Вспышка
- Кнопка, позволяющая сделать снимок
Мы обязательно включим эти три характеристики в наш дизайн, поскольку они сделают значок нашей камеры легко узнаваемым для широкой аудитории.
Шаг 2: Разбейте
Далее мы начнем искать основные формы. Есть ли круги, квадраты или прямоугольники, которые мы можем использовать для построения? Просмотрите несколько эскизов и итераций, чтобы помочь вам идентифицировать их.
Я нашел следующее:
- Корпус камеры может быть выполнен в виде прямоугольника со скругленными углами.
- Объектив и вспышку можно воссоздать с помощью кругов.
- Кнопка может быть прямоугольной.
Это будут наши строительные блоки.
Шаг 3: Начни строить!
Со всей этой информацией мы готовы перейти к компьютеру. Начните с создания артборда размером 24×24 пикселя, назовите его «Значок камеры» и включите пиксельную сетку. Ваше рабочее пространство должно выглядеть примерно так:
На нем начните рисовать основные фигуры, составляющие три определяющие характеристики, которые мы определили ранее. Убедитесь, что все фигуры плотно прилегают к пиксельной сетке, как мы сделали в примере ниже.
Если ваши пиксели не привязываются к сетке, проверьте настройки границ. Убедитесь, что ваши границы установлены снаружи или внутри фигуры, а не по центру. Если вы установите границу по центру, вы рискуете оказаться с элементами за пределами пиксельной сетки.
Комбинируйте любые фигуры, используя логические операции, чтобы упростить работу. Скажем, мы хотели добавить больше деталей к объективу, добавив больший круг вокруг маленького в центре: мы могли вырезать больший из корпуса камеры, чтобы превратить их в одну форму.
Шаг 4: Проверка!
Чтобы убедиться, что наша работа читается четко, мы хотим протестировать ее. Поделитесь своей работой с коллегой или другом. Спросите их, что они видят. Они сразу распознали вашу иконку как камеру, или вы не совсем там?
Шаг 5: Приведите в порядок
Прежде чем завершить работу над значком, дважды проверьте наличие десятичных знаков. Посмотрите на номера в инспекторе и убедитесь, что они все целые.
Шаг 6. Экспорт
Сохраните свою работу и экспортируйте ее, чтобы поделиться ею со всем миром!
Мы разработали довольно простую иконку камеры с минимумом деталей и штрихов. Вы всегда можете увеличить сложность вашего дизайна и стиля. Тем не менее, процесс и ключевые моменты, о которых следует помнить, всегда должны быть одинаковыми.
Удачного проектирования! Если вы хотите узнать больше о дизайне пользовательского интерфейса, ознакомьтесь со следующими статьями:
- 32 элемента пользовательского интерфейса для дизайнеров пользовательского интерфейса: ваш полный глоссарий
- Изучение эскиза для дизайна пользовательского интерфейса? Избегайте этих распространенных ошибок
- С чего начать дизайн пользовательского интерфейса: руководство из пяти шагов
7 принципов дизайна значков, которым должны следовать все дизайнеры пользовательского интерфейса
Значки — это небольшая, но важная часть любого пользовательского интерфейса.
Если вы хотите обеспечить первоклассный пользовательский опыт, вам необходимо овладеть искусством дизайна иконок, а это означает знать и следовать определенному набору принципов.
Итак, каковы золотые правила дизайна иконок? Наиболее важные принципы:
- Ясность смысла
- Визуальная ясность (или читаемость)
- Простота
- Знакомство
- Выравнивание и балансировка
- Полная согласованность
- Индивидуальность и брендинг
В этом руководстве вы найдете подробное объяснение этих принципов, а также примеры из реальной жизни, которые покажут вам, как выглядит хороший дизайн значков в действии.
Вот все, что мы рассматриваем (если вы хотите сразу перейти к принципам, просто нажмите вперед):
- Что такое значки пользовательского интерфейса и для чего они используются?
- Какие 3 типа значков используются в дизайне пользовательского интерфейса?
- 7 ключевых принципов дизайна иконок
- Как начать работу с дизайном значков
Давайте прыгать!
Что такое значки пользовательского интерфейса и для чего они используются? В дизайне пользовательского интерфейса (UI) значки представляют собой небольшие визуальные элементы, такие как символы, которые используются для представления определенных функций, функций или типов контента в пользовательском интерфейсе.
Рассмотрим сайт ИКЕА. Они используют различные значки для обозначения различных действий, которые может предпринять пользователь. Значок сердца в правом верхнем углу представляет собой список пожеланий пользователя; если они нажмут на нее, они перейдут к обзору всех элементов, которые они сохранили. Значок корзины рядом с ним представляет корзину пользователя. Если они нажмут на нее, они увидят все товары, добавленные в корзину, и перейдут к оформлению заказа.
На следующем снимке экрана изображена сумка для покупок со знаком плюс рядом с каждым отдельным предметом. Этот значок представляет функцию «Добавить в корзину». Также есть простой значок сердца, на который пользователь может щелкнуть, чтобы сохранить элемент в свой список желаний.
Затем, в самом низу страницы, есть ряд знакомых значков, представляющих Facebook, Twitter, Pinterest, Instagram и YouTube, а также множество возможных способов оплаты, включая VISA, Mastercard и PayPal.
Как и в случае с IKEA, значки используются для визуального общения с пользователем.
Значки могут относиться к одной из трех категорий:
- Универсальные значки
- Конфликтующие значки
- Уникальные иконки
Универсальные значки легко и мгновенно узнаются большинством пользователей . Рассмотрим значок увеличительного стекла, который обычно представляет функцию поиска, значок дома, который указывает на домашнюю страницу/главный экран, или значок треугольника в круге, который мы привыкли распознавать как кнопку воспроизведения. Где бы вы ни увидели эти значки, вы интуитивно понимаете, что они означают. 9. Например, на веб-сайте ИКЕА значок сердца используется для сохранения товара в списке желаний.
Однако в Instagram значок сердца представляет собой функцию «Нравится». На других сайтах социальных сетей функция «Нравится» передается значком «палец вверх». В других местах значок звездочки можно использовать, чтобы добавить что-то в избранное или добавить в список желаний. Видите, как у этих значков нет универсального значения?
Уникальные значки
Уникальные значки представляют возможности и функции, уникальные для конкретного продукта или интерфейса . Их может быть трудно распознать, поскольку они не являются чем-то, с чем пользователь сталкивается регулярно. Таким образом, они требуют, чтобы пользователь «изучил» их в контексте конкретного приложения или веб-сайта. Например, приложение GetYourGuide использует значок билета для представления бронирований пользователя.
Airbnb также использует ряд уникальных значков для обозначения различных типов доступного жилья.
В обоих примерах значки сопровождаются текстом, чтобы пояснить их значение.
В противном случае пользователю было бы очень сложно понять, что означает каждый значок.
Теперь, когда мы знаем, что такое значки и для чего они используются, давайте рассмотрим практические аспекты создания собственных. Вы хотите создавать значки, которые эффективно взаимодействуют с пользователем, вызывают знакомство и узнаваемость и дополняют общий дизайн интерфейса.
Чтобы добиться всего этого, вам нужно следовать определенным принципам. Семь основных принципов дизайна иконок:
- Ясность смысла
- Визуальная четкость (или читаемость)
- Простота
- Знакомство
- Выравнивание и балансировка
- Полная согласованность
- Индивидуальность и брендинг
Эти правила применяются как к дизайну отдельных значков, так и к дизайну целых семейств значков (т. е. набора значков, принадлежащих одному бренду или продукту).
Первое золотое правило дизайна иконок — ясность . Когда пользователь сталкивается со значком, он должен легко понять, что он означает. Таким образом, важно создавать свои значки с учетом ваших целевых пользователей.
Принцип ясности особенно важен, если вы разрабатываете уникальный значок, который не является универсальным. Подумайте, какие визуальные подсказки или символы могут ассоциироваться у ваших пользователей с действием, которое вы пытаетесь передать. Например, если вы хотите создать значок «библиотека» для учебного приложения, вы можете использовать знакомое изображение книги. Сова, с другой стороны, может быть слишком неясной.
2. Визуальная ясность (или удобочитаемость) Второй принцип дизайна значков — визуальная ясность или читаемость . Значки маленькие, поэтому вы хотите, чтобы пользователю было как можно проще видеть, что именно происходит.
Если вы включите слишком много мелких деталей или неадекватное расстояние, вы рискуете превратить свои значки и их отдельные элементы в размытое пятно.
Как и в случае с типографикой, цветом и большинством других аспектов дизайна пользовательского интерфейса, создавайте значки для оптимальной удобочитаемости.
3. ПростотаПринцип простоты тесно связан с ясностью зрения. Поскольку вы работаете с ограниченным пространством, важно просто и эффективно передать значение каждого значка. Вы не хотите, чтобы пользователь задумывался над ненужными деталями или слишком внимательно вглядывался, чтобы понять, что на самом деле изображает значок. Передайте это как можно короче.
Рассмотрим два примера значка лампочки. Тот, что слева, довольно прост, а тот, что справа, содержит больше деталей. Оба передают одно и то же, но более простая версия, возможно, намного легче понять.
4. Знакомство Наш четвертый принцип дизайна иконок — знакомство .
Вам не нужно изобретать велосипед; вместо этого придерживайтесь того, что знают ваши пользователи.
Ранее в этом посте мы говорили о различных типах иконок: универсальных, конфликтующих и уникальных. По возможности создавайте универсальные иконки. Классическими примерами являются увеличительное стекло, используемое для представления функции «поиск», значок конверта, используемый для представления входящих сообщений пользователя, значок дома для представления домашнего экрана и значок принтера для обозначения функции печати.
При разработке таких иконок не нужно придумывать что-то новое. Пользователи уже понимают, что означают эти значки, почти как вторую натуру — и это тот вид интуитивного удобства использования, который вы хотите создать.
5. Выравнивание и балансировка Теперь мы переходим непосредственно к деталям. Дизайн иконок должен быть точным и дотошным искусством, поэтому убедитесь, что вы стремитесь к выравниванию и балансу .
По сути, это означает позиционирование каждого элемента значка таким образом, чтобы он «выглядел правильно» для невооруженного глаза. Иногда для этого требуется выравнивание по центру и равномерный интервал, но часто для достижения правильного баланса нужно использовать собственное суждение.
Рассмотрим эти две иконки, взятые из библиотеки иконок Google. Первый, круглый значок, имеет линию и стрелку, выровненные точно по центру. Представьте, как было бы утомительно, если бы стрелка находилась не совсем посередине линии, на которую она указывает!
Второй значок, однако, имеет символ плюса, выровненный по правому краю, что намного лучше работает с формой, в которую он заключен (не совсем прямоугольник). При разработке собственных значков используйте взгляд дизайнера, чтобы обеспечить правильное выравнивание и баланс для каждого отдельного значка.
6. Единообразие во всем Наш шестой принцип дизайна значков, единообразие во всем , относится к дизайну целых семейств значков.
Хотя каждый отдельный значок передает свое собственное сообщение, все значки, используемые в продукте, должны гармонично сочетаться друг с другом. Это означает, что все они должны придерживаться одного и того же набора правил.
Для обеспечения единообразия убедитесь, что все значки имеют одинаковый визуальный вес (т. е. имеют одинаковую высоту и ширину). И, если вы используете цвет, используйте согласованную цветовую схему, которая соответствует общему визуальному бренду.
Давайте еще раз вернемся к нашему примеру с ИКЕА. Каждый из показанных значков имеет разную форму, но вы можете видеть, что они принадлежат к одному и тому же семейству значков. Это происходит благодаря принципу согласованности.
7. Индивидуальность и брендинг И последнее, но не менее важное: создавайте свои значки с учетом индивидуальности и брендинга . Как неотъемлемая часть пользовательского интерфейса продукта, значки играют важную роль в захвате и согласовании с более широким визуальным брендом.
Это ваш шанс проявить творческий подход. Вы можете использовать цвет и стиль для создания визуально уникальных значков (без ущерба для таких важнейших качеств, как простота, ясность и узнаваемость).
Здесь вы можете увидеть некоторые иконки из семейства иконок Holland & Barrett. Если вы знакомы с Holland & Barrett (если нет, зайдите на их веб-сайт), вы можете увидеть, как эти значки были разработаны в соответствии с общим брендом.
Теперь вы знаете золотые правила создания иконок. Так, что дальше?
Если вы готовы создавать свои собственные значки, вам сначала понадобятся соответствующие инструменты. Мы рекомендуем начать с Figma, Adobe XD или Sketch, так как это одни из самых популярных отраслевых платформ, но здесь вы найдете полный список лучших инструментов для дизайна пользовательского интерфейса.
После того, как вы настроите выбранный инструмент, вы сможете поэкспериментировать с созданием собственных значков или следовать пошаговым инструкциям из руководства.