001
ОТ АУДИТА
К ЕДИНОМУ СТИЛЮ
О ПРОЕКТЕ
Аудит библиотеки из 226 иконок и выстраивание процесса, который позволил масштабировать систему без потери консистентности.
ПОЗИЦИЯ
Lead designer
КОМАНДА
2 дизайнера
КЛИЕНТ
Яндекс
О ПРОЕКТЕ
Аудит библиотеки из 226 иконок и выстраивание процесса, который позволил масштабировать систему без потери консистентности.
Позиция
Lead designer
Команда
2 дизайнера
Клиент
Яндекс
1.5
недели на аудит
библиотеки
226
иконок
проверено
65
готовых
иконок
161
иконок нужно
было создать
194
варианта
размера иконок
150+
иконок создано
и обновлено
К началу проекта внутри Яндекса одновременно существовали две библиотеки иконок:
ICONS
Symbols
более старая библиотека.
ICONS SYMBOLS
ICONS
Regular
новая библиотека, которая постепенно развивалась вместе с продуктами.
ICONS REGULAR
Новые иконки появлялись под конкретные задачи и ближайшие релизы. Такой подход помогал быстро закрывать потребности отдельных команд, но со временем привёл к техническому долгу.
На одном экране могли одновременно использоваться иконки из разных библиотек, из-за чего интерфейс терял визуальную целостность.
МЫ ОБНАРУЖИЛИ:
- различные пропорции
- неодинаковую толщину линий
- разные радиусы скруглений
- различия в принципах построения
- разный визуальный вес иконок
- дубли одинаковых иконок
- отсутствие необходимых размеров
- отсутствие outline- или filled-вариантов
Главной задачей было превратить
две разрозненные библиотеки
в единую масштабируемую систему
Работу начали с полной ревизии.
Мы объединили обе библиотеки, распределили иконки по категориям
и проанализировали каждую позицию.
В РЕЗУЛЬТАТЕ АУДИТА была собрана таблица:
- определили существующие иконки
- нашли дубли
- выявили отсутствующие размеры
- определили недостающие outline- и filled-версии
- обнаружили полностью отсутствующие иконки
- расставили приоритеты производства
Полная карта библиотеки показала, что уже есть, чего
не хватает и что нужно сделать в первую очередь
04
ПОСТРОЕНИЕ ПРОЦЕССА
После того как основные принципы стали понятны, мы превратили их в рабочий процесс и зафиксировали внутренние правила: работу с метафорами, последовательность этапов и критерии перехода между ними.
01
Подбор метафоры
Исследуем смысл и контекст, ищем подходящие визуальные метафоры
ДИЗАЙН
02
Разработка эскизов
Создаём несколько быстрых эскизов для поиска формы
ДИЗАЙН
03
Проверка дизайн-лидом
Дизайн-лид оценивает идею, форму и соответствие стилистике
ДИЗАЙН-ЛИД
04
Согласование с клиентом
Выбранные эскизы презентуются команде Яндекса и получаем обратную связь
ЯНДЕКС
05
Отрисовка версии 24×24
Отрисовываем основную версию 24×24 по всем правилам
ДИЗАЙН
06
Проверка дизайн-лидом
Проверяем геометрию, вес, баланс и читаемость
ДИЗАЙН-ЛИД
07
Согласование с клиентом
Отправляем клиенту и получаем финальное подтверждение
ЯНДЕКС
08
Построение остальных размеров
Адаптируем иконку под все необходимые размеры: 32, 20, 16, 12 px
ДИЗАЙН
09
Проверка дизайн-лидом
Проверяем все размеры на баланс, консистентность и читаемость
ДИЗАЙН-ЛИД
10
Согласование с клиентом
Выбранные эскизы презентуются команде Яндекса и получаем обратную связь
ЯНДЕКС
11
Сборка компонентов
Собираем иконки в компоненты по структуре библиотеки
ДИЗАЙН
12
Передача библиотеки клиенту
Передаем готовые компоненты в общую библиотеку Яндекса
ЯНДЕКС
для команды
Чтобы два дизайнера работали синхронно и получали предсказуемый результат, я подготовил внутренний гайд по созданию иконок. Он объединил требования Яндекса и опыт, накопленный командой во время проекта.
Внутри гайда были описаны:
- рабочие сетки (32 / 24 / 20 / 16 / 12 px)
- толщина линий и радиусы скруглений
- поиск метафор и работа над эскизами
- правила работы с примитивами и компонентами
- принципы ресайза
- типичные ошибки
- рекомендации из обратной связи команды Яндекса
001
Выбрали образ, изменяем его в сетке
002
Выбираем контур из сетки для формата иконки
003
Помещаем в него образ, пока что он не попадает в визуальный вес сетки
004
Размещаем объект в контуре, с компенсационными вылетами
Гайд превратил создание иконок
из набора отдельных решений в единый производственный процесс
Чтобы новые иконки оставались частью единой системы, мы использовали несколько инструментов проверки. Главным из них стал Balance Board: общая сетка, в которой существующие и новые иконки можно было сравнить между собой в одном контексте. Это позволяло быстро оценить их визуальный вес, пропорции, толщину линий, характер скруглений и общий баланс библиотеки.
Balance Board
помогал находить несоответствия
и принимать решения ещё до передачи работы клиенту
После завершения аудита клиент получил структурированную библиотеку без дублей, понимание недостающих элементов и прозрачный процесс дальнейшего производства. По итогам проекта было создано и обновлено более 100 иконок для разных продуктовых направлений, включая финансы, медицину, социальные сервисы и голосового AI-ассистента.
Как лид-дизайнер, я выстроил и контролировал процесс работы над проектом: проверял каждую иконку на промежуточных этапах и следил за консистентностью всей библиотеки. Также я разработал производственный гайд — от поиска метафоры до сборки компонентов. Он стал основой дальнейшей работы команды и помог поддерживать единое качество на протяжении всего проекта.
