Полное руководство по созданию интерфейсных иконок
Иконки являются важной частью любой системы дизайна или истории продукта. Иконки помогают нам быстро ориентироваться. Они независимы от языка. И самое приятное: они очень маленькие, поэтому они не занимают много места. Иконки являются фундаментальной частью хорошей системы дизайна и очень полезны для маркетинговых материалов. Они являются основным блоком иллюстративного контента, также являются высокотехнологичными.
Существует не так много людей, которые любят создавать иконки, и еще меньше тех, у кого это получается. Я написал это руководство, чтобы помочь вам стать одним из тех людей.
Независимо от того, являетесь ли вы экспертом по системам проектирования, иллюстратором или дизайнером продукта, это руководство поможет вам узнать, как создавать иконки, связывать их с вашим брендом и как внедрить их в вашу систему дизайна. Давайте начнем с основ.
Основные элементы значков
Размер
Согласованность и соответствие является ключевым условием для иконок, и все ваши иконки должны быть одинакового размера при их создании.
Выберите общий размер для создания всех ваших иконок, а затем предоставьте им возможность масштабироваться до других размеров, которые могут понадобиться другим дизайнерам. Вы же не хотите создавать одну и ту же иконку снова и снова, только в разных размерах.
Когда вам понадобится комплексность глифа, именно тогда вы захотите добавлять другие размеры. У вас может быть значок базового продукта в 24px, а у маркетинговых значков — 80px из-за огромной разницы в использовании. Вы захотите добавить больше деталей для больших размеров.
Значок магазина в размерах 24×24, 40×40 и 80×80
Когда создается одна и та же иконка разных размеров, я предпочитаю начинать с самого большого размера и идти на уменьшение.
Мне гораздо проще удалять детали и упрощать, чем добавлять по мере роста. Это также дает вам ощущение объекта, прежде чем вы действительно минимизируете его.
Цвет
Для иконок товара используйте 1 цвет: черный. Если добавить что то кроме этого, то ваши компоненты станут слишком сложными и трудными для других дизайнеров. Для маркетинговых иконок вы можете использовать 2 цвета, если это важная часть вашего бренда, но я лично считаю, что значки должны быть одноцветными. Все, что имеет 3 или более цветов, является иллюстрацией, а не значком.
Слева: это точечная иллюстрация. По-середине: значок в перспективе. Справа: плоский значок.
Сетки
Пиксельная сетка является основной сеткой, которая использует наименьший элемент: пиксель. При создании значков вы всегда хотите выровнять объекты по пиксельной сетке, особенно по прямым линиям. Но вы можете строить другие фигуры на пиксельной сетке (если вы используете Figma, это уже установлено автоматически).
Слева: объекты на пиксельной сетке
Мне нравится строить себе сетку, прежде чем я начну. Вот мои настройки в Figma.
Прекрасно! Теперь, когда вы освоили пиксельную сетку, вы захотите узнать об оптической сетке. Оптическая сетка помогает нам определить, где находится центр масс значка, а также насколько он воспринимается человеческим глазом. Круги и изогнутые объекты занимают меньше визуального пространства, чем квадраты. Лучше всего поместить значки в контейнер фиксированного размера, чтобы при экспорте они были одинакового размера.
При построении моей оптической сетки, я предпочитаю делать отступы по краю, которые равны ширине моего штриха, или, возможно, в два раза шире, если я использую штрих в 1px.
Визуально доминирующий объект должен быть центрирован как вертикально, так и горизонтально.
Доминирующий объект (прямоугольник) находится в центре
Если вы используете пиксельную сетку и пользуетесь преимуществами оптической сетки, вы будете впереди.
Штрихи и заливки
Помните, когда я сказал, что последовательность является ключевым моментом? Я говорю это снова. Ничто не беспокоит меня больше, чем две иконки рядом, где одна закрашена, а у другой выполнен только контур. Очень важно убедиться, что все ваши иконки оформлены одинаково. Например, у вас могут быть варианты применения заливки, чтобы показать, что что-то выделено, но вы определенно хотите создать набор с одним стилем и, возможно, создать другой вариант.
Как правило, заполненные значки имеют более высокий уровень узнаваемости. Значки выполненные лишь с помощью контура дают вам прекрасную возможность создавать крошечные детали.
При выборе того, какой стиль является более подходящим, вы также должны учитывать общий вид своего бренда.
Если вы собираетесь создавать штриховые иконки, все штрихи должны быть одинаковой ширины. Я также рекомендую, чтобы расстояние между штрихами не было меньше, чем ширина вашего штриха.
Расстояние между штрихами должно по возможности быть равным ширине штриха
Возможно, у вас есть набор иконок, который соответствует одному стилю, но не другому. При создании закрашенных версий контурных значков вы захотите посмотреть, как можно упростить линейную работу. В идеале закрашенные значки напоминают тени, а не перевернутые линии. Создание контурных версий закрашенных значков включает в себя определение того, какую ширину контура вы можете использовать в этом пространстве и какие детали вы можете добавить, сохраняя при этом четкость.
Я не рекомендую делать контурные значки размером менее 10px (при условии, что ширина штриха будет 1px-2px). Их будет очень сложно расшифровать.
Выбор стиля
Ваши значки являются отражением вашего бренда. Приступая к этой работе, важно понимать основные ценности вашего бренда и то, как они проявляются визуально. Некоторые прилагательные для размышления: жесткий/мягкий, обыденный/официальный, роскошный/экономичный и буквальный/абстрактный. У вас может быть визуализация стиля, на который вы можете ссылаться.
Некоторые значки кажутся простыми (X, меню гамбургеров, шеврон), но эти значки требуют того, чтобы вы уже понимали основные принципы вашей системы значков. Я рекомендую начинать с более сложных значков, чтобы помочь вам определить, какие правила вы хотите установить. Таким образом, как только вы начнете создавать простые иконки, это уже будет проще простого.
5 значков продуктов представлены в 5 стилях — обратите внимание, как небольшие различия делают каждый набор выдержанным и целостным.
Вот подборка как продуктов, так и маркетинговых значков, которые представляют посыл и стиль визуального бренда компании:
- Uber
- Apple
- Airbnb
- Square
Рисование значков
Геометрические фигуры
Если только я не создаю очень естественный, органичный стиль значков, то мне нравится начинать с основных форм, для создания формы моих иконок.
Эта резиновая утка сделана из кругов (и одного закругленного прямоугольника).
При рисовании геометрических форм, если вам нужно создать сложные многоугольники, вы можете начать с квадрата или прямоугольника или использовать инструмент «Перо» для перехода от точки к пикселю. При этом очень важно иметь четкую сетку, чтобы вы могли видеть, куда направляются эти точки.
Когда вам нужно нарисовать угловые геометрические фигуры, я не рекомендую просто использовать прямоугольник и вращать его. Вместо этого используйте пиксельную сетку, чтобы нарисовать ваши прямоугольники под углом
Слева: повернутый прямоугольник (точки не совпадают с сеткой). Справа: нарисованный от руки прямоугольник (обеспечивает направление ваших точек к сетке).
Естественные формы
Рисовать более естественные формы в Figma легко. Вы можете либо использовать традиционный метод рисования кривых точка за точкой, либо вы можете использовать превосходный инструмент Figma углового радиуса.
Мне нравится рисовать все мои точки в виде прямых линий, а затем закруглять углы с помощью инструмента «Радиус угла». Этот инструмент очень полезен для создания органических, сбалансированных форм. Поскольку углы Figma автоматически подстраиваются, вы можете перемещаться по этим точкам, и углы подстраиваются под вас.
Углы
Есть несколько вариантов углов: скошенный (квадратный), скошенный и закругленный. Я настоятельно рекомендую вам придерживаться одного стиля для вашего набора иконок.
Угловой радиус
При использовании этого для округления квадратов и прямоугольников, вы хотите убедиться, что все ваши углы имеют одинаковый радиус. При создании концентрических фигур вам необходимо отрегулировать радиусы углов, чтобы создать идеальные концентрические формы. Внутренние формы будут иметь меньший радиус, чем внешние формы.
Отличный образец концентрических радиусов в этом портфеле
Любая промежуточная точка на пути может быть сглажена, с помощью свойства Угловой радиус в Инспекторе.
Если вы выбираете весь путь, то он округляет все углы в одинаковой степени. Если вы перейдете в режим редактирования, вы можете выбрать отдельные точки и округлить их по отдельности.
Закрашенные объекты
Если для ваших иконок требуются закрашенные объекты внутри их основных форм (например, окна в доме), в идеале вы захотите сохранить контурные фигуры в заштрихованных значках. И закрашенные объекты в закрашенных значках. В случае, если у вас нет места для контурных фигур, вы хотите использовать закрашенные формы, которые пропорциональны вашим контурам. Например, если у вас контур шириной в 2px, вам не нужны закрашенные фигуры больше, чем 4x4px.
Метафора
Метафоры важны в значках-мы используем их постоянно, даже не задумываясь. Значок дома обозначает домашнюю страницу. Насекомое означает ошибку. При масштабировании значков для создания уменьшенных версий, я предпочитаю помнить про метафору(смысл), которую я использую для передачи смысла значка.
Используйте общую метафору(смысл заложенный в вашем изображении), чтобы продолжить в меньшем размере, а не просто сделать точную иконку в меньшем масштабе.
Когда общий контент выглядит не так как нужно, определите, какие детали наиболее важны, а затем удалите лишние.
Если вы ограничены пространством, вы можете упростить важные детали, а не удалять их.
Перспектива
Использование перспективы в иконках не всегда просто — их размер усложняет задачу, поскольку рисование в перспективе занимает дополнительное пространство. Если вы хотите использовать перспективу, либо используйте ее масштабно и сделайте ее ключевой частью вашей системы, либо используйте ее экономно, в случае, когда это помогает повысить четкость и ясность.
Верхний ряд: плоский. Нижний ряд: в перспективе.
Шрифт (избегайте!)
По возможности избегайте использование надписей для значков. Значки должны быть глобальными. Если вам нужен шрифт (например, символы валюты), нарисуйте его самостоятельно, а не используйте гарнитуру шрифта.
Подсказки
Операции Boolean
Логические операции объединяют любой набор слоев фигур с помощью одной из четырех формул: объединение, вычитание, пересечение и исключение.
Этот инструмент актуален и потрясающий. Это отличный способ сделать ваши иконки более изменяемыми. Вместо того, чтобы обрезать контуры, вы можете использовать функцию объединения. Не хотите искать пересечение фигур вручную? Попробуйте вычесть.
Группы Boolean обрабатываются как единый слой формы и имеют общие свойства заливки и обводки и могут комбинироваться с другими булевыми группами посредством последующих логических операций.
Объединение: объединяет выбранные фигуры в логическую группу. Если объекты перекрываются, внешний путь новой фигуры состоит из совокупности путей ее подслоев минус любые сегменты, которые перекрываются. Затем этот штрих будет применен к этому внешнему пути, игнорируя любые сегменты пути, которые перекрывают друг друга.
Вычитание: противоположно объединению. Вычитание удаляет область фигуры или набора фигур из базовой фигуры. Только нижний слой формы является сплошным, остальные вычитаются из него.
Пересечение: создает логическую группу, форма которой состоит только из перекрывающихся частей ее подслоев.
Исключение: является противоположностью пересечения. Исключение показывает только те области его подслоев, которые не перекрываются.
Когда я закончу со значками, мне бы хотелось создавать для них стили, так что, когда будущие дизайнеры корректируют цвет, легко вместо этого просто изменить одно свойство (заливку), вместо заливок и штрихов.
Сеть вектор
Векторные сети являются одной из самых уникальных функций в Figma. Большинство инструментов пера рисуют контуры в петле с определенным направлением, всегда желая восстановить соединение с их исходной точкой. Векторные сети не имеют направления и могут распадаться в разных направлениях, не требуя создания отдельного объекта пути. Сложные объекты могут быть созданы внутри одного и того же объекта и с теми же свойствами гораздо быстрее, чем они могут быть нарисованы с использованием традиционных векторных инструментов контура. Подробнее об этом можно прочитать в этой статье.
Как использовать иконки в системе дизайна
Обеспечение доступности набора значков для остальной части вашей команды — это вопрос организации, управления активами и осведомленности.
Организация
Давайте начнем с наименования файлов. Ваши иконки должны быть названы на основе того, что они показывают, а не того, что они представляют. Например, значок секундомера должен называться секундомер, а не скорость. Лампочку следует называть лампочкой, а не идеей. Вы хотите, чтобы люди сразу поняли, что такое значок, а не то, что он передает на более концептуальном уровне. Желательны короткие названия. Когда вам нужно несколько слов, используйте тире, чтобы отделить их.
Значки, подобные этому, могут нуждаться в нескольких словах, например, chef-hat.
Со временем вы превратите все свои значки в компоненты. В Figma компоненты работают точно так же, как и фреймы, с небольшой уловкой, которая дублирует компонент, создавая новые экземпляры, а не копии. Это означает, что вы можете иметь гигантскую библиотеку со всеми вашими значками, а когда вам понадобится ее использовать, вы создаете экземпляр из библиотеки.
Если кто-то внесет изменения в оригинал, ваши значки будут обновлены. Вам может понадобится искать эти активы, поэтому вы можете добавить информацию для поиска. Но вместо того, чтобы поместить это в имя файла, есть альтернатива. Figma имеет окно описания компонента, которое позволяет добавлять теги и ключевые слова. Это отличное место для добавления всех тех фраз, которые люди могут искать в вашей библиотеке, не делая сумасшедших длинных и сложных имен. Вот откуда идут ценности продукта!
Чтобы помочь своим инженерам, вы захотите использовать как фреймы, так и страницы. Страницы представляют наиболее удаленную группу (поэтому мне нравится сортировать их по размеру). Затем фреймы помогут вам сузить содержание, как в примере ниже. Система именования этого значка имеет размер — категория — имя файла.
Когда есть один и тот же значок в разных вариациях, вот как мне нравится обрабатывать их.
Различные размеры: Используйте разные страницы, так как вы редко будете переключаться напрямую с одного экземпляра на другой.
Заливка vs контур: Если вы используете оба стиля, используйте косую черту после имени значка, чтобы указать закрашенные или заштрихованные значки.
Слева: кофе / контурный. Справа: кофе / закрашенный
Скорректированные изображения: если у вас есть значок с визуальным вариантом (например, с несколькими вариантами валюты), вы также можете использовать наименование, чтобы помочь дифференцировать, используя тот же метод, что и закрашенные и контурные значки.
Исходный значок слева «щит». Затем слева направо: «щит / доллар», «щит / евро», «щит / фунт», «щит / иена», «щит / плюс»
Управление вашими активами
Когда вы закончили работу над своими знчками, вы хотите, чтобы они были максимально чистыми для наилучшего экспорта. Используйте логические операции, чтобы упростить вашу работу (помните, наш друг Объединение?). Избегайте лишних линий или форм. Убедитесь, что все ваши строки попадают в ваш кадр. Также необходимо, чтобы другой человек посмотрел на все ваши значки и дважды проверил чистоту.
Figma великолепна, потому что она поощряет сотрудничество и прозрачность. Со значками может быть заманчиво позволить всем вашим дизайнерам иметь доступ к редактированию, чтобы они могли добавлять новые значки. Я рекомендую собирать значки по отдельности, проверять их и добавлять их самостоятельно, когда они соответствуют стандарту. Предоставление вашим коллегам доступа к просмотру (и доступу к вашей библиотеке) достаточно, чтобы вовлечь их в то, что вы делаете, не заканчивая библиотекой и файлом cattywampus. Некоторые из ваших коллег могут захотеть создать разные версии одного и того же значка (например, разных цветов или с разными названиями). Это часто случается, когда кто-то связывает значок с концепцией или продуктом. Вы никогда не захотите иметь более одной версии каждого значка в вашей библиотеке. Используйте описание компонента для этих наименований. Ваши коллеги-дизайнеры должны настраивать цвета значков в своих отдельных файлах, а не в мастере. Поверьте, вам придется время от времени вносить изменения в эти значки, и вы не захотите делать это более чем в одном месте.
Форматы файлов являются ключевыми для того, когда вы готовы экспортировать значки. Если вы предоставляете значки партнерам за пределами вашей команды дизайнеров или инженеров, вы, вероятно, даете им файлы .png. Экспорт в 1x, 2x и 3x для нескольких устройств. Для разработки и проектирования вы будете часто экспортировать файлы .svg, которые можно редактировать в программах проектирования и которые будут отображаться в браузере с помощью кода при визуализации онлайн в вашем приложении или на сайте. При экспорте SVG вам понадобится максимально чистый код. Еще одна веская причина для выбора Figma-это сверхлимитный экспорт SVG. Поскольку они оптимизированы, это устраняет необходимость дальнейшей оптимизации в будущем. Ознакомьтесь с этой статьей, чтобы узнать больше.
Передача ваших значков в другие руки
Вы можете быть величайшим дизайнером значков в мире, но если вы не можете внедрить ваши значки в ваше приложение / веб-страницу / прямую почтовую программу, это ничего не даст.
Прежде чем приступить к проектированию, поговорите с командой инженеров, ответственных за их внедрение в продукт. Они смогут предоставить вам информацию о веб-сайте или инфраструктуре приложения, которая будет определять некоторые из ваших вариантов, например, ширина или размер штриха. Спросите других дизайнеров, что было сделано раннее, чтобы убедиться, что вы не дублируете работу. Выясните из ваших PMM, какие дополнительные значки они желают увидеть. Будьте дружелюбным сотрудником, который заинтересован в обратной связи, совете и помощи. Это даст вам лучшее представление о том, что вы должны делать, чтобы вам не пришлось переделывать работу и не упускать ключевых арендаторов, с которыми уже нашли общий язык другие люди. И когда вы будете готовы к реализации со своими разработчиками, попробуйте использовать API Figma для программного экспорта.
Другие источники
- Не стесняйтесь связаться с Бонни Кейт Вольф по адресу [email protected]
- Я люблю thenounproject.
com→ это место вдохновлено различными взглядами на одну и ту же тему (кто знал, что было так много способов нарисовать папку с файлами!)
com→ это место вдохновлено различными взглядами на одну и ту же тему (кто знал, что было так много способов нарисовать папку с файлами!)https://www.figma.com/file/v8WczgltywYcWbZyAqChfX/Design-Systems-Icon-Guide/duplicate?node-id=0:1
Перевод статьи Bonnie Kate Wolf
Проектирование блочно-модульных котельных | Заказать в «Фортис»
- 1. Виды проектируемых котельных
- 2. Наше предложение
- 3. Работа с проектной документацией
- 4. Фотографии отдела проектирования
- 5. Примеры чертежей
- #. Преимущества «Фортис»
- #. Сертификаты
- #. Отзывы
Завод «Фортис» c 2008 года проектирует блочно-модульные котельные установки мощностью от 50 кВт до 38 МВт. Создаем проекты как для новых систем, так и для реконструкции старых.
Виды проектируемых котельных
Отдельно-стоящие блочное-модульные котельные
Водогрейная и паровая
Крышные блочно-модульные котельные
Водогрейная
Пристроенные блочно-модульные котельные
Водогрейная и паровая
Передвижные блочно-модульные котельные
Водогрейная и паровая
Наше предложение
Среди ведущих компаний на рынке создания технических проектов для котельных установок уже давно утвердилась компания «Фортис».
Уже не один год команда трудится над выпуском проектов для создания систем кондиционирования, вентиляции, отопления, газоснабжения, водоснабжения и канализаций.
Наша команда выполняет комплексные услуги по проектированию котельных. Это включает в себя:
- создание проекта реконструкции старых установок;
- проектирование новых систем отопления и ГВС.
Ограничений как таковых у проектирования котельных нет — мощность может быть любой, как и тип интеграции, то есть места расположения установки: на крыше, в пристроенном помещении, в отдельном здании. Мы также работаем со всеми типами топлива, с возможностью организовать отдельное место хранения с удобным расположением. Все пункты, особенности, предпочтения и пожелания вносятся в проект.
Будучи компанией с длительным сроком работы на рынке котельного оборудования, мы также предоставляем некоторые гарантии. У наших клиентов не возникнет проблем с получением разрешающих документов.
Следует отметить, что наша команда не только работает над созданием новых проектов, но и совершает процесс согласования со сторонними организациями по контролю над проектной документацией.
Работа с проектной документацией
Каждый сотрудник, принимающий участие в создании проектов, получает специальное образование, а также заканчивает необходимое количество обучающих курсов. Во время проектирования используются новейшие технологии, дорогостоящее и лицензированное ПО, а также надёжное оборудование.
Давайте рассмотрим основные этапы создания проектов для отопительных систем.
- Ознакомление с индивидуальным запросом клиента и основными особенностями, связанными с расположением первичного и вторичного оборудования.
- Подбор аппаратной и коммутационной части, которая будет использовать при создании.
- Работа над всеми видами чертежами.
- Оформление документов проектирования и создание всех пояснительных записок.
- Встреча с государственными организациями по контролю и получение официального разрешения на строительство котельной установки.
- Передача проекта и всей необходимой документации заказчику.
Проектирование и монтаж котельных установок — это процесс, сопряжённый с большой ответственностью: любые отопительные системы — опасные объекты. Именно поэтому подготовкой документации и получением разрешений должны заниматься зарекомендовавшие себя компании, опытные инженеры и технологи.
Компания «Фортис» отвечает всем перечисленным выше требованиям. За нашей спиной находится драгоценный опыт!
Фотографии отдела проектирования
Примеры чертежей
Оставить заявку
Почему стоит обратиться в «Фортис»
Число наших постоянных клиентов увеличивается с каждым годом и вот почему:
Высококвалифицированные
специалисты
Высококвалифицированные специалисты
Высококвалифицированные аттестованные штатные специалисты, которые всегда находятся на связи и готовы оказать необходимую техническую поддержку.
Индивидуальный заказ
Индивидуальный заказ
Возможность изготовления БМК в типовом исполнении и по индивидуальному заказу.
Соблюдение сроков
Соблюдение сроков
Четкое соблюдение согласованных в договоре сроков выполнения работ.
Лизинг
Лизинг
Возможность приобретения БМК в лизинг.
Гарантия и обслуживание
Гарантия и обслуживание
Гарантийное и сервисное обслуживание сданных в эксплуатации БМК.
Высокое качество
Высокое качество
Качество наших БМК отвечает всем существующим ГОСТам и СП.
Контроль строительства
Контроль строительства
Все производственные фонды и территория находятся в собственности завода. Клиент может в любой момент приехать и посмотреть, как выполняется заказ.
Интересы и пожелания клиентов для команды ООО «Фортис» превыше всего!
Сертификаты
2 стр.
Отзывы
Константинов А.А.
Генеральный директор
АО «Сам РЭК» выражает благодарность за своевременную поставку двух установок для нужд пос. Суходол (ТКУ-2700) и с. Красносельское (ТКУ-1088)
Костырева Е.А.
Генеральный директор
Выражаем благодарность за своевременную и качественную поставку котельной установки ТКУ-6000
Ибрагимов Р. А.
Генеральный директор
Выражаем благодарность за проделанную работу в плане поставок блочно-модульных котельных и монтажных работ
Лебедев А.А.
Генеральный директор
Выражаем благодарность за качественную и оперативную поставку Блочно-модульной котельной мощностью 2400 кВт
Нет лого
Агапитов И.В.
Генеральный директор
ООО «Стройуниверсал» выражает благодарность сотрудникам фирмы «Фортис» за оперативность и качество выполняемых работ…
Кодратюк В.А.
Генеральный директор
ОАО «Скоростной трамвай» выражает благодарность за качественную и своевременную поставку котельной установки ТКУ-4500
Зеленков Н.А.
Генеральный директор
ООО «Экотехнология» выражает искреннюю благодарность коллективу предприятия ООО «Фортис» за изготовление блочно-модульной котельной…
Нет лого
Лаврова Г.А.
И.о. директора
МКП «Касимовсервис» благодарит завод ООО «Фортис» за добросовестное и качественное выполнение проектных и строительно-монтажных работ на объектах в Рязанской области, г. Касимов…
дизайнов иконок, тем, шаблонов и загружаемых графических элементов на Dribbble
Посмотреть YKTFV
Просмотреть NextMV Icons Фирменный стиль, набор иконок, веб-логотип, векторная типография
NextMV Icons Фирменный стиль, набор иконок, веб-логотип, векторная типография
Посмотреть логотипы
Просмотр значков Videoleap
Иконки Videoleap
Посмотреть иконографию: брендинг иконок, набор иконок, визуальная идентификация, приложение
Иконография: брендинг иконок, набор иконок, визуальная идентификация, приложение
Посмотреть коллекцию иконок
Коллекция иконок
Посмотреть линейную иконку
Линейный значок
Посмотреть 🕊
Посмотреть набор иконок
Набор иконок
Посмотреть HeatWatch
Тепловые часы
Посмотреть ☕️
Посмотреть иконографию Twitter
Иконография Twitter
Посмотреть HeatWatch
Тепловые часы
Посмотреть 🍀
Посмотреть MetaSpark Logomark Брендинг, дизайн логотипа, визуальная идентификация
Логотип MetaSpark Брендинг, дизайн логотипа, визуальная идентификация
Посмотреть значки достижений
Значки достижений
Посмотреть руководство по иконографии Assetly
Руководство по иконографии Assetly Брендинг
Посмотреть изометрические значки
Изометрические иконки
Просмотр DesignMate — набор иконок
DesignMate — набор значков
Посмотреть иконографию UOW
Иконография UOW
Посмотреть Oppo ColorOS 7 Icons Branding, App Icon Set pack web line flat
Oppo ColorOS 7 Icons Branding, App Icon Set pack web line flat flat
Посмотреть обложку Okta 3d Animated Icons, набор иконок, логотип, пользовательский интерфейс, контур
Окта 3D Анимированные иконки, набор иконок, логотип, пользовательский интерфейс, контур
View Knicknack — набор иконок
Безделушка — набор иконок
Посмотреть могучие значки
Могучие иконы
Зарегистрируйтесь, чтобы продолжить или войдите
Идет загрузка…
6 простых шагов к лучшему дизайну иконок — Smashing Magazine
- 17 мин чтения
- Дизайн, Веб-дизайн, Графический дизайн
- Поделиться в Twitter, LinkedIn
Об авторе
Скотт Льюис — руководитель отдела контента Iconfinder. com, а также профессиональный дизайнер иконок. Скотт получил степень в области графического дизайна в Восточной Каролине…
Больше о
Скотт ↬
В этой статье обсуждается набор рекомендаций по проектированию, состоящий из шести шагов. Шаги соответствуют основам дизайна звуковых иконок, включая согласованность, разборчивость и ясность. Принципы эффективного дизайна иконок подробно обсуждались дизайнером иконок Джоном Хиксом из Hicks Design в его книге «Справочник по иконкам», а также Google в своих рекомендациях по дизайну материалов для системных иконок. Шесть шагов, обсуждаемых в этой статье , следует рассматривать как руководство, а не догматический список правил . Чтобы стать великим дизайнером, нужно научиться, когда нарушать правила, а когда следовать им, как мы покажем здесь.
Магазины иконок и векторных изображений, такие как Iconfinder (где я работаю), делают векторные иконки с хорошим дизайном недорогим и легкодоступным ресурсом для веб-дизайнеров и полиграфистов. Доступны тысячи высококачественных наборов значков премиум-класса и сотни отличных бесплатных наборов.
Каждый набор значков, отправленный на Iconfinder, проверяется и оценивается на предмет потенциальной привлекательности для пользователей нашего веб-сайта и потенциальной коммерческой ценности в качестве значков премиум-класса. При проверке наборов иконок, представленных на веб-сайте, мы несем ответственность перед нашими дизайнерами и нашими клиентами за то, чтобы все премиум-иконки на веб-сайте имели максимально возможное качество.
Дополнительная литература на SmashingMag:
- Как создавать привлекательные значки приложений
- Иконки как часть удобного пользовательского интерфейса
- Как создавать значки в Adobe XD
- Простые шаги к улучшению дизайна значков
Еще после прыжка! Продолжить чтение ниже ↓
Чтобы добиться этого, мы постоянно осознаем разницу между «недостаточно хорошим» и «премиальным качеством».
Разница часто очень мала и обычно требует минимальных изменений, но она оказывает большое влияние на дизайн и ценность набора иконок. В отличие от многих других торговых площадок, мы редко отклоняем наборы, которые не полностью соответствуют нашим требованиям к качеству. Вместо этого мы поделимся очень конкретными практическими предложениями о том, как дизайнер может улучшить значки.Переработка значка
В примерах изображений, которые следуют в этой статье, шесть обсуждаемых шагов будут применены к переработке значка собаки (точнее, корги), недавно представленного Iconfinder. пользователь по имени Кем Бардли. Значок имел потенциал, но не был достаточно отполирован, чтобы считаться «премиальным качеством». Мы дали Кему несколько простых советов, и после небольшой переделки его иконки были готовы к утверждению в качестве премиального набора иконок. На изображении ниже показаны версии значка Кемь до и после. В следующих разделах мы объясним, как методично переходить от «до» к «после».
На изображении слева вверху показан исходный значок. На изображении справа показан переработанный значок, в котором реализованы принципы, изложенные в этой статье. (Изображение: Кем Бардли)Обратите внимание, что хотя рекомендации, обсуждаемые в статье, ориентированы на веб-иконки, они в целом применимы и к печатным значкам. Типичные 300 точек на дюйм (DPI) печатного материала делают совершенство пикселей практически бессмысленным. Если вы дизайнер полиграфии и читаете это, все описанные принципы применимы, но вы можете в значительной степени игнорировать детали с идеальным пиксельным совершенством.
Хорошо разработанные значки демонстрируют методичный и продуманный подход к трем основным атрибутам, составляющим любой дизайн значка: форма, эстетическое единство и узнаваемость. При разработке нового набора иконок рассмотрите каждый из этих атрибутов в итеративном подходе, начиная с общего (форма) и переходя к конкретному (узнаваемость). Даже если вы создаете одну иконку, эти три атрибута по-прежнему подразумеваются и могут быть экстраполированы из одного дизайна.
Несомненно, эффективный дизайн значков состоит из более чем трех атрибутов, но те три, которые подробно описаны ниже, являются хорошей отправной точкой. Ради относительной краткости мы сосредоточились на том, что мы считаем тремя основными атрибутами.
Форма
Форма — это основная структура значка или способ его создания. Если вы проигнорируете детали значка и нарисуете линию вокруг основных фигур, образуют ли они квадрат, круг, горизонтальный или вертикальный прямоугольник, треугольник или более органичную форму? Основные геометрические фигуры — круг, квадрат и треугольник — создают визуально устойчивую основу для дизайна иконок. В нашем примере с корги Кем Бардли голова собаки состоит из двух треугольников и двух эллипсов. Точно так же, как можно было бы начать рисунок, набрасывая самые большие и простые формы, а затем уточняя все больше и больше деталей, можно было бы начать создание значка с самых простых форм, а затем добавить больше деталей — но только столько деталей, сколько необходимо для передачи концепции.
быть представленным, будь то объект, идея или действие.
Ключевые линии на этом изображении показывают основные основные формы, которые определяют форму дизайна. (Изображение: Кем Бардли)Эстетическое единство
Элементы, общие для одного значка и для всего набора значков, — это то, что мы называем эстетическим единством. Этими элементами являются такие вещи, как закругленные или квадратные углы, определенный размер углов (2 пикселя, 4 пикселя и т. д.), ограниченный и постоянный вес линий (2 пикселя, 4 пикселя и т. д.), стиль (плоский, линейный, заполненный). линия или глиф), цветовая палитра и многое другое. Эстетическое единство набора — это набор элементов дизайна и/или вариантов выбора, которые вы повторяете в наборе, чтобы визуально связать его в единое целое. В приведенных ниже примерах обратите внимание, что каждая из трех собак из набора Кема имеет общие элементы, такие как закругленные углы толщиной 2 пикселя, обводка толщиной 2 пикселя вокруг морды собак и носы в форме сердца.
Эти три символа собак имеют общий дизайн и элементы стиля, создавая эстетическое единство. (Изображение: Кем Бардли)Узнаваемость
Узнаваемость — это продукт сущности значка или то, что делает его уникальным. Работает ли значок, в конечном счете, зависит от того, насколько легко зритель понимает объект, идею или действие, которые он изображает. Узнаваемость включает в себя демонстрацию свойств, которые зритель обычно связывает с этой идеей, но она также может включать в себя уникальные или неожиданные элементы, такие как сердцевина носа корги. Помните, что под узнаваемостью понимается не только понимание изображаемого объекта, идеи или действия, но и узнаваемость вашего уникального набора иконок. В этом отношении эстетическое единство и признание могут и часто пересекаются. На изображении ниже мы распознаем каждую из двух собак как корги и сибирского хаски соответственно из-за их уникального окраса, формы головы и ушей, но при этом признаем их частью одного и того же набора из-за общего дизайна и элементов стиля.
.
Уникальные качества каждой собаки делают их индивидуально узнаваемыми, а общий дизайн и элементы стиля делают их узнаваемыми как набор. (Изображение: Кем Бардли)До сих пор мы рассматривали то, что мы считаем тремя основными атрибутами эффективного дизайна иконок. В следующем разделе мы подробно рассмотрим шесть шагов для правильного решения этих трех проблемных областей.
Шесть шагов
Всегда начинайте с сетки
Преимущества различных размеров сетки лучше рассмотреть в отдельной статье. Для наших целей мы будем работать с сеткой 32 × 32 пикселя. Наша сетка также содержит несколько основных руководств, которые помогут нам создать базовую форму каждого дизайна значка.
Здесь мы видим сетку 32 × 32 пикселя с 2-пиксельной границей (или «запретной зоной») для передышки.Внешние 2 пикселя сетки — это то, что мы называем «запретной зоной». Избегайте размещения какой-либо части значка в этом пространстве, если в этом нет крайней необходимости.
Цель запретной зоны — создать передышку вокруг значка.Частью формы значка является общая форма и ориентация. Если вы нарисуете линию вокруг внешних краев значка — ограничивающую рамку, если хотите — форма обычно будет квадратом, кругом, треугольником, горизонтальным прямоугольником, вертикальным прямоугольником или диагональным прямоугольником.
Круглые значки располагаются по центру сетки и обычно касаются всех четырех крайних краев области содержимого, не входя в запретную зону. Обратите внимание, что частой причиной нарушения правила запретной зоны является то, что какой-то акцент или второстепенный элемент должен выходить за пределы круга, чтобы сохранить целостность дизайна, как показано ниже.
Выравнивание круглых значков с сеткой и ключевыми линиями (Изображение: Скотт Льюис)Квадратные значки также располагаются по центру сетки, но в большинстве случаев не доходят до самых дальних краев области содержимого. Чтобы сохранить постоянный визуальный вес круглых и треугольных значков, большинство прямоугольных и квадратных значков будут выровнены по ключевой линии посередине (оранжевая область на изображении ниже).
Когда выравнивать каждую ключевую строку, определяется визуальным весом самого значка; чтобы почувствовать, когда использовать какой размер, просто нужна практика. Посмотрите на изображение квадратного макета ниже. Три упомянутых выше концентрических квадрата показаны голубым, оранжевым и светло-зеленым цветом.
Выравнивание и размер круглых и квадратных значков относительно сетки (Изображение: Скотт Льюис)Внутри 32-пиксельного квадрата вы увидите вертикальный и горизонтальный прямоугольники размером 20 × 28 пикселей. Мы свободно следуем этим прямоугольникам для значков, которые имеют горизонтальную или вертикальную ориентацию, и пытаемся сделать размеры любых значков ориентированными таким образом, чтобы они соответствовали размерам 20 × 28 пикселей этих прямоугольников.
Выравнивание и размер вертикально и горизонтально ориентированных значков относительно сетки (Изображение: Скотт Льюис)Значки, ориентированные по диагонали, выравниваются по краям круглой области содержимого, как показано на изображении ниже.
Обратите внимание, что крайние точки пилы примерно выровнены с краями круга. Это область, где вам не нужно быть точным; близко достаточно хорошо.
Выравнивание и размер диагонально ориентированного значка относительно сетки (Изображение: Скотт Льюис)Помните, что вам не нужно каждый раз точно следовать сетке и направляющим. Сетка предназначена для того, чтобы помочь вам сделать значки согласованными, но если вам нужно выбирать между созданием отличного значка и соблюдением правил, нарушайте правила — просто делайте это с осторожностью. Как сказал Хеммо де Йонге, более известный под своим прозвищем «Голландская икона»:0005
Сущность отдельного значка перевешивает важность сплоченности набора.
Начните с простых геометрических фигур
Начните свой дизайн значков, грубо набросав основные фигуры с помощью простых кругов, прямоугольников и треугольников. Даже если значок будет в основном органичным по своей природе, начните с инструментов формы в Adobe Illustrator.
Когда дело доходит до создания значков, особенно для небольших размеров на экране, небольшие различия в краях, возникающие в результате рисования от руки, сделают значок менее изысканным. Начав с базовых геометрических фигур, вы сделаете края более точными (особенно вдоль кривых) и позволит вам быстро настроить относительный масштаб элементов в дизайне, а также убедиться, что вы следуете сетке и форме.
Вот основные геометрические фигуры, два треугольника и два эллипса, из которых состоит значок корги.В цифрах: кромки, линии, углы, кривые и углы
Насколько это возможно, чтобы дизайн не выглядел слишком механическим и скучным, углы, кривые и углы должны быть математически точными. Другими словами, следите за цифрами и не пытайтесь на глаз или от руки, когда дело доходит до этих деталей. Несоответствие этих элементов может снизить качество значка.
Углы
В большинстве случаев придерживайтесь углов 45 градусов или кратных им. Сглаживание под углом 45 градусов равномерно ступенчатое (активные пиксели выровнены встык), поэтому результат четкий, а идеальная диагональ этого угла — легко распознаваемый узор, который очень нравится человеческому глазу.
Этот узнаваемый шаблон создает согласованность в наборе значков и единство в пределах одного значка. Если ваш дизайн диктует, что вы должны нарушить это правило, попробуйте сделать это пополам (22,5 градуса, 11,25 и т. д.) или кратно 15 градусам. Каждая ситуация индивидуальна, поэтому решайте в каждом конкретном случае. Преимущество использования половины угла в 45 градусов заключается в том, что пошаговое сглаживание будет по-прежнему достаточно равномерным.
Крупный план обычного сглаживания 45-градусных угловКривые
Одна из наиболее заметных областей, которая может ухудшить качество значка и может означать, что разница между профессиональным и любительским видом меньше — чем идеальные кривые. В то время как человеческий глаз может обнаруживать очень небольшие отклонения в точности, зрительно-моторная координация не всегда может обеспечить высокий уровень точности. Полагайтесь на инструменты формы и числа, чтобы создавать кривые в максимально возможной степени, а не рисовать их вручную.
Если вам нужно нарисовать кривую вручную, используйте клавишу модификатора ограничений Adobe Illustrator (или вашего векторного программного обеспечения) (клавиша Shift) или, что еще лучше, используйте VectorScribe и InkScribe от Astute Graphics для еще более точного управления кривыми Безье.
Ручное рисование углов дает плохие результаты. (Изображение: Кем Бардли)Как мы видим на изображении «до» выше, нарисованные от руки линии создают неправильные кривые, которые снижают качество дизайна.
Эти очень точные кривые были созданы с помощью инструментов Безье в Illustrator, а не от руки.Углы
Обычное значение закругленного угла (или радиуса) составляет 2 пикселя. В значке размером 32 × 32 пикселя радиус в 2 пикселя достаточно велик, чтобы его можно было четко увидеть закругленным, но не настолько, чтобы смягчить углы, чтобы изменить индивидуальность дизайна (придавая вид «пузыря»). Значение, которое вы выберете, будет зависеть от индивидуальности, которую вы хотите придать дизайну.
Если вы используете закругленные углы, это эстетическое решение, которое должно быть принято с учетом общей эстетики набора.
Точно закругленные углыНачав с геометрических фигур, мы теперь добавили 2-пиксельный контур, демонстрирующий, как инструменты формы, наряду с последовательностью деталей, таких как закругленные углы, улучшают дизайн.
Прогресс нашего переработанного значка коргиЭта значительно улучшенная версия показывает суть нового дизайна, с равномерно закругленными углами, плавными изгибами и основой для веса линий вокруг ушей.
Совершенство пикселей
Идеальное выравнивание пикселей важно при проектировании для небольших размеров. Сглаживание краев значка небольшого размера может сделать его нечетким. Пространство между линиями, которые не выровнены по пиксельной сетке, будет сглажено и будет выглядеть размытым. Выравнивание значка по пиксельной сетке сделает края идеально четкими на прямых линиях и более четкими на точных углах и кривых.
Как уже упоминалось, 45-градусные углы лучше всего подходят (после прямых линий), потому что пиксели, используемые для определения угла, накладываются стопкой или ступенчато, от конца к концу по идеальной диагонали. То же самое относится к углам и кривым: чем они точнее математически, тем четче будет сглаживание. Обратите внимание, однако, что совершенство пикселей менее важно, по крайней мере, для сглаживания, при больших размерах и на экранах с более высоким разрешением, таких как дисплеи «Retina».
Толщина лески
Когда дело доходит до толщины лески, идеально подходят две, но иногда необходимы и три. Цель состоит в том, чтобы обеспечить визуальную иерархию и разнообразие, не вводя слишком много разнообразия и, таким образом, не нарушая согласованности набора. Больше трех и сет может потерять свою связность. Преимущество 2- и 4-пиксельных весов линий заключается в том, что они кратны 2 и, следовательно, легко масштабируются вверх и вниз с одинаковыми приращениями.
В большинстве случаев избегайте очень тонких линий, особенно в глифах и плоских значках. Если вы намеренно не создаете значки в «линейном стиле», полагайтесь на свет и тень, а не на линии, чтобы определить форму.
Этот значок iPhone демонстрирует постоянную толщину линий. (Изображение: Скотт Льюис)Используйте согласованные элементы дизайна и акценты в иконах
Хеммо де Йонге из Dutch Icon выступил с блестящей речью на Icon Salon 2015, в которой он подробно рассказал об этом аспекте дизайна иконок. В своем двухлетнем проекте системы значков для правительства Нидерландов Хеммо и его партнер по дизайну сделали выемку на каждом из значков. Не у каждого значка есть выемка, но у большинства она есть. Этот вид акцента, используемый консервативно, но постоянно в наборе иконок, действительно может связать набор воедино.
Использование общих элементов дизайна (Изображение: Dutch Icon)В нашем примере с собакой мы использовали общий стилистический элемент с носом в форме сердца.
Визуальная причуда использования сердца вместо носа не только связывает иконки вместе, но и добавляет причудливый элемент и передает любовь к нашим четвероногим друзьям.
Использование общих элементов дизайна с нашими значками собак (Изображение: Кем Бардли)Во многих случаях, даже если основные аспекты набора значков изменены — например, стиль — элементы, которые создают эстетическое единство, могут по-прежнему связывать установить вместе, как показано ниже. Мы воссоздали те же три значка собак в стиле глифов, а не в плоском стиле, и они по-прежнему соответствуют эстетике.
Использование общих элементов дизайна в наших значках собак, но в другом стиле (Изображение: Кем Бардли)Экономное использование деталей и украшений
Значки должны быстро сообщать об объекте, идее или действии. Слишком много мелких деталей усложнит иконку, что может сделать ее менее узнаваемой, особенно в небольших размерах. Уровень детализации, который вы включаете в один значок или набор значков, также является важным аспектом эстетического единства и узнаваемости.
Хорошее эмпирическое правило для определения правильного уровня детализации значка или набора состоит в том, чтобы включить минимум деталей, необходимых для ясности смысла.
Минимум деталей говорит о том, что это за объект. (Изображение: Кем Бардли)В приведенной выше версии мы довольно близки к завершенному, улучшенному дизайну. Черные контуры вокруг ушей превратились в покрытые мехом коричневые области вокруг ушей. Черные линии вокруг морды исчезли, но все еще видны в 2-х пикселях над белой отметиной на морде корги. Обратите внимание, однако, что у нас все еще есть некоторые элементы из версии «до», например, простой нос. Мы рассмотрим это на следующем шаге.
Сделайте его уникальным
Количество талантливых дизайнеров, создающих высококачественные наборы иконок, многие из которых доступны бесплатно, растет с каждым днем. К сожалению, многие из этих дизайнеров слишком сильно полагаются на тенденции или стили самых популярных дизайнеров. Как творческие профессионалы, мы должны смотреть не только на индустрию иконок, но и на архитектуру, типографику, промышленный дизайн, психологию, природу и любую другую область, в которой мы можем найти вдохновение.
Поскольку в наши дни так много наборов иконок выглядят одинаково, сделать ваш дизайн уникальным становится еще более важным.
Нос корги в форме сердца делает эту иконку уникальной и индивидуальной. (Изображение: Кем Бардли)На финальном изображении «после» у нас есть уникальный штрих в форме носа в форме сердца, который добавляет нотку новизны и беззаботности дизайну.
Эти простые шаги следует рассматривать как отправную точку, а не как окончательное руководство. Не существует единого способа создания иконок. В этой статье мы изложили основы последовательного подхода к дизайну, но у других дизайнеров наверняка есть свое мнение и методы. Лучший способ стать лучшим дизайнером — это просматривать как можно больше визуальных ссылок, читать разнообразные материалы, регулярно делать наброски (куда бы вы ни пошли, носите с собой альбом для рисования) и практиковаться, практиковаться, практиковаться.
На изображении слева вверху показан исходный значок. На изображении справа показан переработанный значок, в котором реализованы принципы, изложенные в этой статье.