Дизайн иконки: Суперполезный гайд по созданию иконок для интерфейсов — Дизайн на vc.ru

Суперполезный гайд по созданию иконок для интерфейсов — Дизайн на vc.ru

Иконка, значок, символ, образ — каких только названий нет у этих атрибутов. Зачем они нужны, как их правильно использовать и что нужно знать, чтобы не запутать пользователя – всё это расскажем ниже.

{«id»:50515,»url»:»https:\/\/vc.ru\/design\/50515-superpoleznyy-gayd-po-sozdaniyu-ikonok-dlya-interfeysov»,»title»:»\u0421\u0443\u043f\u0435\u0440\u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0439 \u0433\u0430\u0439\u0434 \u043f\u043e \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044e \u0438\u043a\u043e\u043d\u043e\u043a \u0434\u043b\u044f \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u0432″,»services»:{«facebook»:{«url»:»https:\/\/www.facebook.com\/sharer\/sharer.php?u=https:\/\/vc.ru\/design\/50515-superpoleznyy-gayd-po-sozdaniyu-ikonok-dlya-interfeysov»,»short_name»:»FB»,»title»:»Facebook»,»width»:600,»height»:450},»vkontakte»:{«url»:»https:\/\/vk.com\/share.php?url=https:\/\/vc.ru\/design\/50515-superpoleznyy-gayd-po-sozdaniyu-ikonok-dlya-interfeysov&title=\u0421\u0443\u043f\u0435\u0440\u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0439 \u0433\u0430\u0439\u0434 \u043f\u043e \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044e \u0438\u043a\u043e\u043d\u043e\u043a \u0434\u043b\u044f \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u0432″,»short_name»:»VK»,»title»:»\u0412\u041a\u043e\u043d\u0442\u0430\u043a\u0442\u0435″,»width»:600,»height»:450},»twitter»:{«url»:»https:\/\/twitter.com\/intent\/tweet?url=https:\/\/vc.ru\/design\/50515-superpoleznyy-gayd-po-sozdaniyu-ikonok-dlya-interfeysov&text=\u0421\u0443\u043f\u0435\u0440\u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0439 \u0433\u0430\u0439\u0434 \u043f\u043e \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044e \u0438\u043a\u043e\u043d\u043e\u043a \u0434\u043b\u044f \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u0432″,»short_name»:»TW»,»title»:»Twitter»,»width»:600,»height»:450},»telegram»:{«url»:»tg:\/\/msg_url?url=https:\/\/vc.ru\/design\/50515-superpoleznyy-gayd-po-sozdaniyu-ikonok-dlya-interfeysov&text=\u0421\u0443\u043f\u0435\u0440\u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0439 \u0433\u0430\u0439\u0434 \u043f\u043e \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044e \u0438\u043a\u043e\u043d\u043e\u043a \u0434\u043b\u044f \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u0432″,»short_name»:»TG»,»title»:»Telegram»,»width»:600,»height»:450},»odnoklassniki»:{«url»:»http:\/\/connect.ok.ru\/dk?st.cmd=WidgetSharePreview&service=odnoklassniki&st.shareUrl=https:\/\/vc.ru\/design\/50515-superpoleznyy-gayd-po-sozdaniyu-ikonok-dlya-interfeysov»,»short_name»:»OK»,»title»:»\u041e\u0434\u043d\u043e\u043a\u043b\u0430\u0441\u0441\u043d\u0438\u043a\u0438″,»width»:600,»height»:450},»email»:{«url»:»mailto:?subject=\u0421\u0443\u043f\u0435\u0440\u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0439 \u0433\u0430\u0439\u0434 \u043f\u043e \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044e \u0438\u043a\u043e\u043d\u043e\u043a \u0434\u043b\u044f \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u0432&body=https:\/\/vc.ru\/design\/50515-superpoleznyy-gayd-po-sozdaniyu-ikonok-dlya-interfeysov»,»short_name»:»Email»,»title»:»\u041e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u043d\u0430 \u043f\u043e\u0447\u0442\u0443″,»width»:600,»height»:450}},»isFavorited»:false}

20 379 просмотров

1. Используйте оптическую сетку

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

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

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

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

2. Учтите пиксельную сетку

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

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

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

Задайте начальную и конечную точки диагоналей в соответствии с сеткой пикселей. Диагонали с углами 45 °, 30 ° и 60 ° выглядят более острыми, чем диагонали с неравномерными углами, такими как 13,7 ° или 81 °.

3. Сохраняйте определённый уровень детализации

Лучше начать набор значков с самого сложного значка. Он определит уровень детализации и поможет сделать иконки того же визуального веса.

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

4. Контролируйте минимальный размер зазора

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

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

5. Удалите повторяющиеся части

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

Если целевой пользователь уже понимает, с чем он или она работает, нет необходимости повторять это снова и снова. Например, без иконок «@» на конвертах люди всё равно знают, что речь идёт об электронной почте.

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

6. Выберите определённый стиль и следуйте ему

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

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

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

7. Используйте двухмерную систему калибровки

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

8. Следите, чтобы силуэты были чистыми и точными

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

Та же история с раздражающими размерами «8.999 px» или «100.001 px». Если фиксирующие фигуры расположены точно, края иконок выглядят острыми. И вы не рискуете получить чрезмерные якоря и промежутки при объединении фигур.

9. Очистка SVG от мусора

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

Смотрите, в Sketch всё выглядит хорошо.

Откройте этот SVG в другом редакторе (например, Adobe Illustrator). Вы заметите пустые слои, ненужные группы и иногда обрезающие маски. Всё это может вызвать проблемы, когда фронтенд-разработчики конвертируют значки в иконку или используют SVG на веб-странице.

Вы можете удалить этот мусор и пересохранить иконку.

Как видите, Sketch SVG (picture.svg) и отредактированный Illustrator SVG (picture_new.svg) имеют разные предварительные просмотры в вашем средстве просмотра файлов. Кстати, можно избавиться от мусора в значке в редакторе кода. Если вы знаете, как выглядит SVG-код, попробуйте удалить ненужные строки данных напрямую.

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

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

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

Статья переведена и адаптирована на русский язык студией Netlab. Оригинал тут.

7 принципов дизайна иконок. На что нужно обращать внимание при создании иконок

Понятность, удобочитаемость, выравнивание, краткость, последовательность, индивидуальность, простота использования

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

Понятность

Основная цель иконки – быстро донести до пользователя идею.

Иконки на приборной панели Toyota Prius Prime (Источник: 2020 Manual)

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

Примерно так они выстраиваются для меня по уровню понятности:

Когда иконка использует незнакомую метафору, ее трудно понять. «Сигнал напоминания о ремне безопасности» (3-й слева) довольно буквальный, и мы можем его быстро понять. «Сигнал электроусилителя рулевого управления» (крайняя справа) намного сложнее.

