Сайт дизайн-системы «МегаФона»

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

Чтобы сделать систему прозрачной, МегаФон решил создать интерактивный портал — базу знаний с правилами и принципами работы своей дизайн-системы.

Перед нами встала задача создать дизайн и разработать frontend интерактивного имиджевого сайта дизайн-системы. Подробно и живо рассказать об основных направлениях визуального языка бренда. Разработать Figma-плагин для сокращения времени команды на арт-дирекшн проектов.

На момент старта работ мы тесно сотрудничали с МегаФоном больше двух лет — от дизайн-поддержки до создания игр, личных кабинетов, бренд-медиа и промосайтов — и хорошо понимали принципы работы и ценности компании.

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

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

Получали от команды бренда информацию к каждому блоку, проводили брифы и вместе прорабатывали структуру страниц, чтобы описания были понятными, а иллюстрации к правилам — наглядными.

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

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

За два года работы с командой МегаФона над иллюстрациями на проектах разного масштаба мы выработали уникальный стиль 3D-моделей. 

Для сайта дизайн-системы сформулировали правила их создания и передали универсальность, с которой подходим к выбору образов: от поиска метафор до работы с материалами, освещением и композицией. Сегодня нашими гайдлайнами пользуются все digital-подрядчики МегаФона.

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

Как и во многих продуктах МегаФона, на сайте дизайн-системы пользователь может одним кликом поменять тему со светлой на темную. Чтобы переход был бесшовным на любых устройствах и в любых браузерах, на сайте мы использовали видео с прозрачным фоном.

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

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

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

Изучили ограничения Figma для дизайна и отрисовали макеты на основе прототипов от команды МегаФона. Отдельным этапом стал сбор требований Figma api для разработки: изучали доступную документацию и форумы, общались с экспертами.

Frontend инструмента дробит каждый стиль из макетов на мелкие элементы, вплоть до названия слоев, и сравнивает их с образцом — дизайн-системой. Backend сохраняет в базе данных «кастомные» варианты элементов, утвержденные администратором, а также ключи для синхронизации с файлами библиотек. Если в исходном файле поменяется любой дизайн-элемент, плагин узнает об этом.

Предложили взгляд со стороны и создали яркую и удобную базу знаний с исчерпывающим описанием правил.

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

Сайт помогает всем, кто соприкасается с экосистемой: инхаус-команде и подрядчикам — сокращать время на создание макетов и работать согласованно; соискателям — знакомиться с «внутрянкой» работы в компании; финальным пользователям цифровых продуктов — получать консистентный и предсказуемый опыт взаимодействия.

Проект получил признание индустрии, собрав семь наград на Tagline Awards, WDA и конкурсе Рейтинга Рунета.