Важный момент для понимания как и где использовать иконографику, это ее вторичность и в первую очередь комментирование основного контента. В цепочки контента на странице иконки как графический символ занимают последнее место уступая любой другой графике.
Хочется использовать иконографику как последний способ сфокусировать пользователя на чем-то и не пытаться заменить ей: карточки, иллюстрации или фото. Нужно уметь работать с текстовым и функциональным контентом обходясь без дополнительной маркировки этого контента иконками.
Развивая старый стиль иконок в новом мы сохраняем преемственность образов старой иконографики, упрощаем формы и ставим прицел на масштабированность (размер, цвет, возможность переиспользования базовых форм в других проектах или иконках).
Важно! Обращайте внимание на то в какой среде находится иконка, частью какого она блока является и среди каких иконок она стоит. Рисуйте графику исходя от общего вида страницы, а не отдельно как «задача нарисовать корзину».
Говоря о иконках всегда стоит начинать с метафоры и образов которых они несут, старый стиль описывал прямую метфору первого уровня и изображал процессы ближе к жизни и как можно понятней с яркими деталями и излишним визуальным шумом.
Новый стиль (кроме перерисовки старых иконок) говорит на языке простых форм и очень примитивен, сложные формы не позволительная роскошь для масштабирования, и от них стоит отказываться.
Сами же образы теряют первый уровень понимания, и абстрактный. Как пример возьмем
символ перевода денег, в старом стиле это довольно детализированная иконка со стопкой купюр стрелкой и рукой получающего — это понятный образ.
Но тут есть фундаментальный минус:
Интерфейсно такая иконка слишком много берет на себя, он рассказывает историю вместо того чтобы эту роль выполнял текстовый контент или простой карточный блок. В нашем случае можно просто показать круг(монеты) и стрелку, этого будет достаточно.
Как говорилось выше иконки это маркер к основному событию и он помогает лишь сфокусироваться на особенностях происходящего на странице и не вкоем случае не является иллюстративным элементом. Не пытайтесь использовать иконки в тизерах или рекламе.
И не перекладывайте графические приемы иконок и рекламную иллюстрацию. Это разные вещи.
- желтый строук, дополнительный;
- черный строук, базовая форма;
- пустой слой.
В случаях переиспользования иконок в других проектах, возможны эксперимент с цветом и заливкой больших форм, но с сохранением «пустого слоя» (промежутка между одним объектом иконки и другим);
В базовом наборе, мы используем черный / желтый цвет. Желтый цвет используется для дополнительной фокусировки внутри иконки (Например в иконки «добавить документ» желтый плюс, подсказывает действие над документом).
У нас нет «основного цвета» в иконки. Но нужно стараться придерживаться процентного сочетания 70/30 в цветах, ошибочно будет делать иконку чисто черную / желтую или 50/50 по цветам.
Часто в малых размерах или списках важно отказаться от ярких цветов, в этих случаях можно использвать простые и нейтральные по цвету серые иконки.
Часто в малых размерах или списках важно отказаться от ярких цветов, в этих случаях можно использвать простые и нейтральные по цвету серые иконки.
На данный момент в иконках 80×80 толщина 3px.
(ссылка на документ Кирилла)
База иконок должна помочь не придумывать каждый раз новые образы, а давать возможность быстро собирать из простых форм все новые объекты и не тратить на это время, чтобы иконки оставались консистентными у разных дизайнеров соблюдайте базовые правила про которые я рассказал выше:
- простые формы с возможностью их комбинировать и масштабировать;
- цвета 70/30% + серый в малых формах или списках;
- примитивная метафора, с низкой детализацией;
- пустой слой между элементами.
Сейчас нет четкого гайда по формам и закруглениям (хочется эксперементов от команды)
Не собраны иконки под все виды размеров