Предстоящие воркшопы

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

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

Знакомые метафоры из семейства иконок Phosphor Carbon

Стрелка является мощным символом, используемым для навигации:

Знаки Нью-Йоркского метрополитена (Источник: Capture of an original copy of NYC Transit Authority Graphic Standards Manual)

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

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

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

Если у вас есть понятный символ, убедитесь, что он читабелен.

Иконки в мобильном приложении Amtrak

Сложно разглядеть иконку Station в приложении Amtrak (первая строка), потому что ее детали слишком мелкие.

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

Иконки в мобильном приложении Transit

Небольшая корректировка значительно улучшит иконки:

Улучшенная иконка

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

Google Maps отлично справился с задачей – иконки удобочитаемы при очень маленьком размере:

Иконки Google Map

Выравнивание

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

Хотя в этой иконке “Play”, треугольник расположен в центре круга, нашим глазам он кажется смещенным. Широкая часть треугольника кажется «тяжелее», чем точка, и смещенной влево.

Точно так же, как художники-шрифтовики точно настраивают шрифты для создания оптической иллюзии баланса (обратите внимание на смещенные точки на «i» и «j» и на выступ буквы «O»)

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

Так лучше.

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

Краткость

Идея, выраженная в нескольких словах, кажется эффективной и элегантной.

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

Как сказал Роберт Хайнлайн:

Когда один преподаёт, двое учатся.

Прекрасно.

Material Design довольно хорошо иллюстрирует краткость в своем системном руководстве по иконкам. Вместо того чтобы говорить:

Чрезмерно сложная иконка корабля (Источник: Material)

Скажите проще:

Лаконичная иконка корабля (Источник: Material)

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

Стремление к уменьшению и упрощению в интерфейсах подчеркивает смысл и освобождает место для контента. Иконки Telegram лаконичные и приятные:

Иконки Telegram

Иногда иконки интерфейса приобретают более иллюстративный стиль. Иконки Yelp – это восхитительные изображения популярных продуктов питания. Креветка в иконке тайской кухни изысканна:

Иконки Yelp от Scott Tusk

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

Иконки приложений Apple

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

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

До iOS 13 иконки Apple имели всевозможные штрихи, заливки и размеры:

Иконки Apple в меню быстрых действий до iOS 13

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

Apple недавно выпустила  введение в SF Symbols, впечатляющее дополнение к шрифту San Francisco. SF Symbols охватывает графический стиль иконок в 9 весах и 3 масштабах (возможно, немного сложное, но дотошное руководство). Из-за этого иконки кажутся более гармоничными.

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

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

Подмножество семейства иконок Phosphor Carbon

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

Каждый набор иконок имеет вкус. Что делает его уникальным? Что он говорит о бренде? Какое настроение он создает?

Иконки Waze

Интерфейс Waze во многом зависит от иконок. Эти красочные, лаконичные иконки говорят: «Мы причудливы!»

Иконки Twitter легкие и четкие:

Иконки Twitter

Иконки Sketch утонченные и воздушные:

Иконки Sketch от Janik Baumgartner

Freemojis очень милые:

Freemojis от Streamline

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

Сверху вниз, слева направо: iJUK, PixBit, Crayon, Linebit

Простота использования

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

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

Организованный

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

Sketch-файл Nucleo, упорядоченный по типу

Хорошо задокументированный

Сформулируйте основные принципы семейства иконок:

Примеры принципов семейства иконок Phosphor:

• Понятность. В первую очередь ясно выражайте идеи. Сделайте иконку узнаваемой и читабельной. Никогда не жертвуйте ясностью значения иконки.
• Краткость. Используйте как можно меньше деталей. Стиль Phosphor направлен на упрощение. Будьте краткими и учитывайте каждый штрих, чтобы передать суть того, что представлено.
• Характер. Будьте причудливым. Экономно добавляйте уникальные детали, чтобы оживить иконки и не быть слишком строгим.

Перечислите технические правила:

Примеры технических правил семейства иконок Phosphor:

• Используйте холст 48x48px
• Используйте centered stroke 1.5px
• Используйте закругленные концы
• Используйте сплошные линии, за исключением случаев, когда ломаные сегменты полезны для понимания
• Используйте прямые сегменты, идеальные изгибы и приращение угла 15° там, где это возможно
• При необходимости отрегулируйте кривые, чтобы следовать принципам дизайна
• Используйте, по возможности, приращения целых, четных чисел; уменьшите до 1px и 0.5px при необходимости
• Используйте следующие контуры фигур: 28x28px круг, 25x25px квадрат, 28x22px ландшафтная ориентация, 22x28px портретная ориентация
• Keep a 6px thick trim area

Проведите их итерацию и сделайте документацию общедоступной, если хотите:

Проверенный

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

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

Тестовые листы, используемые в Phosphor

Специальные инструменты

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

Material делает иконки легко доступными с помощью собственной библиотеки иконок. Найдите нужную иконку и загрузите разные стили («темы»), цвета и размеры в выбранном вами формате файла:

Простая в использовании библиотека иконок Material

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

Ресурсы

Библиотеки иконок

• Feather – великолепный набор из более 200 контурных иконок, которые хорошо масштабируются
• Material system icons – свыше тысячи утилитарных иконок для интерфейса в 5 стилях
• Nucleo – набор из примерно 30 тысяч иконок в 3 стилях: контурный, плоский / цветной и глиф
• Streamline – набор более 30 тысяч красиво нарисованных иконок в 3 весах

Агрегаторы иконок

• Noun Project – отличный способ поиска вдохновения в стилях и метафорах

Менеджеры иконок

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

Иконки «Дизайн» — скачай бесплатно PNG и вектор

Веб-дизайн

+ В коллекцию

Веб-дизайн

+ В коллекцию

Веб-дизайн

+ В коллекцию

Веб-дизайн

+ В коллекцию

Веб-дизайн

+ В коллекцию

Веб-дизайн

+ В коллекцию

Веб-дизайн

+ В коллекцию

Веб-дизайн

+ В коллекцию

Веб-дизайн

+ В коллекцию

Веб-дизайн

+ В коллекцию

Веб-дизайн

+ В коллекцию

Веб-дизайн

+ В коллекцию

Веб-дизайн

+ В коллекцию

Веб-дизайн

+ В коллекцию

Веб-дизайн

+ В коллекцию

Веб-дизайн

+ В коллекцию

Веб-дизайн

+ В коллекцию

Веб-дизайн

+ В коллекцию

Веб-дизайн

+ В коллекцию

Веб-дизайн

+ В коллекцию

Веб-дизайн

+ В коллекцию

Веб-дизайн

+ В коллекцию

Веб-дизайн

+ В коллекцию

Веб-дизайн

+ В коллекцию

