Иконография бренда: единый визуальный язык знаков
Иконка как наследник логотипа, а не его сосед
Логотип — это сжатая формула бренда: несколько линий, угол наклона, характер скругления. Если иконография не наследует эти параметры, она начинает жить отдельно от идентики, и пользователь на подсознательном уровне чувствует разрыв между тем, как выглядит бренд «в целом», и тем, как он ведёт себя в мелких деталях. VK решил эту задачу через острые углы и стыки, которые буквально повторяют геометрию монограммы — так пиктограммы читаются как продолжение логотипа, а не как отдельная библиотека, случайно оказавшаяся рядом.
Гибридная природа знака
Семиотик Чарльз Пирс делил знаки на три типа: иконические (похожи на объект), индексные (указывают на причину или следствие) и символические (значение закреплено конвенцией, как у буквы или цифры). На практике сильные иконки почти никогда не относятся к одному типу — они гибридны. Значок «корзина» иконический (похож на предмет), но в контексте интерфейса он одновременно индексный сигнал «удалить». Разработка иконографики без учёта этой гибридности превращает набор знаков либо в буквальные картинки, либо в абстрактный шифр, который придётся объяснять пользователю.
Что превращает набор иконок в систему
Система держится не на том, насколько эффектна каждая отдельная иконка, а на том, насколько предсказуемо ведёт себя вся библиотека. Это ключевой баланс между новизной и преемственностью: каждая новая иконка должна быть узнаваемо «нашей», но не повторять уже существующие формы буквально.
- единая толщина линий и один принцип обводки (либо только заливка, либо только контур — смешение ломает восприятие);
- согласованные радиусы скруглений — если один угол острый, а соседний скруглён без причины, глаз считает это ошибкой;
- одна оптическая плотность формы — иконки не должны «спорить» друг с другом по визуальному весу на экране;
- единый принцип построения (модульная сетка, база на квадрате или круге).
Форма как психологический сигнал
Выбор между острыми и скруглёнными углами — это не эстетическое решение, а смысловое. Острые формы читаются как точность, технологичность, дистанция; скруглённые — как дружелюбие, безопасность, человечность. Многие бренды сознательно комбинируют оба подхода: острые стыки в акцентных элементах и мягкие скругления в основном массиве иконок, чтобы получить и характер, и комфорт восприятия.
То же работает на уровне базовых архетипов формы, которые считываются подсознательно, независимо от культуры пользователя:
- круг — вечность, равенство, отсутствие иерархии;
- крест — центр, ориентация, точка отсчёта;
- ромб и квадрат — устойчивость, земное начало, принадлежность месту.
Абстрактность против буквальности — ещё одна развилка. Буквальная иконка («конверт» для почты) быстрее считывается новым пользователем, но быстрее устаревает и слабее выражает индивидуальность бренда. Абстрактная форма требует привыкания, но становится фирменным активом — как только пользователь один раз выучил знак, он его больше не путает с чужими.
Почему масштабирование «на глаз» ломает иконку
При уменьшении или увеличении иконки меняется не только габарит — меняются толщина линий, радиусы скруглений и плотность формы. При простом растяжении маленькая иконка теряет читаемость: линии становятся слишком тонкими, углы «слипаются», а деталь, которая была видна в 32 px, исчезает в 16 px. Именно поэтому Альфа-Банк создал отдельные версии одной и той же иконки для каждого размера, а не просто менял высоту векторного файла — это позволило сохранить читаемость на любом экране.
Практика показывает, что универсального «одного размера» не существует — иконки живут в наборе фиксированных сеток, и каждый бренд выбирает свой стандарт.
| Компания / система | Подход к размерам | Особенность |
|---|---|---|
| Google Material Icons | 24×24 px | единая базовая сетка для всех иконок продукта |
| Toyota | три фиксированных размера | при увеличении добавляется по 1 px к каждому параметру, а не пропорциональное растяжение |
| Альфа-Банк | индивидуальные версии под размер | отдельная прорисовка для каждого масштаба вместо ресайза |
Общее правило: чем меньше иконка, тем толще относительно её габарита должна быть линия и тем меньше деталей она может нести. Работа со стандартными сетками — 16×16, 20×20, 24×24 или 32×32 px — задаёт систему, внутри которой дизайнер не гадает, а выбирает готовый модуль.
Как библиотека растёт без раздувания: сабглифы
Когда иконок становится больше сотни, встаёт вопрос: рисовать каждую вариацию заново или комбинировать смысл из базовых элементов? Второй путь надёжнее. Сабглифы — небольшие модификаторы (стрелка, точка, плюс, замок), которые накладываются на базовую форму и уточняют её значение без создания новой иконки с нуля. Альфа-Банк выстроил на этом принципе библиотеку из 2500 иконок: базовые формы остаются немногочисленными и контролируемыми, а смысловые вариации собираются комбинаторно. Это решает проблему, с которой сталкивается почти любой растущий продукт — библиотека либо превращается в хаос из тысяч уникальных рисунков, либо остаётся управляемой системой модулей.
Документация: гайдлайн как инструмент, а не витрина
Раздел про иконки в брендбуке часто делают «для красоты» — показывают сетку и десяток примеров. Это не работает: команда разработки и внешние подрядчики нуждаются не в демонстрации, а в инструкции, по которой можно принимать решения самостоятельно, без созвона с бренд-менеджером по каждому новому знаку.
- Зафиксировать базовую сетку и допустимые размеры (например, 16/20/24/32 px) с указанием, что происходит с толщиной линии и радиусом при переходе между ними.
- Описать принцип построения формы — острые/скруглённые углы, соотношение с логотипом, допустимую степень абстракции.
- Задать номенклатуру сабглифов и правила их комбинирования с базовыми формами.
- Ввести единый нейминг файлов и слоёв — по типу icon/search/24 или DocumentOutline20 — чтобы дизайнер и разработчик оперировали одинаковыми названиями.
- Добавить чек-лист проверки новой иконки перед добавлением в библиотеку и блок-схему «что делать, если готовой формы нет».
Рабочий гайдлайн по иконографике редко получается короче 50 страниц — не потому, что нужно «побольше текста», а потому что каждое правило требует примера правильного и неправильного применения. Документ без чек-листов и блок-схем превращается в красивую подборку картинок, которую всё равно придётся объяснять устно каждой новой команде — а это ровно то, для чего документация изначально создавалась.
Иконка как наследник логотипа, а не его сосед
Логотип — это сжатая формула бренда: несколько линий, угол наклона, характер скругления. Если иконография не наследует эти параметры, она начинает жить отдельно от идентики, и пользователь на подсознательном уровне чувствует разрыв между тем, как выглядит бренд «в целом», и тем, как он ведёт себя в мелких деталях. VK решил эту задачу через острые углы и стыки, которые буквально повторяют геометрию монограммы — так пиктограммы читаются как продолжение логотипа, а не как отдельная библиотека, случайно оказавшаяся рядом.
Гибридная природа знака
Семиотик Чарльз Пирс делил знаки на три типа: иконические (похожи на объект), индексные (указывают на причину или следствие) и символические (значение закреплено конвенцией, как у буквы или цифры). На практике сильные иконки почти никогда не относятся к одному типу — они гибридны. Значок «корзина» иконический (похож на предмет), но в контексте интерфейса он одновременно индексный сигнал «удалить». Разработка иконографики без учёта этой гибридности превращает набор знаков либо в буквальные картинки, либо в абстрактный шифр, который придётся объяснять пользователю.
Что превращает набор иконок в систему
Система держится не на том, насколько эффектна каждая отдельная иконка, а на том, насколько предсказуемо ведёт себя вся библиотека. Это ключевой баланс между новизной и преемственностью: каждая новая иконка должна быть узнаваемо «нашей», но не повторять уже существующие формы буквально.
- единая толщина линий и один принцип обводки (либо только заливка, либо только контур — смешение ломает восприятие);
- согласованные радиусы скруглений — если один угол острый, а соседний скруглён без причины, глаз считает это ошибкой;
- одна оптическая плотность формы — иконки не должны «спорить» друг с другом по визуальному весу на экране;
- единый принцип построения (модульная сетка, база на квадрате или круге).
Форма как психологический сигнал
Выбор между острыми и скруглёнными углами — это не эстетическое решение, а смысловое. Острые формы читаются как точность, технологичность, дистанция; скруглённые — как дружелюбие, безопасность, человечность. Многие бренды сознательно комбинируют оба подхода: острые стыки в акцентных элементах и мягкие скругления в основном массиве иконок, чтобы получить и характер, и комфорт восприятия.
То же работает на уровне базовых архетипов формы, которые считываются подсознательно, независимо от культуры пользователя:
- круг — вечность, равенство, отсутствие иерархии;
- крест — центр, ориентация, точка отсчёта;
- ромб и квадрат — устойчивость, земное начало, принадлежность месту.
Абстрактность против буквальности — ещё одна развилка. Буквальная иконка («конверт» для почты) быстрее считывается новым пользователем, но быстрее устаревает и слабее выражает индивидуальность бренда. Абстрактная форма требует привыкания, но становится фирменным активом — как только пользователь один раз выучил знак, он его больше не путает с чужими.
Почему масштабирование «на глаз» ломает иконку
При уменьшении или увеличении иконки меняется не только габарит — меняются толщина линий, радиусы скруглений и плотность формы. При простом растяжении маленькая иконка теряет читаемость: линии становятся слишком тонкими, углы «слипаются», а деталь, которая была видна в 32 px, исчезает в 16 px. Именно поэтому Альфа-Банк создал отдельные версии одной и той же иконки для каждого размера, а не просто менял высоту векторного файла — это позволило сохранить читаемость на любом экране.
Практика показывает, что универсального «одного размера» не существует — иконки живут в наборе фиксированных сеток, и каждый бренд выбирает свой стандарт.
| Компания / система | Подход к размерам | Особенность |
|---|---|---|
| Google Material Icons | 24×24 px | единая базовая сетка для всех иконок продукта |
| Toyota | три фиксированных размера | при увеличении добавляется по 1 px к каждому параметру, а не пропорциональное растяжение |
| Альфа-Банк | индивидуальные версии под размер | отдельная прорисовка для каждого масштаба вместо ресайза |
Общее правило: чем меньше иконка, тем толще относительно её габарита должна быть линия и тем меньше деталей она может нести. Работа со стандартными сетками — 16×16, 20×20, 24×24 или 32×32 px — задаёт систему, внутри которой дизайнер не гадает, а выбирает готовый модуль.
Как библиотека растёт без раздувания: сабглифы
Когда иконок становится больше сотни, встаёт вопрос: рисовать каждую вариацию заново или комбинировать смысл из базовых элементов? Второй путь надёжнее. Сабглифы — небольшие модификаторы (стрелка, точка, плюс, замок), которые накладываются на базовую форму и уточняют её значение без создания новой иконки с нуля. Альфа-Банк выстроил на этом принципе библиотеку из 2500 иконок: базовые формы остаются немногочисленными и контролируемыми, а смысловые вариации собираются комбинаторно. Это решает проблему, с которой сталкивается почти любой растущий продукт — библиотека либо превращается в хаос из тысяч уникальных рисунков, либо остаётся управляемой системой модулей.
Документация: гайдлайн как инструмент, а не витрина
Раздел про иконки в брендбуке часто делают «для красоты» — показывают сетку и десяток примеров. Это не работает: команда разработки и внешние подрядчики нуждаются не в демонстрации, а в инструкции, по которой можно принимать решения самостоятельно, без созвона с бренд-менеджером по каждому новому знаку.
- Зафиксировать базовую сетку и допустимые размеры (например, 16/20/24/32 px) с указанием, что происходит с толщиной линии и радиусом при переходе между ними.
- Описать принцип построения формы — острые/скруглённые углы, соотношение с логотипом, допустимую степень абстракции.
- Задать номенклатуру сабглифов и правила их комбинирования с базовыми формами.
- Ввести единый нейминг файлов и слоёв — по типу icon/search/24 или DocumentOutline20 — чтобы дизайнер и разработчик оперировали одинаковыми названиями.
- Добавить чек-лист проверки новой иконки перед добавлением в библиотеку и блок-схему «что делать, если готовой формы нет».
Рабочий гайдлайн по иконографике редко получается короче 50 страниц — не потому, что нужно «побольше текста», а потому что каждое правило требует примера правильного и неправильного применения. Документ без чек-листов и блок-схем превращается в красивую подборку картинок, которую всё равно придётся объяснять устно каждой новой команде — а это ровно то, для чего документация изначально создавалась.
Актуальные статьи
МегаФон, BMW, ВТБ и ещё 240+ компаний. Смотрите как это выглядит в шоуриле:
В наше брендинговое агентство обращаются, чтобы заказать:
