основные тенденции / Тренды / Сайты и биржи фриланса. Обзоры фриланс бирж. Новости. Советы. Фриланс для начинающих. FREELANCE.TODAY
Автор: Елизавета Гуменюк
Просто люблю писать, переводить и давать людям возможность читать интересный контент. И пусть я не всегда идеальна — есть к чему стремиться!!!
Элементы иконок отображаются почти везде, но иногда создаются наспех и в последний момент. Так быть не должно. Хороший дизайн иконок может оказаться характерным для проекта и добавить ему утонченности.
Давайте посмотрим, что нового и популярного в дизайне иконок нас ждет в 2021 году!
Рисованные значки
Иконки, нарисованные от руки — это не только модный стиль, они также создают более интимное, аутентичное ощущение дизайн-проекта. Стили для подобных иконок могут быть самыми разными: от простых форм и линий до полноцветных значков.
Лучшая часть рисованных стилей заключается в том, что вам не нужно рисовать их самостоятельно. В интернете уже доступно множество наборов иконок, нарисованных от руки, поэтому вы можете найти нужный стиль, даже если вы не слишком артистичны.
Иконки с глубиной
Создание глубины в дизайне иконок несколько сложно, но все больше дизайнеров используют эту тенденцию с наборами крупногабаритных иконок. Данный тренд подразумевает использование теней и геометрии для создания правильных комбинаций форм с элементом, который добавляет почти трехмерный эффект.
Такие стили довольно забавны и временами используют намеки на приходящие и уходящие тенденции, такие как удлиненные тени.
Иконки, как правило, имеют более сложную форму и лучше всего подходят для использования там, где они довольно большие или работают в сочетании с другим элементом, например текстом для логотипа.
Иконки с состояниями наведения
Когда дело доходит до иконок в Интернете, одним из самых популярных приемов является объединение набора значков таким образом, чтобы они создавали состояние наведения или анимацию.
Это может включать использование иконок с цветной заливкой, а затем отсутствие или почти создание кнопки вокруг значка.
Если вы планируете использовать какое-либо состояние при наведении курсора на значок, важно подумать об этом на этапе разработки. Не все иконки или наборы иконок оптимизированы для данной техники. Ищите полноценный набор значков с вариациями, которые значительно облегчают создание состояния наведения.
И не пытайтесь что-то усложнять. Замысловатый значок может потеряться при наведении курсора. Данный тренд лучше всего подходит для простых пар иконок.
Упрощенные иконки
Даже веб-сайты и дизайны, которые ранее использовали сложные стили в иконках, переходят на более упрощенные варианты.
Что хорошо в них, так это то, что каждая иконка изображает идентифицируемую вещь, но представление не всегда на 100% буквальное. Дизайнеры иконок могут свободно использовать формы или линии, чтобы создать формы иконок, являющиеся наиболее простой версией элемента, который он представляет.
Линейные иконки с цветными фигурами
Линейные иконки всегда являются популярным выбором, благодаря универсальному стилю, который хорошо смотрится практически с любым другим элементом дизайна. Тренд добавляет немного больше визуального интереса с появлением цвета, часто в виде круга или квадрата, за линией значка.
Цветовая форма может заполнять часть дизайна линейного значка, но чаще всего она просто плавает на заднем плане. Этот крошечный визуальный интерес может связать набор иконок вместе, подчеркнуть цвет бренда или просто освежить старый сайт.
Хитрая часть дизайна иконки — это размер элемента цветовой формы. Если она слишком большая или слишком яркая, то может затмить иконку. Если же слишком мала, то будет выглядеть как простая ошибка.
Хотя идеального размера не существует, большинство иконок, использующих эту тенденцию, сохраняют форму цвета примерно до четверти полного размера значка.
Абстрактные формы иконок
Не уверены, какой значок представляет ваш контент? Ответом может быть абстрактная форма.
Все больше дизайнеров создают иконки в абстрактном стиле для использования на веб-сайтах. Самое приятное в этом стиле — и тенденции в целом — это то, что абстрактные стили создают ощущение причудливости и удивления, которое соответствует некоторым из более крупных общих тенденций в дизайне.
Ключ к работе с абстрактными формами — убедиться, что вы не копируете что-то по ошибке, и что иконки действительно абстрактны. Для чего-то, что действительно совпадает, используйте ту же цветовую палитру для иконок и материалов бренда.
Основные цвета
Основные цветовые палитры — это смелый, яркий и привлекательный выбор для небольших элементов дизайна.
Эта тенденция дизайна иконок использует красный, синий, зеленый и желтый цвета (наряду с фиолетовым и оранжевым) для создания базового набора цветовых правил. Что заставляет этот стиль работать, так это акцент на цвете, чтобы привлечь внимание к маленьким элементам на экране. Основные цвета также будут выделяться среди всех «материальных» ярких цветов, которые доминировали в палитрах в последнее время.
Смягчите дизайн градиентами (или градиентами искусственного омбре, как в приведенном выше примере), чтобы цветовая палитра не выглядела слишком элементарной. Не перегибайте палку при работе с основными цветами. Они могут быть немного подавляющими, поэтому рассмотрите приглушенную основную палитру или монохроматическую схему.
Иконки с фоновыми значками
Некоторые трендовые иконки имеют свои собственные иконки. Серьезно!
Для более сложного использования иконок – мы не берем в расчет крошечные фавиконы — иконки можно складывать и накладывать друг на друга, чтобы создать больше художественного элемента.
Эта тенденция часто использует цвет и затенение для различения основного значка и фоновых значков. Основной значок часто является полноцветным или заполненным, в то время как фоновые значки почти всегда имеют линейный стиль и светлые цветовые палитры.
Вы можете создать этот эффект с помощью многих готовых наборов, смешивая и сопоставляя значки различными способами.
Двухцветные иконки
Еще одна тенденция дизайна иконок, основанная на популярных стилях линейных иконок — это создание двухцветных элементов.
Двухцветные иконки могут основываться на существующей цветовой палитре или фирменных цветах и сочетать практически любую другую цветовую пару. При проектировании с использованием данной тенденции ищите цветовые пары, которые будут выделяться на том фоне, на котором вы планируете их использовать.
Когда дело доходит до дизайна, выберите основной цвет для большей части иконки, а затем используйте дополнительный цвет, чтобы подчеркнуть элемент значка. Подумайте об использовании основного цвета для 70-80% дизайна и вторичного цвета для всего остального.
Это создает акцент в дизайне иконок, который поможет привлечь внимание к элементу дизайна и, надеемся, к окружающему контенту.
Иконка «Стенография»
Если вы просматриваете любой магазин приложений, то увидите много общих меток – конверты для почтовых приложений, галочки для приложений производительности, замок для приложений безопасности.
Этот значок представляет собой быстрое визуальное сообщение, которое сообщает пользователям, что делает приложение. Эта же самая стенография применяется почти повсеместно ко всему дизайну иконок. В то время как дизайнеры экспериментируют с иконами в своем собственном стиле, есть склонность использовать иконки для определенного смысла.
И это хорошо. Значок должен быть легко виден и понятен с первого взгляда. Он должен помочь пользователям понять, что они должны делать и как они должны взаимодействовать с дизайном. Это обычное сокращение значков — хорошая эволюция того, как нужно правильно делать.
Яркий цвет
Выбор ярких цветов имеет большое значение во всех аспектах дизайна.
Цвет используется несколькими различными способами, когда речь заходит о тенденции дизайна иконок:
- В качестве фона с белым или черным значком в линейном стиле
- Для полноцветных элементов иконок с более реалистичным внешним видом
- Для элементов иконок с более плоским, градиентным или супер ярким дизайном
Популярные цвета в ярком семействе включают желтый, синий, зеленый и пурпурный. Эти цвета, как правило, находятся на яркой стороне, и создание цветовой палитры с тремя-пятью оттенками для набора иконок очень популярно.
Не знаете, с чего начать? Материальная палитра демонстрирует цвета, которые являются большой частью тенденции дизайна цветных иконок.
Иконки в логотипах
Обратите внимание, сколько логотипов имеют иконки. Как только вы начнете думать об этом, не заметить всех этих маленьких значков в дизайне логотипов будет трудно.
Что хорошего в иконе в логотипе, так это то, что она хорошо работает с названием бренда. Подумайте о приведенном выше примере Spotify. Несмотря на то, что музыкальный провайдер существует не так уж долго (в рамках брендов), круг с тремя линиями весьма узнаваем.
Иконка работает в цвете и без, а главное — может быть представлена отдельно или с надписью. Эта универсальность позволяет легко понять, почему иконки являются популярным элементом в дизайне логотипов.
Круги
Круги — одна из самых гармоничных форм. А когда дело доходит до дизайна иконок, они довольно популярны. От значков, содержащихся внутри сферы, до кругов внутри объектов, создание дизайна иконки с помощью кругов может вызвать у пользователей правильное впечатление.
Отчасти влияние круга на дизайн иконок может быть связано с некоторыми рекомендациями, изложенными Google в отношении Material Design. Все эти круглые кнопки идеально подходят для нажатия на мобильных телефонах. Та же философия применима и к дизайну иконок.
(Подумайте, как часто значок является элементом, который можно коснуться или щелкнуть.)
Часть, которая может быть небольшой хитростью в этой тенденции — это наложение кругов во всех местах, где используются другие формы. Значки приложений обычно квадратные, а профили в социальных сетях круглые (и квадратные).
При создании круглого значка убедитесь, что содержание дизайна иконки легко понять при небольших размерах, потому что вы должны часто сжимать его, чтобы он поместился в других местах.
Дизайн иконок в линейном стиле
Иконки в линейном стиле, похоже, являются тенденцией, которая никогда не устареет.
Отчасти причина в том, что этот стиль иконок может работать практически в любом месте на любом типе фона. Многие из популярных загружаемых пакетов иконок часто включают дизайн в линейном стиле из-за этой универсальности.
Это легко увидеть в приведенном выше примере. Каждый значок легко увидеть и понять при практически любом размере.
Простые элементы и представления
Как и большинство других тенденций дизайна в 2021 году, простота также является частью дизайна иконок. Простые формы и география объединяются, чтобы создать почти сверх упрощенные представления для иконок.
В результате получается довольно искусный дизайн, который заставляет пользователей смотреть.
В приведенном выше примере с использованием иконок продуктов питания каждый значок использует общую нить круга в значке. Это может быть общая форма самой иконки или часть дизайна. Такая форма соединяет каждый значок друг с другом в проекте.
Иконки с градиентами
Тенденция градиентного цвета, ставшая одной из доминирующих тем 2019 года, также является фактором в дизайне иконок. От простых градиентов в линейных штрихах (например, в приведенном выше примере) до полной градиентной окраски и белых значков на градиентном фоне эта цветовая схема пользуется популярностью.
Это может быть то, что так привлекательно в использовании градиентов в иконках (и в целом) – существует так много различных способов использования тренда.
Вы можете добавить градиент и при этом не получить проект, который выглядел бы как что-то еще.
Фокус на простой раскраске
Дизайнеры иконок также придерживаются противоположного подхода к цвету и простых, более ограниченных, более базовых цветовых палитр для этих небольших элементов дизайна.
Использование ограниченной палитры — отличная идея. При таком маленьком дизайне слишком много цвета или деталей может быстро переполнить пространство и вызывать утомление глаз.
Вы же не хотите, чтобы пользователи думали о том, что обозначит иконка или конкретный цвет. Ограничение количества деталей — включая сложную раскраску — может сделать каждую отдельную иконку более легкой для понимания. Это особенно важно для иконок, которые будут использоваться в самых маленьких размерах.
Иконки в стиле приложений
Одна из причин, по которой иконки так сильно выросли в популярности, заключается в том, что мы уже разрабатываем их практически для всего.
От значков самих приложений до значков в подобном стиле для фавиконов или значков рабочего стола. Этот стиль присутствует практически везде.
Иконки в стиле приложений имеют свой собственный стиль, который включает в себя:
- Квадратная форма
- Закругленные края
- Цветной фон (обычно один цвет)
- Простая форма внутри значка
- Большой контраст между цветом значка и фона
- Ни текста, ни надписей
Толстые, равномерные штрихи
Популярны не только линейные значки, но и значки с толстыми штрихами.
Разработанные часто для одноцветных приложений, эти значки как правило используются в белом или черном цвете поверх цветных или фотофонов.
Значки с толстыми, равномерными штрихами чаще всего используются сами по себе, например, значок корзины или значок контакта. При этом их редко можно увидеть в коллекции иконок.
Плоские иконки остаются популярными
Хотя большая часть пристального внимания к плоскому дизайну испарилась, дизайн иконок все еще довольно плоский (или, по крайней мере, почти плоский).
Это, вероятно, связано с супер-простой природой плоского дизайна и идеей, что этот внешний вид может довольно легко интегрироваться с рядом других стилей.
Даже глядя на некоторые примеры дизайна иконок и тенденции, представленные здесь, вы увидите, что многие из них плоские. (Например, иконки в линейном стиле почти всегда плоские.)
Иконки-эмодзи
Эмодзи почти стали новым языком — более визуальной формой общения, которая становится все более общепринятой.
Дизайн иконок также приобретает характер эмодзи. Эти значки можно идентифицировать по форме головы человека или существа. (Значки эмодзи в стиле Звездных войн выше — отличный пример того, как весело провести время с дизайном иконок.)
Этот стиль может отлично работать для страницы контактов или для представления людей или персонажей в дизайне.
Как создать хорошую иконку
Создание хорошей иконки или набора иконок — это больше, чем просто переход к некоторым из последних тенденций в дизайне иконок.
Из-за небольшого размера иконок внимание к деталям и точность являются важной частью процесса проектирования.
Простые правила все еще остаются верными для дизайна иконок в 2021 году. Соедините эти рекомендации с некоторыми из трендовых идей выше, чтобы создать что-то, что вам понравится:
- Начните с сетки
- Создавайте с геометрией
- Создайте уникальную форму
- Оставьте иконкам много места
- Придерживайтесь цветов своего бренда
- Будьте последовательны
- Создавайте из расчета на самый маленький размер, который вам нужен
- Не украшайте слишком
Вывод
Иконки — это полезный инструмент дизайна. От использования в качестве значков приложений до знаков веб-сайта и фавиконов, которые могут быть использованы в логотипе или во всем дизайн-проекте, иконки – это элемент, который останется надолго.
Подходите к дизайну иконок так же, как и к любому другому проекту, но при этом старайтесь больше думать о простоте и размере.
Иконки созданы для быстрого просмотра и часто имеют небольшой размер. Это может сильно повлиять на дизайн.
Всем успешной работы и творчества!
Источник
Дизайн система: Иконки / Хабр
Подготовка иконок к работе в дизайн системе
Кто я и почему об этом пишу?
Привет, меня зовут Андрей Насонов, я UI/UX дизайнер работаю руководителем дизайн отдела в компании которая создаёт веб-сервисы и помогает компаниям из разных отраслей масштабировать свой бизнес. Я занимаюсь дизайном с 2008 года, начинал как графический дизайнер, но с 2015 года работаю веб дизайнером. Мне интересна разработка сервисного дизайна, проектирование дизайн систем, и автоматизация дизайн и бизнес процессов.
В этой серии статей я хотел бы поделиться своим опытом построения дизайн-систем и предложить несколько идей по автоматизации. В первой статье мы поговорим на довольно простую, но важную тему — иконки. Поехали!
Помещайте иконки во фреймы
Поскольку все иконки разного размера в силу своих геометрических особенностей, все они должны быть помещены во фреймы одинакового размера.
Допустим, у нас три иконки: 22x15px, 18x20px и 10x5px. Каждая из них должна быть во фрейме 24x24px.
Оставлять иконки без фрейма нельзяВсегда помещайте иконки во фреймЭкспортировать иконки нужно также во фрейме.
Важно! Экспортировать нужно именно иконку во фрейме, а не слой иконки. После чего помещать ее уже в контейнер 24x24px.
Причем, важно делать именно в такой последовательности, поскольку дизайнер зачастую выравнивает иконку изнутри фрейма по визуальному центру, а не по геометрическому. Разработчик же зачастую выравнивает иконку по геометрическому центру не замечая разницы.
Иконка выровнена по фактическому центру. Отступы: слева и справа по 10px. Но из-за особенностей формы иконки возникает ощущение, что она сдвинута влевоИконка выровнена по визуальному центру. Отступы: слева 12px, справа 8px. Иконка специально сдвинута вправо, чтобы визуально казалось, что иконка располагается по центруКомпонент из фрейма с иконкой
Создайте компонент из фрейма с иконкой.
Это поможет вам быстро заменить одну иконку на другую, использовав функцию «Instance».
Чтобы замена через инстанс сработала, компоненты иконок должны находиться в одном фрейме (об этом дальше).
Замена иконок с помощью функции «Instance»Иконки лучше всего именовать на английском. Если вы скачали иконку, а у нее уже есть название на английском — не переименовывайте ее.
Так вы быстрее запомните название иконок и будете легко находить на тех ресурсах, где их берете.
Заодно и новые слова на английском выучите если у вас с ним беда, как и у меня. 😄
Хранение иконок
Статья 224, лишение свободы…….. ладно 😄
Один проект может содержать иконки разных размеров. Например, стандартные 24x24px, 16x16px или 20x20px для элементов меньшего размера.
Основные иконки 24x24px мы храним в артборде “Icons 24”. Остальные иконки размер которых больше или меньше 24px храним в “Other Icons”. Обычно их не очень много.
Артборд “Trash Icons” нужен чтобы хранить в нем различные варианты иконок.
Например, вы подобрали или нарисовали три иконки чата, выбрали из них одну и поместили ее в артборд “Icons 24”, а другие два варианта иконки перемещаете в артборд “Trash Icons”. На случай, если вы передумаете и захотите изменить свой выбор вам не придется искать их снова.
Фон и цвет
Чтобы при выделении компонентов с иконкой в настройках Fill не отображались лишние цвета — удалите у компонента белый фон, даже если он отключен.
Так же рекомендую сразу применять к иконке стиль цвета, чтобы при дальнейшей работе было удобнее менять цвет иконки.
Удаление фона и применение стиля цветаСтиль цвета нужен чтобы при замене через инстанс вы не забывали перекрашивать иконку в нужный цвет.
Советую выбрать броский цвет, который вы очень редко используете на проекте. Оставляя иконку черной или серой есть вероятность что вы будете забывать ее перекрашивать. Я выбрал коричневый.
Яркий цвет иконки четко дает понять, что после замены ее нужно перекрасить в нужный стильКонстрейнтс
Настройте у слоя с иконкой constraints по вертикальному и горизонтальному центру.
Это нужно на случай, если вы захотите уменьшить или увеличить компонент иконки, но так чтобы сама иконка не меняла свой размер.
Важно! Сonstraints нужно настраивать именно у слоя с иконкой, а не у всего компонента.
Настройка constraintsМассовые действия с иконками
Все вышеописанные действия можно проделать с несколькими иконками сразу.
Для того, чтобы выбрать слои с иконкой сразу во всех компонентах иконок — выберите все компоненты иконок и нажмите Enter.
Мусор в иконках
Во фрейме компонента, кроме иконки ничего не должно быть. Не забывайте удалять все скрытые слои из фрейма с иконкой.
Например, Material Design иконки имеют белый фоновый слой.
В итоге компонент иконки должен содержать только один слой (слой с иконкой). Но могут быть и исключения, например, двухцветные иконки.
В случае с одноцветной иконкой — все элементы должны быть объединены в один слой.
После того, как вы объединили слои, не забывайте применять “Outline Storke” к объединенной фигуре.
Все это нужно для того, чтобы иконки меньше весили, SVG код был гораздо меньше и понятней, а у разработчиков не возникли проблемы с перекрашиванием иконок.
Так выглядит SVG код иконки когда компонент иконки имеет несколько слоев и они не объединены в один. Код получился очень длинным и имеет целых 7 параметров “Fill” для разных элементов иконки. Так делать нельзя.
Размер файла иконки 1318 байтА так выглядит SVG код иконки когда все слои объединены. Код гораздо меньше и имеет всего 2 параметра “Fill”. Один для фона контейнера, другой для цвета иконки. Так делать можно.
Размер файла иконки 803 байтаПосле экспорта иконки вы можете ее дополнительно сжать используя этот сайт.
После сжатия код иконки стал еще меньше, но внешний вид иконки не изменился.
Размер файла иконки 588 байтРесурсы с иконками
Ну и напоследок несколько ресурсов откуда можно брать иконки.
Material Design Icons Community
Огромный набор иконок, который содержит официальные иконки Material Design, а также иконки созданные сообществом по гайдам Material Design.
На мой взгляд, это лучший набор на данный момент. Он покрывает 90% моих потребностей.
В Figma есть специальный плагин.
Material Design Icons
Официальные иконки Material Design. К сожалению, на этом сайте иконки имеют довольно странные тэги. Из-за этого некоторые иконки нереально найти через поиск. Да и файл иконки содержит в себе лишний слой с белым фоном, который на мой взгляд, не нужен.
Плагин в Figma.
Boxicons
Есть хорошие альтернативы иконкам из предыдущих ресурсов. Но не все иконки pixel perfect. Так же имеется плагин в Figma.
Feathericon
Хороший набор качественных outline иконок. Иконки сделаны контуром с обводкой, что позволяет масштабировать и изменять толщину линий самих иконок.
Плагин в Figma
IBM icons
Иконки от IBM созданные самой компанией и сообществом.
Remixicon
Большое количество хороших Fill и Outline иконок
Спасибо
А если хотите узнать больше фишек — подписывайтесь, чтобы не пропустить новые статьи.
дизайнов, тем, шаблонов и графических элементов Icon Design, загружаемых на Dribbble
Посмотреть HeatWatch
Тепловые часы
Посмотреть 🕊
Посмотреть HeatWatch
Тепловые часы
Посмотреть ☕️
Посмотреть логотипы
Посмотреть жизнь⚡️
Жизнь⚡️
Посмотреть БОКСИ
Посмотреть БОКСИ
Посмотреть брендинг nuutri
брендинг nuutri
Посмотреть Lighttwist — дизайн бренда
Lighttwist — фирменный дизайн
Посмотреть BorderLeap 🐸
BorderLeap 🐸
Посмотреть коллекцию иконок
Коллекция иконок
Посмотреть ClickUp
ClickUp
Посмотреть ⟁
Посмотреть набор значков телефона
Набор значков телефона
Посмотреть HeatWatch
Тепловые часы
Посмотреть SevenPace
СевенПейс
Просмотр значка погоды
значок погоды
Просмотр значков дизайна и разработки
Иконки дизайна и разработки
Посмотреть RemNote
RemNote
Посмотреть 🤭
Посмотреть галерею значков
Иконки галереи
Просмотр GiB: Игровая аналитика
ГиБ: игровая аналитика
Посмотреть набор иконок
Набор иконок
Зарегистрируйтесь, чтобы продолжить или войдите в систему
Загрузка еще…
Полное руководство по иконографии
Иконки являются важной частью любой системы дизайна или взаимодействия с продуктом.
Иконки помогают нам быстро ориентироваться. Они не зависят от языка. И самое главное: они действительно крошечные, поэтому не занимают много места. Иконки являются фундаментальной частью хорошей системы дизайна и очень полезны для маркетинговых материалов. Они являются фундаментальным строительным блоком иллюстрированного контента, но они также являются высокотехнологичными.
Немногие любят создавать иконки, и еще меньше тех, кто в этом преуспевает. Я написал это руководство, чтобы помочь вам стать одним из таких людей.
Независимо от того, являетесь ли вы экспертом по дизайн-системам, иллюстратором или продуктовым дизайнером, это руководство поможет вам научиться создавать значки, как привести их в соответствие с вашим брендом и внедрить их в вашу систему дизайна. Начнем с основ.
Основные элементы значка
Размер
Согласованность является ключом к значкам, и все ваши значки должны быть одинакового размера при их создании. Во-первых, вам нужно убедиться, что вы знаете, как построена ваша сетка (кратно 8 или 10?).
Оттуда ваш базовый размер значка должен напрямую относиться к этому. Итак, если у вас есть сетка, основанная на 8-ках, вы бы хотели строить на 16, 24 или 32.
Выберите общий размер для создания всех ваших значков, а затем позвольте вашим инженерам масштабировать их до других размеров, которые могут понадобиться другим дизайнерам. Вы не хотите создавать одну и ту же иконку снова и снова во множестве размеров.
Когда вам нужна сложность глифа, тогда вы хотите начать добавлять размеры. У вас может быть базовая иконка продукта размером 24 пикселя, но маркетинговые значки размером 80 пикселей из-за огромной разницы в использовании. Вы захотите добавить детали для этих больших размеров.
Значок магазина с размерами 24 x 24, 40 x 40 и 80 x 80 При создании одного и того же значка разных размеров я предпочитаю начинать с самого большого размера и постепенно уменьшать его. Мне гораздо проще удалить детали и упростить, чем добавлять по мере продвижения. Это также дает вам ощущение объекта, прежде чем вы действительно минимизируете его.
Цвет
Для значков продуктов используйте 1 цвет: черный. Что-то большее, чем это, и ваши компоненты станут слишком сложными и трудными для использования другими дизайнерами. Для маркетинговых иконок вы можете использовать два цвета, если это важная часть вашего бренда, но лично я считаю, что иконки должны быть одного цвета. Все, что имеет 3 или более цветов, является иллюстрацией, а не значком.
Слева: это точечный рисунок. Посередине: иконка с перспективой. Справа: плоский значок.Сетки
Сетка пикселей — это основная сетка, использующая наименьшее приращение: пиксель. При создании значков вы всегда хотите выровнять объекты по пиксельной сетке, особенно по прямым линиям. Но вы можете создавать другие фигуры на пиксельной сетке (и если вы используете Figma, вы уже делаете это автоматически).
Вы хотите строить вещи на пиксельной сетке не только потому, что это будет лучше отображать, но и потому, что это сделает вашу жизнь проще. Равномерное размещение элементов намного проще, когда вы используете сетку.
Это поможет вам оставаться в соответствии с вашим размещением, и в целом ваши значки будут выглядеть лучше. Вы можете легко увидеть в Figma разницу между чем-то, что находится «в пикселях» и выключено.
Мне нравится строить себе сетку перед тем, как начать. Вот мои настройки в Figma.
Отлично! Теперь, когда вы освоили пиксельную сетку, вам нужно узнать об оптической сетке. Оптическая сетка помогает нам понять, где находится центр масс значка, а также насколько он велик для восприятия человеческим глазом. Круги и изогнутые объекты занимают меньше визуального пространства, чем квадраты. Лучше всего поместить значки в контейнер фиксированного размера, чтобы при экспорте все они были одинакового размера. Добавление этого встроенного дополнения поддерживает оптическое/воспринимаемое взвешивание без дополнительной суеты в разработке позже.
При построении оптической сетки я предпочитаю отступы по краям, равные толщине обводки, или, возможно, двойную, если я использую обводку толщиной 1 пиксель.
В приведенных ниже примерах вы можете увидеть, как разные фигуры идут к разным краям сетки.
Визуально доминирующий объект должен быть центрирован как по вертикали, так и по горизонтали.
Доминирующий объект (прямоугольник) расположен по центруЕсли вы используете пиксельную сетку и пользуетесь преимуществами оптической сетки, вы будете впереди всех.
Обводки и заливки
Помните, я говорил, что ключевым фактором является согласованность? Я говорю это снова. Ничто не беспокоит меня больше, чем две иконки рядом, одна из которых заполнена, а другая обведена. Очень важно убедиться, что все ваши значки имеют одинаковый стиль. Например, у вас могут быть варианты использования заливки, чтобы показать, что что-то выбрано, но вы определенно хотите создать набор с одним стилем и, возможно, создать другой вариант.
Как правило, закрашенные значки имеют более высокую узнаваемость. Значки со штрихами дают вам возможность создавать мелкие детали. При выборе более подходящего стиля вы также должны учитывать свой общий бренд.
Если вы собираетесь создавать значки с обводкой, все обводки должны быть одинаковой толщины. Я также рекомендую, чтобы расстояние между мазками было не тоньше, чем вес вашего мазка.
Расстояние между штрихами должно по возможности отражать толщину штрихаВозможно, у вас есть набор иконок, который соответствует одному стилю, но не соответствует другому. При создании заполненных версий значков с обводкой вы захотите посмотреть, как можно упростить работу с линиями. В идеале заполненные значки похожи на тени, а не на перевернутые значки на основе линий. Создание обведенных версий заполненных иконок включает в себя определение толщины обводки, которую вы можете вписать в свое пространство, и какие детали вы могли бы добавить, сохраняя ясность.
Я не рекомендую делать значки с обводкой размером менее 10 пикселей (при толщине обводки 1-2 пикселя). Их будет очень трудно разобрать.
Выбор стиля
Ваши значки являются отражением вашего бренда. Приступая к этой работе, важно понимать основные ценности вашего бренда и то, как они проявляются визуально.
Вот некоторые прилагательные, о которых следует подумать: жесткий/мягкий, случайный/официальный, роскошный/экономный и буквальный/абстрактный. У вас может быть стиль иллюстрации, на который вы можете сослаться.
Некоторые значки кажутся простыми (X, гамбургер-меню, шеврон), но эти значки требуют, чтобы вы уже поняли основные принципы вашей системы значков. Я рекомендую начинать с более сложных иконок (то есть более сложных), чтобы помочь вам определить, какие правила вы хотите внедрить. Таким образом, как только вы начнете создавать более простые значки, это будет легко.
5 значков продуктов в 5 стилях — обратите внимание, как небольшие различия делают каждый набор единым и цельным.Вот подборка продуктовых и маркетинговых значков, отражающих голос и тон визуального бренда компании:
- Uber
- Apple
- Airbnb
- Square
Рисование иконок
Геометрические фигуры
формы моих икон. Прямоугольники, квадраты и круги — отличные отправные точки для создания более совершенных значков.
При рисовании геометрических форм, если вам нужно создать сложные многоугольники, вы можете начать с квадрата или прямоугольника или использовать инструмент «Перо», чтобы перейти от точки к пикселю. При этом очень важно иметь четкую сетку, чтобы вы могли видеть, куда идут эти точки.
Когда вам нужно нарисовать угловых геометрических фигуры , я не рекомендую просто использовать прямоугольник и вращать его. Вместо этого используйте пиксельную сетку для рисования угловых прямоугольников.
Слева: повернутый прямоугольник (якоря не совпадают с сеткой). Справа: нарисованный от руки прямоугольник (обеспечивает совпадение точек с сеткой).Естественные формы
Рисовать более естественные формы в Figma очень просто. Вы можете либо использовать традиционный метод рисования кривых точка за точкой, либо использовать превосходный инструмент Figma для закругления углов точки.
Мне нравится рисовать все точки в виде прямых линий, а затем скруглять углы с помощью инструмента «Радиус угла». Этот инструмент очень полезен для создания органических, сбалансированных форм. Поскольку углы Figma настраиваются автоматически, вы можете перемещаться по этим точкам, и углы будут подстраиваться под вас.
Углы/соединения
Существует несколько вариантов углов: скошенные (квадратные), скошенные и закругленные. Я настоятельно рекомендую вам придерживаться одного стиля для вашего набора иконок.
Радиус угла
При использовании для скругления квадратов и прямоугольников необходимо убедиться, что все углы имеют одинаковый радиус. При создании концентрических форм вам нужно настроить радиусы углов, чтобы создать идеальные концентрические формы. Внутренние формы будут иметь меньший радиус, чем внешние формы.
Большой образец концентрических радиусов в этом портфеле Любая промежуточная точка на пути может быть скруглена с помощью свойства Угловой радиус в Инспекторе.
Если вы выбираете весь путь, он скругляет все углы в одинаковой степени. Если вы перейдете в режим редактирования, вы можете выбрать отдельные точки и округлить их по отдельности.
Заглушки
Заглушки могут быть круглыми или квадратными. Придерживайтесь одного варианта.
Объекты с заливкой
Если для ваших значков требуются объекты с заливкой внутри их основных форм (например, окно в доме), в идеале вам следует сохранить заштрихованные формы в заштрихованных значках. И залитые объекты залитыми значками. Когда у вас нет места для фигур с обводкой, вы хотите использовать фигуры с заливкой, которые пропорциональны вашим обводкам. Например, если у вас толщина обводки 2 пикселя, вам не нужны заполненные фигуры размером более 4×4 пикселя.
Метафора
Метафоры играют важную роль в иконах — мы используем их все время, даже не задумываясь. Значок дома означает домашнюю страницу. Насекомое означает ошибку. При масштабировании значков для создания уменьшенных версий мне нравится помнить о метафоре, которую я использую для передачи сообщения значка.
Перспектива
Использовать перспективу в значках сложно — их размер усложняет задачу, поскольку рисование с перспективой занимает дополнительное место. Если вы хотите использовать перспективу, либо используйте ее широко и сделайте ее ключевой частью вашей системы, либо используйте ее экономно, когда она помогает повысить разборчивость и ясность.
Верхний ряд: плоский. Нижний ряд: перспектива.Введите (избегайте!)
По возможности избегайте ввода значков. Иконки должны быть глобальными. Если вам нужен шрифт (например, символы валюты), нарисуйте его сами, а не используйте шрифт.
Подсказки
Логические операции
Логические операции объединяют любой набор слоев формы с помощью одной из четырех формул: объединение, вычитание, пересечение и исключение.
Этот инструмент живой и удивительный. Это отличный способ сделать ваши значки более редактируемыми. Вместо того, чтобы разрезать пути, вы можете использовать функцию объединения. Не хотите находить пересечение фигур вручную? Попробуйте вычесть.
Логические группы обрабатываются как единый слой формы, имеют общие свойства заливки и обводки и могут быть объединены с другими логическими группами с помощью последующих логических операций.
- Union : Union объединяет выбранные фигуры в логическую группу. Если объекты перекрываются, внешний путь новой фигуры состоит из комбинации путей ее подслоев за вычетом любых перекрывающихся сегментов. Затем штрих будет применен к этому внешнему пути, игнорируя любые сегменты пути, которые перекрывают друг друга.
- Вычитание : Вычитание противоположно объединению. Вычитание удаляет площадь фигуры или набора фигур из базовой фигуры. Сплошным является только нижний слой формы, остальные вычитаются из него.
- Пересечение : Пересечение создает логическую группу, форма которой состоит только из перекрывающихся частей ее подслоев.
- Исключить : Исключить — это противоположность пересечения. Exclude показывает только области своих подслоев, которые не перекрываются.
Когда я закончу со значком, мне нравится создавать объединение (если это уже не один большой путь), чтобы, когда будущие дизайнеры настраивают цвет, было легко просто изменить одно свойство (значок fill) вместо заливок и штрихов.
Векторная сеть
Векторные сети — одна из самых уникальных функций Figma. Большинство инструментов пера рисуют пути в виде петли с определенным направлением, всегда желая воссоединиться с исходной точкой. Векторные сети не имеют направления и могут разветвляться в разных направлениях, не требуя создания отдельного объекта пути. Затем сложные объекты можно создавать внутри одного и того же объекта и с теми же свойствами намного быстрее, чем их можно было бы рисовать с помощью традиционных инструментов векторного контура.
Чтобы узнать больше об этом, посетите эту статью.
Обеспечение доступа к вашему набору значков для остальной части вашей команды зависит от организации, управления активами и информированности.
Организация
Начнем с именования файлов. Ваши значки должны быть названы на основе того, что они показывают, а не того, что они представляют. Например, значок секундомера должен называться секундомер , а не скорость . Лампочка должна называться лампочка , а не идея . Вы хотите, чтобы люди сразу поняли, что такое значок, а не то, что он сообщает на более концептуальном уровне. Короткие имена тоже лучше. Если вам нужно несколько слов, используйте тире для их разделения.
Для таких значков может потребоваться несколько слов, например, поварская шапка. Со временем вы превратите все свои значки в компоненты. В Figma компоненты работают точно так же, как фреймы, с тем отличием, что дубликаты компонента создают новые экземпляры, а не копии.
Это означает, что у вас может быть гигантская библиотека всех ваших значков, и когда вам нужно ее использовать, вы создаете экземпляр из библиотеки. Если кто-то внесет изменения в оригинал, ваши значки останутся актуальными. Вы можете искать эти активы, поэтому вы можете добавить информацию, доступную для поиска. Но вместо того, чтобы помещать его в имя файла, есть альтернатива. В Figma есть поле описания компонента, которое позволяет добавлять теги и ключевые слова. Это отличное место для добавления всех тех фраз, которые люди могут искать в вашей библиотеке, без создания безумно длинных и сложных имен. Вот куда идут эти ценности продукта!
Чтобы помочь вашим инженерам, вы можете использовать как фреймы, так и страницы. Страницы представляют собой самую внешнюю группу (поэтому мне нравится сортировать их по размеру). Затем фреймы помогают сузить содержимое, как в примере ниже. Система именования этого значка выглядит следующим образом: размер > категория > имя файла .
Когда у вас есть один и тот же значок с вариантами, вот как мне нравится с ними обращаться.
Различные размеры : Используйте разные страницы, поскольку вы редко будете переключаться напрямую с одного экземпляра на другой.
Заливка и обводка : Если вы используете оба стиля, используйте косую черту после имени значка, чтобы указать значки с заливкой или обводкой.
Слева: кофе/поглаживание. Справа: кофе/заполненныйСкорректированное изображение : Если у вас есть значок с визуальным вариантом (например, несколько вариантов валюты), вы также можете использовать название, чтобы различать его, используя тот же метод, что и для значков с заливкой и обводкой.
Первоначальный значок слева был бы «щитом». Затем слева направо: «щит/доллар», «щит/евро», «щит/фунт», «щит/иена», «щит/плюс» 9.0216 Управление вашими активами Когда вы закончите со своими значками, вы хотите, чтобы они были как можно более чистыми для наилучшего возможного экспорта.
Используйте логические операции, чтобы упростить себе работу (помните нашего друга Union?). Избегайте лишних линий или форм. Убедитесь, что все ваши линии попадают в кадр. Абсолютно стоит попросить другого человека просмотреть все ваши значки и дважды проверить их аккуратность.
Figma великолепна, потому что поощряет сотрудничество и прозрачность. Что касается значков, может возникнуть соблазн предоставить всем вашим дизайнерам доступ к редактированию, чтобы они могли добавлять новые значки. Я рекомендую собирать значки по отдельности, проверять их и добавлять самостоятельно, когда они соответствуют стандарту. Предоставления вашим коллегам доступа к просмотру (и доступа к вашей библиотеке) достаточно, чтобы вовлечь их в то, что вы делаете, не заканчивая библиотекой и файлом cattywampus. Некоторые из ваших коллег могут захотеть создать разные версии одного и того же значка (например, в разных цветах или с разными именами). Это часто происходит, когда кто-то связывает значок с концепцией или продуктом.
Вы никогда не захотите иметь более одной версии каждой иконки в своей библиотеке. Используйте описание компонента для этих имен. Ваши коллеги-дизайнеры должны настраивать цвета значков в своих отдельных файлах, а не в главном. Поверьте мне, вам придется время от времени вносить изменения в эти значки, и вы не хотите делать это более чем в одном месте. Форматы файлов имеют ключевое значение, когда вы готовы экспортировать значки. Если вы предоставляете значки партнерам, не входящим в вашу команду дизайнеров или инженеров, вы, вероятно, предоставляете им файлы .png. Экспортируйте в 1-кратном, 2-кратном и 3-кратном увеличении для разных устройств. Для разработки и дизайна вы часто будете экспортировать файлы .svg, которые редактируются в программах для дизайна и рисуются в браузере с помощью кода при отображении онлайн в вашем приложении или на сайте. При экспорте SVG вам понадобится как можно более чистый код. Еще одна веская причина для выбора Figma — сверхминимальный экспорт SVG. Поскольку они оптимизированы, это устраняет необходимость дальнейшей оптимизации в будущем.
Прочтите эту статью, чтобы узнать больше.
Передача ваших значков в руки другим
Вы можете быть лучшим в мире дизайнером значков, но если вы не можете внедрить свои значки в свое приложение/веб-страницу/прямую почтовую программу, это не принесет никакой пользы. Прежде чем приступить к проектированию, поговорите с командой инженеров, ответственной за их внедрение в продукт. Они смогут предоставить вам информацию об инфраструктуре веб-сайта или приложения, которая будет определять некоторые из ваших вариантов, таких как вес штриха или размер. Спросите других дизайнеров, что было сделано в прошлом, чтобы убедиться, что вы не дублируете работу. Выясните у ваших PMM, какие дополнительные значки они хотели бы увидеть. Будьте дружелюбным коллегой, который просит у людей отзывов, советов и помощи. Это даст вам лучшее представление о том, что вы должны делать, чтобы вы не переделывали работу и не игнорировали ключевых арендаторов, уже выявленных другими людьми. А когда вы будете готовы к реализации вместе со своими разработчиками, попробуйте использовать API Figma для программного экспорта.