Веб-дизайн

+ В коллекцию

Веб-дизайн

+ В коллекцию

Веб-дизайн

+ В коллекцию

Веб-дизайн

+ В коллекцию

Дизайн

+ В коллекцию

Дизайн

+ В коллекцию

Дизайн

+ В коллекцию

Дизайн

+ В коллекцию

Дизайн

+ В коллекцию

Дизайн

+ В коллекцию

Дизайн

+ В коллекцию

Дизайн

+ В коллекцию

Дизайн

+ В коллекцию

Анимированные

Дизайн

+ В коллекцию

Дизайн

+ В коллекцию

Дизайн

+ В коллекцию

Дизайн

+ В коллекцию

Дизайн

+ В коллекцию

Дизайн

+ В коллекцию

Дизайн

+ В коллекцию

Дизайн

+ В коллекцию

Дизайн

+ В коллекцию

Дизайн

+ В коллекцию

Дизайн

+ В коллекцию

Дизайн

+ В коллекцию

Анимированные

Дизайн

+ В коллекцию

Дизайн

+ В коллекцию

Дизайн

+ В коллекцию

Дизайн

+ В коллекцию

Дизайн

+ В коллекцию

Дизайн

+ В коллекцию

Анимированные

Дизайн

+ В коллекцию

Дизайн

+ В коллекцию

Дизайн

+ В коллекцию

Дизайн

+ В коллекцию

Дизайн

+ В коллекцию

Иконки «Веб дизайн» — скачай бесплатно PNG и вектор

Веб-дизайн

+ В коллекцию

Веб-дизайн

+ В коллекцию

Веб-дизайн

+ В коллекцию

Веб-дизайн

+ В коллекцию

Веб-дизайн

+ В коллекцию

Веб-дизайн

+ В коллекцию

Веб-дизайн

+ В коллекцию

Веб-дизайн

+ В коллекцию

Веб-дизайн

+ В коллекцию

Веб-дизайн

+ В коллекцию

Веб-дизайн

+ В коллекцию

Веб-дизайн

+ В коллекцию

Веб-дизайн

+ В коллекцию

Веб-дизайн

+ В коллекцию

Веб-дизайн

+ В коллекцию

Веб-дизайн

+ В коллекцию

Веб-дизайн

+ В коллекцию

Веб-дизайн

+ В коллекцию

Веб-дизайн

+ В коллекцию

Веб-дизайн

+ В коллекцию

Веб-дизайн

+ В коллекцию

Веб-дизайн

+ В коллекцию

Веб-дизайн

+ В коллекцию

Веб-дизайн

+ В коллекцию

Веб-дизайн

+ В коллекцию

Веб-дизайн

+ В коллекцию

Веб-дизайн

+ В коллекцию

Веб-дизайн

+ В коллекцию

Веб-эквалайзер

+ В коллекцию

Shift Down

+ В коллекцию

Shift Down

+ В коллекцию

Shift Down

+ В коллекцию

Волнистая линия

+ В коллекцию

Волнистая линия

+ В коллекцию

Волнистая линия

+ В коллекцию

Волнистая линия

+ В коллекцию

Волнистая линия

+ В коллекцию

Волнистая линия

+ В коллекцию

Волнистая линия

+ В коллекцию

Волнистая линия

+ В коллекцию

Волнистая линия

+ В коллекцию

Волнистая линия

+ В коллекцию

Волнистая линия

+ В коллекцию

Волнистая линия

+ В коллекцию

Волнистая линия

+ В коллекцию

Волнистая линия

+ В коллекцию

Волнистая линия

+ В коллекцию

Волнистая линия

+ В коллекцию

Волнистая линия

+ В коллекцию

Волнистая линия

+ В коллекцию

Волнистая линия

+ В коллекцию

Волнистая линия

+ В коллекцию

Волнистая линия

+ В коллекцию

Волнистая линия

+ В коллекцию

Волнистая линия

+ В коллекцию

Волнистая линия

+ В коллекцию

Связь между ноутбуками

+ В коллекцию

Связь между ноутбуками

+ В коллекцию

Связь между ноутбуками

+ В коллекцию

Связь между ноутбуками

+ В коллекцию

Дизайн в эпоху иконок приложений

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

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

Такое поведение пользователя и является целью. Команда дизайнеров «Instagram» подтверждает: что-то такое простое, как значок, может влиять на реакцию и активность пользователей. Это один из последних и наиболее ярких примеров значительных изменений в мобильном дизайне. Для такого крошечного, казалось бы, несущественного и в значительной степени поверхностного дизайна ставки на удивление высоки: чем дольше происходит распознавание значка — какой бы маленькой ни была заминка — тем меньше его побудительная сила для пользователя.

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

Эпоха иконок

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

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

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

Миллер изложил некоторые базовые аспекты времени отклика, которые до сих пор все еще используются. Например, пользователи могут удерживать ход мысли, если время ответа меньше одной секунды. Якоб Нильсен также писал, что они воспримут это как нечто спонтанное. Когда дело доходит до вашего телефона, время отклика — это взаимосвязь между вашими намерениями — запостить что-нибудь в «Instagram» — и разблокировкой телефона, пролистыванием десятка значков, чтобы найти правильный и ожиданием загрузки. Уменьшение количества времени, которое необходимо вам для распознавания логотипа — это только малая часть того, на что могут повлиять дизайнеры.

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

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

Они поймали блестящую идею: вместо того, чтобы использовать для общения текст, почему бы не показывать пользователям ненастоящий, метафорический «рабочий стол», где приложения и действия были бы представлены иконками вместо слов? Таким образом любой, кто видел рабочий стол в реальной жизни, мог сразу же понять, как пользоваться цифровой версией. В 1973 году у «Xerox Alto» появился первый графический пользовательский интерфейс с файловыми папками, корзиной для мусора, дисками и другими пиктограммами.

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

МРТ, отслеживание взгляда и даже больше

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

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

Больше, чем когда-либо, интерактивный дизайн — это наука об интервалах, миллисекундных беглых взглядах и балансе когнитивной нагрузки. И неудивительно, что исследователи чаще всего изучают, как мы используем свои экраны, в рамках науки о мозге. Возьмем новые логотип и иконку «Instagram», разработать которые компания поручила Йену Спелтеру. Дизайн был сформирован с помощью сотрудников компании, которых попросили нарисовать значок по памяти. «Это дало нам представление о том, от чего следует избавиться», — сказал Спелтер Клиффу Гуангу. Кроме того, команда провела обширное качественное тестирование, сосредоточившись на том, насколько хорошо пользователи могут распознать новый дизайн.

