Как рисовать векторы

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

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

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

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

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

Метафора

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

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

Сами же образы теряют первый уровень понимания, и абстрактный. Как пример возьмем

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

Но тут есть фундаментальный минус:

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

Применение

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

И не перекладывайте графические приемы иконок и рекламную иллюстрацию. Это разные вещи.

Базовые принципы и анатомия

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

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

Цвет как ключ

В базовом наборе, мы используем черный / желтый цвет. Желтый цвет используется для дополнительной фокусировки внутри иконки (Например в иконки «добавить документ» желтый плюс, подсказывает действие над документом).

У нас нет «основного цвета» в иконки. Но нужно стараться придерживаться процентного сочетания 70/30 в цветах, ошибочно будет делать иконку чисто черную / желтую или 50/50 по цветам.

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

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

Рекомендации по сетка и размерам

На данный момент в иконках 80×80 толщина 3px.

(ссылка на документ Кирилла)

Эпилог

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

• простые формы с возможностью их комбинировать и масштабировать;
• цвета 70/30% + серый в малых формах или списках;
• примитивная метафора, с низкой детализацией;
• пустой слой между элементами.

Что осталось

Сейчас нет четкого гайда по формам и закруглениям (хочется эксперементов от команды)

Не собраны иконки под все виды размеров