Когда в компании большое количество проектов и интерфейсов, то для поддержания единого образа бренда становится недостаточно джентльменского набора из логотипа и шрифтов. В таких случаях на помощь приходит продуманная дизайн-система. Мы особенно остро ощутили потребность в её создании в пандемию. На удалёнке выросло внимание к диджитал-интерфейсам, и единообразие визуальных элементов во всех средах стало сложно поддерживать, опираясь на несколько заготовленных компонентов и иконок. Тогда мы решили, что настало идеальное время для систематизации принципов, по которым строится визуал продуктов Mediascope, в дизайне и коде.

Предыстория

Работа над дизайн-системой началась к тому моменту, когда у компании Mediascope уже был фирменный стиль, реализованный в партнёрстве с брендинговым агентством Depot. В его основе метафора, отражающая основные принципы деятельности компании, — прозрачность, объективность и лидерство, и графически выраженная в виде светового луча. Выражение «проливать свет», — то есть разъяснять, делать понятным, — в контексте Mediascope означает предоставлять данные, на базе которых работает вся медиаиндустрия.

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

• гайдлайны, то есть правила использования фирменного стиля,

• визуальный язык в диджитале, описанный в UI-kit,

• библиотеки компонентов, воплощённые в коде.

Этапы работы

Для создания дизайн-системы мы создали рабочую группу. В неё вошли представители отдела коммуникаций, отвечающие за стандартизацию брендинга Mediascope, frontend-разработчики нашей компании и дизайнеры из агентства Const Lab.

Работа проходила в несколько этапов:

1. Мы выяснили у frontend-разработчиков, какие потребности они испытывают в работе с визуалом и с какими трудностями сталкиваются в процессе кодинга, когда дело касается реализации фирменного стиля.

2. Затем с дизайнерами проанализировали, какие элементы интерфейса требуют унификации с точки зрения соответствия фирменному стилю Mediascope. Аудит помог выявить неконсистетные элементы. Стандартизация коснулась десятков объектов – разных видов полей ввода и чек-боксов, выпадающих списков, тултипов, тоглов, слайдеров, табов и других элементов.

3. После этого запустили работу по объединению дизайна и технологий. Она включала создание правил оформления для элементов интерфейса и реализацию описательной части дизайн-системы в коде. 

Участники рабочей группы сотрудничали в тесной связи на протяжении всего процесса создания дизайн-системы. Базовая версия была готова в достаточно сжатые сроки — уже через месяц. Её выпустили к релизу продуктовых решений Mediascope, которые в тот момент запускались. Затем мы совершенствовали дизайн-систему по мере развития digital-продуктов компании: находили в визуале похожие паттерны, создавали новые компоненты на их основе и редактировали старые.

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

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

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

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

Как устроена дизайн-система Mediascope

Наша дизайн-система строится на шести базовых принципах.

Форма

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

Основная форма фирменного стиля Mediascope — расходящийся луч. С её помощью можно подсвечивать элементы, требующие дополнительного внимания пользователя.

Например, в программе бронирования рабочих мест для сотрудников в виде такого луча условно обозначены столы и помещения — кухня, зона отдыха, санузел.

В остальных случаях используются прямоугольники со скруглением в 2 px.

Цвет  

Специфика Mediascope как исследовательской компании предполагает работу с инфографикой для визуализации данных, что требует большого числа цветов. Количество необходимых оттенков разрастается из-за особенностей восприятия: человек считывает цвета с помощью сравнений и контрастов. Жёлтый на светлых фонах воспринимается бледнее и холоднее, а на чёрном — ярче, насыщеннее. И если подбирать свой оттенок для каждой среды, то количество переменных в дизайн-системе может расти бесконечно. 

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

Оттенок меняется в зависимости от того, на каком фоне находится визуальный объект, и какую форму он окрашивает: линия, фон, текст, небольшая иконка и прочее. Так, фирменный лимонно-жёлтый Mediascope для текста на светлом фоне превращается в горчичный, иначе его невозможно будет считать. 

Каждому цвету в палитре Mediascope назначены оттенки-спутники: уровнем выше и ниже по цветовой шкале. Один из них используется, при наведении на объект, другой — для примечаний и ремарок. Так мы используем много цветов, но при этом избегаем путаницы и сохраняем визуальную идентичность.

Типографика 

Экспертность должна проявляться во всём, что мы делаем, поэтому важно следить за мелочами, в том числе в оформлении текстов. Типографика играет важную роль в том, как его воспринимает пользователь. К примеру, шрифт влияет на скорость чтения, задаёт сообщению характер. Для Mediascope мы приняли систему, построенную на базе разных начертаний одной гарнитуры Source Sans 3. Этот шрифт хорошо читается и в наборе, и в заголовках. Таким образом, мы обошлись без шрифтовой пары в стандартном понимании — одной гарнитуры достаточно, чтобы обеспечить полный типографический набор интерфейсов Mediascope. Это позволяет быстрее отрисовывать интерфейсы с аккуратной и минималистичной типографикой.

Размерность

Другой важный идентификатор — ритм, а за него отвечает размерность: это внутренние и внешние отступы объектов и их размеры.

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

Многослойность

Система предусматривает разный уровень объектов в пространстве. На z-оси у нас есть четыре положения элементов: «вдавленный», располагающийся на основной плоскости, приподнятый над базовым уровнем и лежащий на отдельной плоскости.

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

Интерактивность

Согласно этому принципу визуальные элементы системы реагируют на наведение курсора — меняют цвет, размер, положение, выдают текстовые подсказки, например, как получить доступ к неактивному элементу или воспользоваться выпадающим меню.

 Интерактивность — необязательный индустриальный элемент, но с его помощью мы добавляем Mediascope гибкость и человечность, акцентируя внимание на том, что компания откликается и реагирует на действия пользователя.

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

В результате внедрения и апдейта дизайн-системы:

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

• Благодаря стандартизации процессов стало проще просчитывать сроки работы над проектами. 

• Улучшился дизайн приложений, поскольку стало проще его контролировать. Нужно только поддерживать актуальность единого гайдлайна и своевременно вносить изменения в код.

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

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