Есть некоторые научные данные в поддержку такого подхода. В своей статье «Графика и семантика: взаимосвязь того, что увидят, и дизайна иконок» Сара Ишервуд опровергает идею, что иконку или логотип легче распознать, если в них есть конкретная визуальная отсылка к их функции. После того, как люди привыкают к абстрактным значкам, они начинают понимать их так же хорошо. Что более важно? Наше узнавание.

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

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

То же самое может быть верно и для новой иконки «Instagram». «Как видно по возмущению, которое поднялось после смены значка „Instagram“, у людей глубокая личная связь со светящимся квадратикам в их телефонах», — говорит датский дизайнер Майкл Фларап, который руководит сайтом по дизайну иконок.

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

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

Вы можете найти динамические элементы по всему рабочему столу; хороший пример — iOS-приложения с погодой, так как они все вынуждены конкурировать за внимание со стороны Apple. Чтобы найти динамическую иконографию, можно не смотреть дальше «DarkSky», одного из самых популярных приложений с погодой в «AppStore». Локализованное приложение с погодой использует молнию, раскалывающую пополам небо, что на самом деле похоже на движение. (Создатели «DarkSky», в свою очередь, говорят, что этот эффект стал результатом «осуществления миллиона улучшений, пока все не стало простым и не уродливым»). По сравнению со статичным облаком и солнцем приложения с погодой в iOS, это выглядит свежо и актуально — почти угрожающе.

Начало науки о дизайне

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

В 2014 году Ассоциация информатики и технологий опубликовала статью «Как мозг обрабатывает иконки? Нейровизуальные показатели четырех типов визуальных стимулов, используемых в информационных системах». В ней трое исследователей из Техасского университета описывают, как они планировали сделать открытие в чем-то с виду очень простом: что легче анализировать человеческому мозгу — образы или слова?

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

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

8 простых шагов по улучшению дизайна иконок

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

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

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

Три атрибута дизайна иконок

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

1. Структура — структура является формой, лежащей в основе изображения. Если проигнорировать детали иконки и нарисовать линию вокруг основных фигур, образует ли они квадрат, круг, горизонтальный или вертикальный прямоугольник, треугольник или более органичную форму? Самые успешные иконки следуют простым, узнаваемым рисункам или формам. Основные геометрические фигуры — круг, квадрат и треугольник — создают визуально устойчивую основу для дизайна.
2. Характер — символ значка состоит из элементов, которые используются в одной иконке или в сете. К этим элементам относятся такие вещи, как закругленные или квадратные углы, вес линий, стиль (плоский, линия, заполненная линия или глиф), цветовая палитра и многое другое.
3. Идентичность. «Идентичность» иконки — это ее сущность или то, что делает иконку уникальной. Идентичность определяет, работает ли она или нет. Краеугольным камнем того, насколько хорошо работает иконка, является распознавание или ясность: насколько легко зритель распознает объект, идею или действие, которое он изображает.Характер и идентичность часто пересекаются. Элементы идентичности, используемые несколькими иконками, становятся частью характерного сета.

Восемь шагов

Шаг 1. Всегда начинайте с сетки

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

Внешние 2 пикселя моей сетки — это то, что я называю «запретной зоной». Я избегаю попадания какой-либо части иконки в это пространство, если это не является абсолютно необходимым.

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

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

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

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

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

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

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

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

Шаг 3. Углы, изгибы и края

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

Углы

В большинстве случаев я придерживаюсь углов 45 градусов или кратных. Сглаживание под углом 45 градусов происходит равномерно (активные пиксели выровнены вплотную), поэтому результаты получаются четкими, а идеально диагональная природа этого угла представляет собой легко распознаваемый рисунок, который очень нравится человеческому глазу. Этот узнаваемый шаблон обеспечивает согласованность набора иконок и единство стиля. Если я должен нарушить это правило, я пытаюсь делить пополам (22,5, 11,25 и т.д.) или кратно 15 градусам. Каждый случай индивидуален, поэтому я принимаю решение, которое следует использовать в каждом конкретном случае. Преимущество использования углов в 45 градусов состоит в том, что шаг в сглаживании все еще довольно равномерный.

Изгибы

Одна из наиболее заметных областей, которая может ухудшить качество иконки и создать разницу между Premium / professional и любительским внешним видом — это изгибы (кривые). В то время как человеческий глаз может обнаружить очень незначительные отклонения в точности, рисованием от руки не всегда может достичь высокого уровня точности. Я полагаюсь на геометрические формы и цифры как можно чаще, чтобы создавать кривые, а не пытаюсь рисовать их вручную. Когда мне нужно создать изгибы вручную, я использую клавишу Shift  или, что еще лучше,  плагины VectorScribe и InkScribe от Astute Graphics для еще более точного управления моими кривыми Безье.

Края

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

Шаг 4. Pixel-perfection

Pixel-perfect в наши дни является популярным модным словом в дизайне иконок и пользовательских интерфейсов, но это важно, особенно при проектировании для экранов небольшого размера. Сглаживание по краям иконки при небольших размерах может сделать рисунок нечетким. Пространство между линиями, которое не выравнивается по пиксельной сетке, будет сглаженным и станет размытым. Выравнивание иконки по пиксельной сетке делает края идеально четкими на прямых линиях и более четкими на точных углах и кривых. Как я упоминал выше, углы в 45 градусов являются вторыми лучшими по сравнению с прямыми линиями, поскольку пиксели, используемые для определения угла, располагаются друг над другом идеально по диагонали. То же самое верно для краев и изгибов: чем математически точнее, тем четче будет сглаживание. Однако следует отметить, что «пиксельное совершенство» является менее важной проблемой, по крайней мере для сглаживания, для больших размеров и для дисплеев с более высоким разрешением, таких как ретина.

Шаг 5. Толщина линий

Когда дело доходит до толщины линий, я считаю, что толщина в 2 пикселя идеальна, но 3 тоже может иногда быть необходимо. Более 3 пикселей и сет может потерять свою сплоченность. Я предпочитаю 2 пикселя и 4 пикселя толщину линий. В идеале я стараюсь, чтобы размеры были кратны 2 пикселям. Иногда отдельная деталь значка может потребовать нарушения этого правила, но я стараюсь придерживаться его как можно больше. В большинстве случаев следует избегать очень тонких линий, особенно в стилях glyph и flat. Если вы намеренно не создаете иконки в линейном стиле, вам не следует полагаться на тонкие линии для создания форм. Вы должны полагаться на свет и тень, чтобы определить формы.

Шаг 6. Используйте согласованные элементы дизайна и отличительные признаки на иконках

Хеммо де Йонге из Dutch Icon выступил с блестящей речью на Icon Salon 2015, в которой подробно рассказал об этом элементе дизайна иконок. В своем двух-летнем проекте по созданию иконок для правительства Нидерландов, Хеммо и его партнер по дизайну включили в каждую иконку «засечку». Не у каждой иконки есть засечка, но у большинства есть. Этот отличительный признак, используемый консервативно, но последовательно в наборе иконок, действительно может помочь связать сет.

Шаг 7. Не перегружайте иконки деталями и декором

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

Шаг 8. Добавьте уникальность

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

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

[ratings]

 

Последнее изменение: 5 февраля 2020 в 19:03.

9 сайтов, о которых вы должны знать

Когда заказчик приходит к дизайнеру с заданием нарисовать иконку, его волнует два вопроса: стоимость работы и сроки исполнения. Дизайнеру же для ответа нужно четко понимать, что конкретно хочет заказчик. Хорошо, если знаешь, как выглядит иконка-мечта. Но что делать, если не понимаешь, чего хочешь? Ответ прост — смотрите на работы других и прислушивайтесь к себе. Мы собрали девять сайтов, которые помогут вам в этом.

Прежде чем писать дизайнеру иконок

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

• Шаг #1: Потратьте время на изучение уже существующих коллекций иконок. Ваша задача смотреть, смотреть и еще раз смотреть.
• Шаг #2: Отберите те, которые вам понравились. Скопируйте картинку в Word и опишите что именно понравилось (форма, цветовое решение, идея, стиль), почему иконка пришлась по душе.
• Шаг #3: Отберите иконки, которые современны, но не понравились. Также сохраните иконку и опишите, что в иконке не то.
• Шаг #4: Опишите что делает ваша программа и сформулируйте требования уже к вашей собственной иконке. Если есть какие конкретные пожелания к метафоре — их тоже запишите.
• Шаг #5: С получившимся документом идем к дизайнеру. Теперь получить оценку будет легко и просто.

Где найти примеры современных качественных иконок

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

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

На этом сайте можно посмотреть на варианты иконок отдельно для MAC, а отдельно для iOS. Суммарно более 200 вариантов иконок всех стилей и тематик. Сайт постоянно обновляется и пополняется новыми образцами.

На девяти страницах собрано более 100 иконок для iOS. Недостаток ресурса – нет рубрикатора, так что вам придется пролистать все 9 страниц. Плюс ресурса есть как известные иконки, так и менее популярные образцы.

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

Нестандартный подход – использовать pinterest для поиска иконок. Но, если вы зададите в графе поиск «IOS» и «Icon» результат вас удивит. Аналогично работает для Android Icon. А вот с Windows Icon не получится :(. Но в нашем портфолио уже сотни примеров, будет из чего выбрать.

Все, что было сказано строкой выше о pinterest можно смело применить к flickr. Ключ к успеху поисковый запрос «iOS App Icons».

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

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

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

Источник: icondesignlab

6 простых шагов к лучшему дизайну иконок — Smashing Magazine

Об авторе

Скотт Льюис — руководитель отдела контента Iconfinder.com, а также профессиональный дизайнер иконок. Скотт получил степень в области графического дизайна в Восточной Каролине. Больше о Скотт ↬

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

В этой статье рассматривается набор рекомендаций по проектированию в шесть этапов. Шаги соответствуют основам дизайна звуковых иконок, включая последовательность, разборчивость и ясность.Принципы эффективного дизайна значков подробно обсуждались дизайнером иконок Джоном Хиксом из Hicks Design в его книге «Справочник по значкам», а также компанией Google в его рекомендациях по материальному дизайну для системных значков. Шесть шагов, описанных в этой статье , следует рассматривать как руководство, а не как догматический список правил . Чтобы стать великим дизайнером, нужно научиться, когда нарушать правила, а когда им следовать, как мы продемонстрируем здесь.

Иконки и векторные торговые площадки, такие как Iconfinder (где я работаю), делают хорошо разработанные векторные иконки недорогим и легкодоступным ресурсом для веб-дизайнеров и дизайнеров полиграфии.Доступны тысячи высококачественных наборов значков премиум-класса и сотни отличных бесплатных наборов.

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

Дополнительная информация о SmashingMag:

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

Переделка значка

В примерах изображений, которые следуют в этой статье, шесть обсуждаемых шагов будут применены к переработке значка собаки (точнее, корги), который был недавно отправлен Iconfinder пользователь по имени Кем Бардли.У иконы был потенциал, но она была недостаточно отполирована, чтобы считаться «премиальным качеством». Мы предоставили Кему несколько простых советов, которым нужно следовать, и после небольшой доработки его значки были готовы к утверждению в качестве премиального набора значков. На изображении ниже показаны версии значка Кеми до и после. В следующих разделах мы объясним, как методично переходить от «до» к «после».

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

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

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

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

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

Форма

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

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

Aesthetic Unity

Элементы, общие для одного значка и для набора значков, представляют собой то, что мы называем эстетическим единством. Это такие элементы, как закругленные или квадратные углы, определенный размер углов (2 пикселя, 4 пикселя и т. Д.), Ограниченная и согласованная толщина линий (2 пикселя, 4 пикселя и т. Д.), Стиль (плоский, линейный, с заливкой). линия или глиф), цветовую палитру и многое другое.Эстетическое единство набора — это набор элементов дизайна и / или вариантов, которые вы повторяете на протяжении всего набора, чтобы визуально связать его в единое целое. Обратите внимание, что в приведенных ниже примерах каждая из трех собак из набора Кем имеет общие элементы, такие как закругленные углы на 2 пикселя, обводка толщиной 2 пикселя вокруг морд собак и носы в форме сердечек.

Эти три иконки с собаками имеют общие элементы дизайна и стиля, создавая эстетическое единство. (Изображение: Кем Бардли)

Узнаваемость

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

Уникальные качества каждой собаки делают ее индивидуально узнаваемой, а общий дизайн и элементы стиля делают ее узнаваемой как единое целое. (Изображение: Кем Бардли)

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

Шесть шагов

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

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

Здесь мы видим сетку размером 32 × 32 пикселя с 2-пиксельной границей (или «запретной зоной») для передышки.

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

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

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

Выравнивание круглых значков с сеткой и ключевыми линиями (Изображение: Скотт Льюис)

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

Выравнивание и размер круглых и квадратных значков относительно сетки (Изображение: Скотт Льюис)

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

Выравнивание и размер вертикально и горизонтально ориентированных значков относительно сетки (Изображение: Скотт Льюис)

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

Выравнивание и размер диагонально ориентированного значка относительно сетки (Изображение: Скотт Льюис)

Помните, что вам не нужно каждый раз точно следовать сетке и направляющим. Сетка предназначена для того, чтобы помочь вам сделать значки согласованными, но если вам нужно выбирать между улучшением значка и соблюдением правил, нарушайте правила — просто делайте это экономно. Как сказал Хеммо де Йонге, более известный под псевдонимом Dutch Icon:

Сущность отдельной иконы перевешивает важность сплоченности.

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

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

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

В цифрах: кромки, линии, углы, кривые и углы

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

