Гайдлайн по иконографике и пиктограммам бренда

Как называть иконки: по форме или по функции

Здесь два подхода, и большинство команд выбирают неправильный. Первый — называть иконку по тому, что она делает: «go-to-next», «open-menu», «save-document». Второй — называть по тому, что она изображает: «arrow-right», «hamburger», «floppy-disk». Разница кажется семантической мелочью, но именно она определяет, сколько иконок вы нарисуете за год.

Стрелка вправо может означать «следующий шаг», «развернуть» или «перейти на сайт» — форма одна. Если назвать её «go-to-next», при появлении второго контекста дизайнер нарисует «expand-right» с той же геометрией, и библиотека раздуется вдвое без реальной причины.

Рабочая схема нейминга — иерархическая: [размер]/[категория]/[название]-[заливка]-[направление]. Например, 24/navigation/arrow-outline-right. Для файлов используется kebab-case: arrow-outline-right_24.svg. Такая структура сразу задаёт и папочную организацию брендбука: разделы по категориям (навигация, действия, статусы, объекты), внутри — по размерам, внутри — варианты заливки и направления.

Сколько размеров нужно и чем они отличаются по смыслу

Частая ошибка — тащить в гайдлайн пять-шесть размеров «на всякий случай». На практике хватает двух-трёх, привязанных к конкретным контекстам интерфейса, а не к абстрактной шкале.

IBM в своей системе идёт дальше и добавляет 20px как промежуточный шаг, но это скорее исключение для крупных продуктовых экосистем, чем правило для брендбука среднего бизнеса. Три размера — рабочий минимум, который закрывает 90% сценариев.

Масштабирование против отдельной прорисовки

Простое уменьшение вектора не работает — это самая частая техническая ошибка, которую видно в готовом интерфейсе невооружённым глазом. При масштабировании иконки с 32px до 16px линия визуально «худеет», углы теряют читаемость, а мелкие детали слипаются в кашу.

• Толщина линии не масштабируется пропорционально размеру — она подбирается отдельно под каждый шаг сетки, чтобы сохранить одинаковый визуальный вес.
• Радиусы скругления на маленьких размерах увеличивают относительно геометрии, иначе угол превращается в почти острый.
• Детали, которые читаются на 32px (например, вторая линия внутри стрелки), на 16px нужно убирать — иначе иконка превращается в пятно.

Альфа-банк в своём гайдлайне на 2500 иконок решает это радикально: для каждого размера — отдельная отрисованная версия, а не производная от одного мастер-файла. Это дороже на этапе создания, но снимает бесконечные баг-репорты про «иконки выглядят по-разному на разных экранах». Микро-иконки 12–16px — отдельная категория, которую нельзя доверить автоматическому уменьшению: они рисуются с минимальным набором деталей с нуля.

Фирменный приём как отличительный слой

Технические параметры — сетка, толщина, углы — делают иконки аккуратными, но не узнаваемыми. Узнаваемость даёт фирменный приём, зафиксированный как правило, а не как случайность. У Selectel это конкретная формула: внешняя сторона угла скругляется в четыре раза сильнее внутренней, толщина контура фиксирована на 4px. Формула звучит как техническая деталь, но именно она делает силуэт иконок Selectel отличимым от тысяч похожих наборов на строгую линию и прямой угол.

Если в вашем гайдлайне нет такого «отпечатка» — набора приёма, который дизайнер применяет неосознанно, — иконки будут просто аккуратными, но взаимозаменяемыми с любым другим брендом.

Семантический слой: одна форма, разные функции

Это тема, которую обходят почти все источники, а она напрямую влияет на размер библиотеки. Проблема в том, что одна и та же форма в разных экранах может означать разное: круг с плюсом — это «добавить», «создать», «загрузить» в зависимости от раздела продукта. Рисовать под каждый случай новую иконку — путь к раздуванию набора до неуправляемого состояния.

Решение — сабглифы, микроиконки-модификаторы, которые накладываются на базовую форму и меняют её смысл без создания новой сущности. Подход применяется в Альфа-банке: базовая форма документа плюс маленький сабглиф-стрелка даёт «скачать документ», плюс сабглиф-плюс — «создать документ». В брендбуке это фиксируется как отдельный раздел с таблицей комбинаций «база + модификатор = значение», а не как произвольное творчество дизайнера на местах.

Как управлять растущей библиотекой без хаоса

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

1. Дизайнер, которому нужна новая иконка, сначала проверяет библиотеку и сабглифы — можно ли собрать нужный смысл из существующих элементов.
2. Если готового решения нет, иконка рисуется по действующей сетке, толщинам линий и фирменному приёму бренда.
3. Черновик проходит согласование минимум двумя другими дизайнерами команды — не автором.
4. Финальное решение принимает эксперт по бренду или ответственный за брендбук — он проверяет соответствие стилю, а не только техническим параметрам.
5. Иконка добавляется в библиотеку с версией, датой и именем автора — это упрощает откат, если через месяц выяснится, что форма конфликтует с другой.

Без такого маршрута каждый дизайнер решает по-своему, где ставить точку скругления и на сколько градусов срезать угол — а через год в интерфейсе живут три поколения одной и той же метафоры.

Исключения: когда их допускать и как фиксировать

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