Иконки для сайта создание: Создание – Бесплатные иконки: образование

Создание библиотеки иконок. Полное руководство | Райан Смит | Plaid Design

Полное руководство

·

·

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

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

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

Отправка

Благодаря быстрому дизайну и разработке новых продуктов Plaid мы не хотели зацикливаться на деталях создания новых значков через день. Многие проекты представляли собой концепции, предназначенные для тестирования и частого повторения. Вместо этого мы полагались на сочетание готовых наборов значков, включая SS Standard, SS Glyphish и Streamline, в зависимости от варианта использования.

Не то

Значит, завелись по-другому. Какой значок из какого набора наиболее подходит для того или иного опыта? Должны ли мы выбирать из ограниченного набора SS Standard и неохотно отправлять опыт, используя несовершенный значок, который используется по-другому на другом экране? Или мы должны часами копаться в чрезвычайно надежном, но плохо организованном наборе Streamline, который теперь может похвастаться 30 000 уникальных векторных иконок?

Оба варианта не годились.

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

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

Долой старую

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

• Фаза 1: Аудит (более тщательный) значков, используемых в приложениях Plaid, и ожидается, что они потребуются в ближайшем будущем
• Этап 2: Изучите диапазон генерируемых стилей и выберите направление на основе контекстных потребностей
• Этап 3: Определите наши правила для более эффективной реконструкции значков, выявленных в ходе аудита, и новых по мере необходимости
• Этап 4: Организуйте централизованную библиотеку всех выходных данных и делитесь надежной документацией и рекомендациями для будущего вклада

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

Конкретные этапы аудита

1 Извлечение значков из различных областей нашей поверхности, включая Plaid Link (наш основной продукт), нашу панель инструментов разработчика, наш потребительский портал и plaid.com, чтобы назвать несколько.

2 Маркировка значков с указанием их предполагаемого использования

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

4 Сравнение стилистической обработки, такой как толщина обводки, общий размер и цвет

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

Точность
Иконки интуитивно отображают содержимое, которое они представляют

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

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

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

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

Стоит отметить, что мы решили использовать Illustrator в качестве нашего производственного инструмента, отчасти из-за его проверенного качества экспорта svg, плюс Зак и я оба чувствовали себя наиболее комфортно с инструментами Pen, Pathfinder и Shape Builder, которые он предлагает. С тех пор мы перешли на Figma, но эти рекомендации по-прежнему актуальны.

Монтажные области

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

• Монтажные области 24 х 24 пикселя (выровнены по сетке)
• 2 пикселя по всему периметру
• Оставляем живую область 20 х 20 пикселей для игры

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

• Прямоугольные направляющие 12 x 16 пикселей
• Квадратные направляющие 14 x 14 пикселей
• Круглые направляющие 16 x 16 пикселей

Контейнеры

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

Толщины обводки

Обводки — важная стилистическая деталь, которую мы хотели тщательно изучить и протестировать. Для нашей системы мы остановились на толщине обводки 1,5 пикселя. При первом упоминании это казалось смертным грехом для такого сторонника ОКР, как я. Но при дальнейшем изучении и обмене отзывами с командой это действительно казалось правильным выбором. Он хорошо сочетался с типом, который сопровождал в большинстве случаев, где 1px казался слишком хрупким, а 2px казался слишком коротким. Наше решение выглядело как сложная золотая середина.

[Необязательный компьютерный сеанс]

Ключом к тому, чтобы заставить работать толщину обводки 1,5 пикселя, является использование линий пиксельной сетки для выравнивания обводки вместо выравнивания краев фигур по пиксельной сетке. Размещение сегментов линий и точек непосредственно на сетке позволяет распределить обводку в 1,5 пикселя равномерно, с центром в промежутке 2 пикселя. Другими словами, вместо того, чтобы иметь 1 полный пиксель и 1 наполовину полный пиксель (что приводит к светло-серому размытому эффекту при рендеринге), мы разделили бы наполовину полный пиксель между пролетом в 2 пикселя, сделав каждую сторону сегмента линии 0,75 пикселя. . Поскольку это может сбивать с толку, и вы, вероятно, никогда не поймете, о чем я говорю, без наглядного примера, вы можете увидеть примеры предварительного просмотра пикселей для каждого сценария ниже.

Детали обводки

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

Радиус угла

Вместо того, чтобы полагаться на предустановленный алгоритм эффекта закругленных углов, предлагаемый в настройках обводки, мы определили свой собственный. Закругленные углы настроены на 0,5 пикселя, настройки Illustrator показаны ниже. Это позволяет использовать квадратную форму счетчика (негативное пространство) и закругленный край для тонкой округлости, которая перекликается с нашими кнопками. Мы редактируем углы в качестве окончательного производственного прохода, поскольку он может быть несколько избыточным, если он все еще является генеративным в построении.

Вершины стрелок

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

Экспорт

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

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

Номенклатура

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

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

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

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

значок/стрелка влево
значок/стрелка вправо
icon/bar-graph
icon/sidebar-hide
icon/sidebar-show
icon/trash

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

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

Сопоставление

Изображение нашей библиотеки значков, созданное в Illustrator, сохраненное в репозитории экспортированных ресурсов в Dropbox, было импортировано в нашу общую библиотеку значков Sketch Cloud, задокументировано в Zeroheight + Storybook, добавлено в нашу библиотеку компонентов React, включено в наш Наборы для разработки iOS и Android, и с тех пор он был перенесен в нашу систему проектирования Threads Foundations в Figma — глубокий вдох — и все это в течение последних нескольких месяцев.

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

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

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

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

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

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