Углы

В большинстве случаев придерживайтесь углов в 45 градусов или кратных им. Сглаживание под углом 45 градусов равномерно ступенчатое (активные пиксели выровнены встык), поэтому результат получается четким, а идеальная диагональ этого угла представляет собой легко узнаваемый узор, который очень нравится человеческому глазу. Этот узнаваемый шаблон обеспечивает согласованность набора значков и единство в рамках одного значка. Если ваш дизайн требует нарушить это правило, попробуйте сделать это пополам (22.5 градусов, 11,25 и т. Д.) Или кратные 15 градусам. Каждая ситуация индивидуальна, поэтому решайте ее индивидуально. Преимущество использования половин в 45 градусов заключается в том, что сглаживание по-прежнему будет довольно равномерным.

Крупный план обычного сглаживания под углом 45 градусов

Кривые

Одна из наиболее заметных областей, которые могут ухудшить качество значка, и это может означать, что разница между профессиональным и любительским видом меньше -чеме совершенные кривые.В то время как человеческий глаз может обнаруживать очень незначительные отклонения в точности, зрительно-моторная координация не всегда может обеспечить высокий уровень точности. Чтобы создавать кривые как можно больше, полагайтесь на инструменты фигур и числа, а не на рисование их вручную. Когда вам действительно нужно нарисовать кривую вручную, используйте клавишу-модификатор ограничений Adobe Illustrator (или вашего векторного программного обеспечения) (клавишу Shift) или, что еще лучше, используйте VectorScribe и InkScribe от Astute Graphics для еще более точного управления кривыми Безье.

Рисование углов вручную дает худшие результаты.(Изображение: Кем Бардли)

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

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

Углы

Обычное значение закругленного угла (или радиуса) составляет 2 пикселя. В значке размером 32 × 32 пикселя радиус в 2 пикселя достаточно велик, чтобы его можно было отчетливо увидеть как закругленный, но он не настолько смягчает углы, чтобы изменить индивидуальность дизайна (придавая ему вид «пузыря»).Значение, которое вы выберете, будет зависеть от индивидуальности, которую вы хотите придать дизайну. Использование закругленных углов — это эстетическое решение, которое необходимо принять с учетом общей эстетики набора.

Точно скругленные углы

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

Прогресс нашего переработанного значка Corgi

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

Pixel-Perfection

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

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

Весы лески

Когда дело доходит до веса лески, идеально подходят две, но иногда необходимы три. Цель состоит в том, чтобы обеспечить визуальную иерархию и разнообразие, не привнося слишком много разнообразия и, таким образом, разрушая согласованность набора.Более трех и набор может потерять связность. Преимущество 2- и 4-пиксельных весов линий заключается в том, что они кратны 2 и, следовательно, легко масштабируются вверх и вниз с равными приращениями. В большинстве случаев избегайте очень тонких линий, особенно в глифах и плоских значках. Если вы намеренно не создаете значки «стиля линии», полагайтесь на свет и тень, а не на линии, чтобы определить форму.

Этот значок iPhone демонстрирует одинаковый вес линий. (Изображение: Скотт Льюис)

Используйте согласованные элементы дизайна и акценты в иконках

Хеммо де Йонге из компании Dutch Icon выступил с блестящей речью на Icon Salon 2015, в которой подробно рассказал об этом аспекте дизайна иконок.В своем двухлетнем проекте системы иконок для правительства Нидерландов Хеммо и его партнер по дизайну сделали выемку в каждой из иконок. Не на каждой иконке есть выемка, но у большинства она есть. Этот вид акцента, используемый консервативно, но последовательно в наборе значков, действительно может связать набор воедино.

Использование общих элементов дизайна (Изображение: Dutch Icon)

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

Использование общих элементов дизайна с нашими значками собак (Изображение: Кем Бардли)

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

Использование общих элементов дизайна в наших пиктограммах с собаками, но с другим стилем (Изображение: Kem Bardly).

Используйте детали и украшения экономно.

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

Минимальная детализация сообщает, что это за объект. (Изображение: Кем Бардли)

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

Сделайте его уникальным

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

Нос в форме сердца на корги делает эту икону уникальной и индивидуальной. (Изображение: Кем Бардли)

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

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

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

Заключение

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

У вас есть собственные методы, советы или основы, которыми вы хотели бы поделиться? Оставляйте их в комментариях ниже.

Дополнительная литература

(ah, ml, al, il)

7 принципов дизайна иконок. Создание качественного семейства иконок… | by Helena Zhang

Хорошо документировано

Сформулируйте ключевые принципы семейства значков:

 Примеры принципов из семейства значков Phosphor (рифф к тому, что мы рассмотрели выше):  • Ясность.Прежде всего, будьте ясны.  Сделайте значок узнаваемым и читаемым. Никогда не жертвуйте ясностью изображения значка.  • Краткость. Используйте как можно меньше деталей.  Phosphor имеет восстановительный стиль. Будьте лаконичны и целенаправленны в каждом штрихе, чтобы передать суть того, что изображено.  • Персонаж. Будьте необычны.  С осторожностью добавляйте уникальные детали, чтобы придать немного тепла и поиграть в то, что в противном случае могло бы оказаться очень строгим. 

Перечислите технические правила:

 Примеры технических правил из семейства значков Phosphor:  •  Используйте холст  48 x 48 пикселей   •  Используйте  1.Обводка по центру 5 пикселей   •  Используйте  закругленные торцевые заглушки   •  Используйте  смежные штрихи , если сломанные сегменты не помогают понять  •  Используйте  прямые сегменты, идеальные дуги и с шагом 15 ° , где возможно  • Отрегулируйте кривые при необходимости  для соблюдения принципов проектирования  •  Используйте  целые, четные числа с приращениями  для измерений, где это возможно; при необходимости согните до 1 пикселя и 0,5 пикселя.  •  Используйте следующие ключевые линии формы  : круги 28 x 28 пикселей, квадраты 25 x 25 пикселей, прямоугольники с горизонтальной ориентацией 28 x 22 пикселей, прямоугольники с вертикальной ориентацией 22 x 28 пикселей  •  Сохраняйте обрезку толщиной  6 пикселей area  

Итерируйте по ним и, если хотите, сделайте документацию общедоступной:

Протестировано

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

Размещение значков рядом друг с другом помогает подтвердить наши принципы, изложенные выше — ясность, удобочитаемость, выравнивание, краткость, последовательность и индивидуальность:

7 Основы дизайна значков

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

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

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

Как можно взломать код для создания профессиональных наборов иконок? Вот семь основных принципов, которые вы можете реализовать прямо сейчас.

1. Постоянный визуальный вес 💁🏻‍♂️

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

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

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

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

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

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

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

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

2. Простота и минимализм ✅

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

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

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

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

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

