Иконография бренда: система пиктограмм и её роль
Роль пиктограмм в айдентике: чем система отличается от набора иконок
Отдельная иконка решает локальную задачу — обозначить действие «поделиться» или раздел «настройки». Система пиктограмм решает задачу другого порядка: она кодирует смыслы бренда в графической форме и делает их узнаваемыми независимо от контекста. Это семиотический слой — набор знаков, которые пользователь считывает быстрее текста и запоминает лучше фотографий.
Разница проявляется в производственной логике. Иконки рисуют по мере надобности, и через два года у компании накапливается зоопарк несовместимых стилей. Систему проектируют один раз — с сеткой, толщиной линии, характером скруглений — и дальше она масштабируется на сотни пиктограмм без потери идентичности. Это и экономически выгоднее: пиктограммы дешевле в производстве, чем фотографии и иллюстрации, большой пак рисуется единожды и переиспользуется на всех носителях.
Как связать иконографию с логотипом и шрифтом
Главная ошибка — проектировать иконки в вакууме, без привязки к остальной айдентике. Профессиональный подход строится на модульной математике, где параметры иконок выводятся из параметров типографики, а не придумываются отдельно.
- Толщина линии равна толщине буквы. В системе Selectel действует правило: контур пиктограммы должен быть оптически равен контуру буквы фирменного шрифта. Тогда текст и иконка рядом выглядят как элементы одного алфавита, а не как чужеродные вставки.
- Толщина, привязанная к x-height. Ростелеком использует другую формулу: толщина линии иконки составляет 1/8 от x-height шрифта — высоты строчной буквы. Это даёт органическую связь иконографики с типографикой без ручной подгонки каждой пиктограммы.
- Фирменный характер скруглений. У Selectel внешние углы скругляются в четыре раза сильнее внутренних — приём, который делает иконки узнаваемыми даже без логотипа рядом, как фирменный «почерк».
Такие правила превращают иконографику из декоративного элемента в продолжение шрифтовой пары и логотипа — единую графическую ДНК.
Типы пиктограмм и когда какой применять
В брендинге принято делить иконки по функции, но реальная практика показывает, что важнее делить их по способу называния и использования — иначе команда начинает путать смысловые и формальные иконки местами.
| Тип | Когда использовать | Пример логики |
|---|---|---|
| Функциональные | Управление интерфейсом: кнопки, навигация, статусы | «Поделиться», «Настройки», «Закрыть» |
| Информирующие | Обозначение категорий, разделов, характеристик товара | Иконки тарифов, характеристик услуги |
| Имиджевые | Крупные иллюстративные иконки для лендингов, презентаций | Иконка-иллюстрация в блоке «Преимущества» |
| Single-purpose (по смыслу) | Уникальная функция, которую нельзя перепутать с другой | «Atlassian Intelligence» — названа по смыслу, не по форме |
| Multi-purpose (по форме) | Универсальные знаки, применимые в разных контекстах | «arrow right», «globe» — названы по внешнему виду |
Подход Atlassian с двухуровневой категоризацией решает конкретную проблему: команда дизайнеров не путает уникальную иконку продукта с универсальной стрелкой, которую можно вставить куда угодно. Без такого разделения система быстро разрастается дублями с разными смыслами под одинаковой формой.
Критерии качественной системы пиктограмм
Красивая на вид иконка ещё не значит, что система работает. Есть конкретные, проверяемые критерии, а не только субъективное «нравится/не нравится».
- Смысловая простота. Правило Райффайзена: иконка не должна быть сложносоставной, внутри — не больше двух объектов, без двойного смысла. Три элемента внутри одного знака — это уже каша, которую пользователь не читает мгновенно.
- Оптическая плотность. В Selectel стандарт сетки — 48×48px, и иконка стремится занять всю площадь, приближаясь по форме к квадрату. Это даёт равномерную визуальную массу набора: одни знаки не выглядят «тяжелее» других.
- Читаемость при масштабировании. Система должна сохранять смысл на 16px и на 32px без потери деталей до состояния пятна.
- Согласованность с типографикой. Толщина линии и скругления выведены из параметров шрифта, а не подобраны на глаз.
- Однозначность именования. Каждая иконка имеет одно закреплённое название и не путается с похожими по форме знаками.
Внедрение системы во все точки контакта
Спроектировать систему — половина работы. Реальные проблемы начинаются на этапе внедрения, когда иконография попадает в веб, приложение, печатную продукцию и навигацию одновременно, и там начинают вылезать конфликты.
Проблема масштабирования
При изменении размера иконки меняется не только габарит, но и структура. BBC на своих 180 иконках в трёх размерах столкнулась с тем, что для мелких размеров пришлось полностью переделать пиктограммы: детали, читаемые на 32px, превращаются в грязное пятно на 16px. Если система изначально не предусматривает отдельную версию для мелкого масштаба — при внедрении на мобильных экранах и в навигации бренд теряет узнаваемость.
Конфликты метафор
Одна и та же форма может читаться по-разному в разных культурных и продуктовых контекстах: «конверт» — это письмо или почтовое приложение, «шестерёнка» — настройки или технический раздел. При масштабировании системы на новые продукты команда обязана прогонять метафоры через тест на однозначность — иначе иконка начинает конфликтовать сама с собой в разных разделах продукта.
Версионирование
Система пиктограмм живёт годами и обновляется вместе с продуктом. Без единого репозитория с версиями и правилами наименования (по типу Atlassian с single/multi-purpose) через пару релизов появляются дубли и устаревшие варианты, которые дизайнеры продолжают использовать по инерции. Практический вывод: внедрение системы требует не только гайдлайна, но и библиотеки-источника правды (design system, Figma-библиотека), к которой обращаются все команды — от печати до мобильной разработки.
Разница проявляется в производственной логике. Иконки рисуют по мере надобности, и через два года у компании накапливается зоопарк несовместимых стилей. Систему проектируют один раз — с сеткой, толщиной линии, характером скруглений — и дальше она масштабируется на сотни пиктограмм без потери идентичности. Это и экономически выгоднее: пиктограммы дешевле в производстве, чем фотографии и иллюстрации, большой пак рисуется единожды и переиспользуется на всех носителях.
Как связать иконографию с логотипом и шрифтом
Главная ошибка — проектировать иконки в вакууме, без привязки к остальной айдентике. Профессиональный подход строится на модульной математике, где параметры иконок выводятся из параметров типографики, а не придумываются отдельно.
- Толщина линии равна толщине буквы. В системе Selectel действует правило: контур пиктограммы должен быть оптически равен контуру буквы фирменного шрифта. Тогда текст и иконка рядом выглядят как элементы одного алфавита, а не как чужеродные вставки.
- Толщина, привязанная к x-height. Ростелеком использует другую формулу: толщина линии иконки составляет 1/8 от x-height шрифта — высоты строчной буквы. Это даёт органическую связь иконографики с типографикой без ручной подгонки каждой пиктограммы.
- Фирменный характер скруглений. У Selectel внешние углы скругляются в четыре раза сильнее внутренних — приём, который делает иконки узнаваемыми даже без логотипа рядом, как фирменный «почерк».
Такие правила превращают иконографику из декоративного элемента в продолжение шрифтовой пары и логотипа — единую графическую ДНК.
Типы пиктограмм и когда какой применять
В брендинге принято делить иконки по функции, но реальная практика показывает, что важнее делить их по способу называния и использования — иначе команда начинает путать смысловые и формальные иконки местами.
| Тип | Когда использовать | Пример логики |
|---|---|---|
| Функциональные | Управление интерфейсом: кнопки, навигация, статусы | «Поделиться», «Настройки», «Закрыть» |
| Информирующие | Обозначение категорий, разделов, характеристик товара | Иконки тарифов, характеристик услуги |
| Имиджевые | Крупные иллюстративные иконки для лендингов, презентаций | Иконка-иллюстрация в блоке «Преимущества» |
| Single-purpose (по смыслу) | Уникальная функция, которую нельзя перепутать с другой | «Atlassian Intelligence» — названа по смыслу, не по форме |
| Multi-purpose (по форме) | Универсальные знаки, применимые в разных контекстах | «arrow right», «globe» — названы по внешнему виду |
Подход Atlassian с двухуровневой категоризацией решает конкретную проблему: команда дизайнеров не путает уникальную иконку продукта с универсальной стрелкой, которую можно вставить куда угодно. Без такого разделения система быстро разрастается дублями с разными смыслами под одинаковой формой.
Критерии качественной системы пиктограмм
Красивая на вид иконка ещё не значит, что система работает. Есть конкретные, проверяемые критерии, а не только субъективное «нравится/не нравится».
- Смысловая простота. Правило Райффайзена: иконка не должна быть сложносоставной, внутри — не больше двух объектов, без двойного смысла. Три элемента внутри одного знака — это уже каша, которую пользователь не читает мгновенно.
- Оптическая плотность. В Selectel стандарт сетки — 48×48px, и иконка стремится занять всю площадь, приближаясь по форме к квадрату. Это даёт равномерную визуальную массу набора: одни знаки не выглядят «тяжелее» других.
- Читаемость при масштабировании. Система должна сохранять смысл на 16px и на 32px без потери деталей до состояния пятна.
- Согласованность с типографикой. Толщина линии и скругления выведены из параметров шрифта, а не подобраны на глаз.
- Однозначность именования. Каждая иконка имеет одно закреплённое название и не путается с похожими по форме знаками.
Внедрение системы во все точки контакта
Спроектировать систему — половина работы. Реальные проблемы начинаются на этапе внедрения, когда иконография попадает в веб, приложение, печатную продукцию и навигацию одновременно, и там начинают вылезать конфликты.
Проблема масштабирования
При изменении размера иконки меняется не только габарит, но и структура. BBC на своих 180 иконках в трёх размерах столкнулась с тем, что для мелких размеров пришлось полностью переделать пиктограммы: детали, читаемые на 32px, превращаются в грязное пятно на 16px. Если система изначально не предусматривает отдельную версию для мелкого масштаба — при внедрении на мобильных экранах и в навигации бренд теряет узнаваемость.
Конфликты метафор
Одна и та же форма может читаться по-разному в разных культурных и продуктовых контекстах: «конверт» — это письмо или почтовое приложение, «шестерёнка» — настройки или технический раздел. При масштабировании системы на новые продукты команда обязана прогонять метафоры через тест на однозначность — иначе иконка начинает конфликтовать сама с собой в разных разделах продукта.
Версионирование
Система пиктограмм живёт годами и обновляется вместе с продуктом. Без единого репозитория с версиями и правилами наименования (по типу Atlassian с single/multi-purpose) через пару релизов появляются дубли и устаревшие варианты, которые дизайнеры продолжают использовать по инерции. Практический вывод: внедрение системы требует не только гайдлайна, но и библиотеки-источника правды (design system, Figma-библиотека), к которой обращаются все команды — от печати до мобильной разработки.
Актуальные статьи
МегаФон, BMW, ВТБ и ещё 240+ компаний. Смотрите как это выглядит в шоуриле:
В наше брендинговое агентство обращаются, чтобы заказать:
