Разработка айдентики и дизайн-системы для IT-платформы Grade Map

Клиенту требовалось создать современный и понятный визуальный образ продукта. Платформа связана с развитием специалистов и отслеживанием их прогресса, поэтому дизайн должен был транслировать движение, рост и достижение результатов.

Перед нами стояли задачи:

- разработать логотип и визуальную айдентику продукта;

- сформировать цветовую систему и графические элементы;

- создать набор интерфейсных и иллюстративных иконок;

- подготовить визуальную систему для digital-коммуникаций и презентационных материалов;

- заложить основу масштабируемой дизайн-системы.

Grade Map — продукт для IT-команд и HR-специалистов, поэтому визуальный язык должен был быть:

- современным и технологичным;

- понятным и дружелюбным;

- ассоциироваться с ростом, достижениями и развитием;

- легко адаптироваться для интерфейсов и маркетинговых материалов.

При разработке концепции мы ориентировались на геймификацию процессов развития сотрудников. Важным источником вдохновения стала механика прогресса в обучающих сервисах, где визуальные элементы показывают рост пользователя.

Концепция:

Основой визуальной идеи стало движение вверх и развитие навыков.

В логотипе это отражено через стилизованную фигуру человека, которая движется вверх к цели. Графический знак одновременно напоминает стрелку и символ прогресса. Логотип легко масштабируется и может использоваться как самостоятельный знак в интерфейсах и цифровых продуктах.

Цветовая палитра:

Для бренда была разработана яркая и технологичная палитра:

- тёмно-синий — основной цвет интерфейса и типографики;

- голубой — дополнительный цифровой акцент;

- оранжевый и жёлтый — цвета активности и энергии;

- светло-серый — нейтральная база.

Контрастные цвета помогают разделять уровни информации и добавляют динамику интерфейсу.

Для проекта была разработана шрифтовая система, сочетающая современный интерфейсный гротеск и акцентный пиксельный шрифт. Такое решение усиливает тему геймификации и цифрового прогресса, которая лежит в основе продукта.

Основным шрифтом стал Onest — геометрический гротеск с чистыми формами и высокой читаемостью. Он используется в интерфейсных текстах, заголовках, карточках продукта и поясняющих блоках. Шрифт хорошо работает в digital-среде, обеспечивает визуальную структурность и помогает выстраивать понятную иерархию информации.

В качестве акцентного шрифта используется LCDSx8H — пиксельный дисплейный шрифт, построенный на модульной сетке. Он применяется для отображения числовых показателей, статусов и элементов прогресса. Его визуальный язык напоминает интерфейсы цифровых систем и игровых HUD-элементов, что усиливает связь продукта с идеей геймификации развития сотрудников.

Сочетание двух шрифтов создаёт контраст между функциональным интерфейсным текстом и визуальными элементами прогресса, делая айдентику более выразительной и технологичной.

Для айдентики была создана система модульных элементов, которые символизируют прогресс и развитие навыков.

Элементы построены из простых геометрических форм и могут использоваться как:

- декоративная графика;

- фоновые элементы;

- визуальные маркеры прогресса.

Отдельное внимание было уделено системе иконок. Разработаны иконки, связанные с развитием навыков и прогрессом пользователя. Например:

- иконка UP, символизирующая рост и повышение уровня;

- иконка HP, отражающая состояние и развитие компетенций.

Иконки имеют пиксельную структуру, что создаёт связь с геймификацией и цифровой средой.

Сборка всех элементов фирменного стиля в единый брендбук для дальнейшего использования и предоставления всех необходимых форматов файла в распоряжение заказчика.

На базе разработанной айдентики была создана система визуальных решений для digital-коммуникаций:

- презентационные экраны продукта;

- промо-материалы для платформы;

- иллюстративные блоки интерфейса;

- карточки продукта.

Графика помогает визуализировать абстрактные процессы развития компетенций и делает коммуникацию продукта более понятной.