3. Создание значков с последовательным голосом бренда 👏🏼

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

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

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

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

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

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

4. Создание значков с достаточным свободным пространством 💻

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

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

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

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

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

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

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

5.Pixel-Perfect Design 😍

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

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

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

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

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

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

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

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

6. Контрастность и цветовые палитры 🎨

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

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

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

Изображение предоставлено DesignSystems

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

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

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

7. Геометрические формы имеют большее влияние 👏🏼

Хотите, чтобы ваши значки были более влиятельными и имели больший авторитет у пользователей? Если это так, попытается свести к минимуму использование произвольной формы s, потому что они могут показаться непрофессиональными или авторитетными.

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

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

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

Изображение предоставлено The NounProject

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

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

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

The Bottom Line 👈🏽

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

---

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

Простой контрольный список для графических дизайнеров

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

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

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

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

Набор иконок Еда в стиле Хлопок

Пошаговый процесс создания иконок

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

• Поймите, какой набор значков вам нужно создать : подумайте, где он будет использоваться и что он должен представлять.Решите, какие значки требуют метафоры, а какие — просто объекты реального мира.
• Подумайте о правильных метафорах и проведите мозговой штурм по возможным символам. Запишите все ассоциации, которые у вас есть, чтобы наилучшим образом передать суть иконы. Используйте словари и наборы слов, чтобы найти ключевые слова, синонимы и определения концепции, которую необходимо представить в виде значка. Упростите идею до такой степени, что вы найдете объект, который ясно передает идею абстрактных концепций.
• Не оставайтесь один на один с задачей и проведите тщательное исследование, чтобы собрать необходимые ссылки. Наверное, кто-то уже разработал отличную версию иконок для нужной темы, и вы могли бы найти вдохновение.
• Выберите стиль значка : контурный, плоский, материал, глиф, нарисованный от руки и т. Д. Примите во внимание интерфейс, в котором будут использоваться ваши значки. Выбор зависит от обоих общих требований для этого типа интерфейса (например, iOS или Material) и стилистической концепцией конкретного макета пользовательского интерфейса.
• Набросайте свои идеи в выбранном стиле, чтобы увидеть, правильно ли они работают. Сохранять единообразие по всему набору.
• Векторизуйте лучшие наброски.
• Протестируйте значки в макете пользовательского интерфейса и наслаждайтесь. .

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

Материал, схема: значки науки и исследований

Копия: Животные

Нолан Иконки: Старение

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

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

1. Pixel-perfect. Расположите значки «в пикселях», чтобы избежать размытости.

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

3. Геометрические формы. По возможности используйте простые твердые формы, чтобы нарисовать все необходимые линии. Это делает ваш набор иконок прочным, привлекательным и убедительным.

4. Ясность и простота. Удалите все детали, которые не помогают передать концепцию значка, но вместо этого делают значки тяжелыми и шумными.

5. Достаточно места. Убедитесь, что все элементы ваших значков имеют достаточно места и воздуха.

6. Контраст. Проверьте, все ли цвета ваших значков видны на белом и черном фоне и достаточен ли контраст между элементами.

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

8. Заказ по слоям. Это просто хороший и профессиональный тон.

Мы собираемся выпустить несколько руководств по стилям значков, которые можно получить в библиотеке Icons8.Скоро будет!

Полезные ссылки

Иконки Pixel Perfect

Что такое визуальный вес

Как комбинировать значки из разных наборов в пользовательском интерфейсе

3 простых совета по улучшению дизайна значков вашего приложения

Руководство по разнообразным значкам интерфейса

Как создать качественную иконку

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

Об авторе: Анна Голде, графический дизайнер Icons8
Заглавное изображение Сары Мезе для иллюстрационного проекта Icons8

Обзор Ой, сборник бесплатных векторных иллюстраций для UX

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

Полное руководство по иконографии

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

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

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

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

Размер

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

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

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

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

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

Цвет

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

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

Сетки

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

Слева: В пикселях.Справа: вне пикселя.

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

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

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

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

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

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

Обводка и заливка

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

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

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

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

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

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

Выбор стиля

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

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

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

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

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

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

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

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

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

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

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

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

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

Углы / стыки

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

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

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

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

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

Заглушки

Заглушки могут быть скругленными или квадратными. Придерживайтесь одного варианта.

Объекты с заливкой

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

Метафора

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

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

Перспектива

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

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

Введите (избегайте!)

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

Логические операции

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

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

• Union : Union объединяет выбранные фигуры в логическую группу. Если объекты перекрываются, внешний путь новой формы состоит из композиций путей ее подслоев за вычетом любых перекрывающихся сегментов.Затем обводка будет применена к этому внешнему контуру, игнорируя любые сегменты пути, которые перекрывают друг друга.
• Вычитание : Вычитание противоположно объединению. Вычесть удаляет область фигуры или набора фигур из базовой фигуры. Только нижний слой формы сплошной, остальные вычтены из него.
• Intersect : Intersect создает логическую группу, форма которой состоит только из перекрывающихся частей ее подслоев.
• Exclude : Exclude — противоположность Intersect.Исключить показывает только те области его подслоев, которые не перекрываются.

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

Векторная сеть

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

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

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

Организация

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

Для таких значков может потребоваться несколько слов — например, поварская шляпа.

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

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

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

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

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

Слева: кофе / погладили. Справа: кофе / с начинкой

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

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

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

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

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

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

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

Другие ресурсы

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

Руководство дизайнера пользовательского интерфейса по дизайну значков приложений ( Бесплатный набор иконок)

Важность иконографии

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

Иконки — важная часть нашей повседневной жизни.Посмотрите вокруг, и вы увидите столько же инструкций, сколько и иконографию. Это настолько важная часть нашего мира, что даже в фильмах есть правдоподобные системы иконок. Посмотрите Typeset In The Future: The Alien Edition.

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

Что вы узнаете

Это руководство создано, чтобы помочь дизайнерам создать свой собственный набор значков, который поможет им реализовать свое видение.Он наполнен полезными советами, передовыми методами и руководствами по тому, как мы делаем что-то в Headway.

‍

Перед тем, как начать

Какие значки вам нужны для успеха?

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

Создаете или находите набор иконок?

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

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

здесь 🤙🏼

‍

Идеи для набросков и сборка наборов

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

Если вы ищете вдохновения, загляните в такие места, как Dribbble, Iconfinder и Noun Project, чтобы узнать, что делают другие. Эти ресурсы бесценны, поэтому используйте их. Когда дело доходит до Noun Project или Icon Finder, если у вас есть подписка, вы также можете захватывать значки и помещать их в свой набор в качестве заполнителей, пока не закончите свой набор. Подобный выбор комплектов поможет вам начать думать о своей системе в целом.

Ресурсы для вдохновения при создании значков

‍

Стили значков

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

Давайте рассмотрим три элемента дизайна, которые влияют на стиль значка.

Обводка

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

Заливка

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

Цвет

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

‍

Рекомендации по дизайну значков

Анатомия хорошей системы значков и значков

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

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

Принципы создания значков в материальном дизайне

Руководства по значкам и изображениям iOS

‍

Размер значка

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

‍

Сетка значков

Сетка значков, независимо от того, как вы ее создаете, должна быть сеткой в ​​1 пиксель. Начиная с квадрата 24×24 пикселей, вы сможете создавать иконки независимо от платформы. Большинство инструментов дизайна позволяют экспортировать ресурсы в 2 раза, чтобы вы могли легко достичь минимума 48×48 пикселей, установленного Apple. Если вам нужны значки меньшего размера на платформе, такой как Интернет, вы также можете попробовать сделать значки плотными и настроить сетку на 20×20 пикселей.

‍

Область содержимого

Сохранение периметра в 2 пикселя внутри базовой сетки не дает значкам ощущаться теснотой.Например, ваш контент на значке 24 пикселей не должен превышать 20 пикселей. Точно так же на более мелком / плотном значке они не должны превышать область содержимого 18 пикселей. Это также уменьшит размер цели, но создаст более крупный хит-бокс и поможет с некоторой базовой точностью выбора.

‍

Padding

В вашем значке этот периметр 2 пикселя действует как отступ, встроенный прямо в сам значок.

‍

Размещение и сенсорные области

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

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

‍

Лучшие практики для дизайна иконок

Вот несколько лучших практик, которые мы определили как команда в Headway.

Обводка

• Ширина обводки — Всегда сохраняйте постоянную толщину обводки, обычно мы выбираем обводку 1 или 2 пикселя.
• Размещение обводки — Сохранение обводки по центру позволит сохранить согласованность дизайна между закрытыми векторными фигурами и открытыми.
• Пиксельные направляющие — Когда у вас есть пиксельная направляющая, следите за тем, чтобы мазок оставался в центре пикселя, это поможет вам избежать размытых линий на самых маленьких размерах PNG.Поскольку он не пытается рисовать между 2 пикселями.
• Интервал — между элементами должен быть примерно одинаковой ширины. Придерживаясь промежутка в 2 пикселя, вы сохраните хороший объем негативного пространства и сохраните видимость.
• Колпачки — Большинство инструментов позволят вам выбрать, какой тип колпачков вам нужен. Вы можете скруглить концы или оставить их квадратными. В зависимости от стиля, который вы выберете, каждый из них будет работать, просто помните, что при добавлении кепки вы добавляете заливку примерно на один пиксель в конец каждого вектора.
• Углы — Каждый инструмент позволит вам изменить способ работы углов. Вы можете оставить их по умолчанию, которые будут производить жесткие углы 90 градусов, есть также закругленные и угловые.

Заливка

• Интервал — Когда дело доходит до значков с заливкой, самое важное, на что следует обращать внимание, — это использование отрицательного пространства. Сохранение зазора в 2 пикселя в большинстве пятен поможет создать красивое негативное пространство.
• Уловки со смещением — Такие уловки, как смещение линии, могут помочь сохранить негативное пространство на одной стороне, и вам не придется беспокоиться о том, чтобы израсходовать слишком много места.(прорезанный глаз)

Цвет

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

Размер и масштабирование

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

Экспорт

PNG

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

• Прозрачность — мы должны убедиться, что фоны прозрачны, чтобы мы могли легко размещать эти объекты
• Цвет — если наши значки меняют цвета для состояний, нам нужно убедиться, что мы экспортируем каждый вариант этого значка .
• Размер — при экспорте файлов PNG мобильному устройству потребуется несколько размеров.
• iOS потребует 3 общих размера.
• 24×24 @ 1x
• 48×48 @ 2x
• 72×72 @ 3x
• Android потребует всего 5 размеров.
• 48 × 48 (mdpi)
• 72 × 72 (hdpi)
• 96 × 96 (xhdpi)
• 144 × 144 (xxhdpi)
• 192 × 192 (xxxhdpi)

‍

SVG

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

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

‍

Условные обозначения для значков

Наше стандартное соглашение об именах соответствует этому базовому формату:

ico — имя глифа — модификатор @ масштабный коэффициент. Формат файла

Пример: ico-search-dark @ 2x.svg

‍

Почему мы следуем этому соглашению об именах

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

• Ico — сообщает команде, что это файл значка
• Имя символа — описательное имя значка
• Модификатор — Чем этот значок может отличаться от базовой версии
• Это очень важен для мобильных устройств, поскольку в настоящее время мы все еще используем файлы .PNG на мобильных устройствах.
• Коэффициент масштабирования — ваши инструменты должны автоматически добавлять его в конец файла, когда вы настраиваете несколько экспортов. Это позволит устройствам выбрать нужный размер значков и будет экспортировать значки с этим коэффициентом масштабирования.Например, версия @ 2x значка 24px будет экспортировать с разрешением 48×48 пикселей
• Формат файла — Ваш инструмент также добавит это к имени файла, когда вы выберете, какой тип значка вы экспортируете. Просто помните, что .PNG — это файл растрового изображения, а .SVG — векторный.

‍

Работа в Figma — создание и управление значками

Использование фреймов

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

Сетки

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

Векторная сеть

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

Сворачивание фигуры

Если вы создаете сложную форму значка и используете маски и несколько векторных фигур, вы можете свернуть свою фигуру, нажав CMD + E.

Обводка

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

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

‍

Free Icon Pack — Загрузите

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

👉 Получите бесплатный пакет значков

🤙🏼

‍

Следующие шаги — от значков до наборов пользовательского интерфейса

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

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

‍

Не зашла ли тенденция в дизайне иконок в этом году слишком далеко?

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

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

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

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

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

Некоторые пользователи отмечают преимущества минималистичного дизайна:

Матовый позволяет достичь нового уровня минимализма pic.twitter.com/raWuEwIxtKO 30 октября 2020 г.

Узнать больше

Другие жаждут возврата к реализму:

Некоторые бренды немного тоже похожи. Непонятно, правда?

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

Да, я тоже, я бы даже сказал, что они были … знаковыми. pic.twitter.com/pDcyg0LHswОктябрь 30, 2020

Подробнее

Неужели бренды борются с этой радужной волной как бунт против некоторых из более сдержанных в последнее время редизайнов квартир? Или он здесь, чтобы остаться? Мы определенно надеемся на возвращение к скевоморфизму в 2021 году (см. Остальную часть нашего списка пожеланий по UI / UX-дизайну здесь), что немного упростит ситуацию (и избавит нас от необходимости носить солнцезащитные очки каждый раз, когда мы смотрим на наши домашние экраны). .

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

Подробнее:

.