Дизайн Julia Zorkina
10 129

Разработка единой дизайн-системы — опыт «Рамблера»

К узнаваемому визуальному стилю удалось привести более 20 брендов компании.

В закладки

Новый «Рамблер»

«Рамблер» давно стал больше, чем сайтом. Сейчас он состоит из 20 проектов различной направленности — от тематических медиа до сервисов вроде почты или погоды.

Первая попытка глобально подойти к фирменному стилю сервисов была сделана ещё четыре года назад, ей занималась команда выходцев из «Афиши». В 2016 году «Рамблер» сменил логотип, а в 2017 появилась новая стратегия развития продуктов, направленная на объединение всех сервисов в единую платформу нового «Рамблера». Все пришло в движение: обновились команды, открылись новые проекты. Структура самого портала и сервисов вокруг него усложнялась, а требования к скорости разработки росли.

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

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

Перед отделом дизайна стояла задача за год разработать новый визуальный язык для более чем 20 разных продуктов, создав в сознании пользователя устойчивую ассоциацию с единым брендом нового «Рамблера». Без серьезной оптимизации по всем фронтам было не обойтись — так мы пришли к необходимости разработки собственной дизайн-системы.

Архитектура дизайн-системы

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

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

Первичной стала заповедь: сначала вы работаете на дизайн-систему, а потом она работает на вас. Если второго не происходит, нужно задуматься.

Ключевыми принципами для разработки новых компонентов стали:

  • Гибкость.
  • Сохранение интересов продукта.
  • Потенциал для эволюции.

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

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

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

Наша дизайн-система состоит из трёх основных частей:

  • Документация — описание бренда и его ценностей, визуальный язык, его принципы.
  • Исходники — сами файлы UI-кита и гайдлайны с правилами создания компонентов.
  • Компоненты — библиотека готовых фронтенд-компонентов, документация к ним, песочница.

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

Sketch-файлы мы храним в корпоративном Dropbox, доступ к которому имеют все участники команды разработки системы. Здесь же хранятся все ассеты и файлы, необходимые для работы с дизайном продуктов, в том числе и внешняя рекламная коммуникация.

Компоненты разрабатываются на GitLab, публичная их часть доступна на GitHub.

Бренд

До появления единого описания каждый сотрудник представлял себе миссию, ценности и стратегию развития «Рамблера» в меру своей (испорченности) информированности, если, конечно, вообще знал о таких вещах.

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

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

Визуальный язык

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

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

Гайдлайны

Чем отличается визуальный язык от гайдлайнов? Это части одного целого. Но если визуальный язык описан на уровне концепций и инструментов, то гайдлайны фиксируют их в конкретной форме и правилах. Технически наш гайдлайн представляет собой фундамент из эволюционирующего набора правил, которые определяют порядок работы с интерфейсами.

UI-kit

Для организации UI-kit мы используем иерархию из популярного atomic design Бреда Фроста, разделяя компоненты по принципу возрастания их сложности на атомы, молекулы, организмы, шаблоны и страницы.

В состав атомарного уровня вошли основные вводные из визуального языка: цвет, форма, шрифт и сетка.

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

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

В список шаблонов попали наработки для новостных проектов, в основном для медиа. Уровень конкретных страниц мы рассматриваем скорее как архив наработок.

Библиотека компонентов

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

Стек библиотеки сейчас — React + JSS. У React уже сформировалось большое активное сообщество (к тому же его лицензия недавно обновилась на MIT). JSS (CSS в JavaScript) отлично подходит нам в качестве техники для удобной генерации таблиц стилей в реальном времени с возможностью глубокой кастомизации. Мы выбрали такую пару из-за специфических требований к дистрибуции библиотеки — она должна была быть максимально простой.

Закрытая часть разработки ведется в GitLab, на GitHub попадает стабильная актуальная версия, которую можно выпустить вовне без страха за NDA. Обновление библиотеки происходит через обновление NPM-пакета раз в неделю, о крупных релизах заранее предупреждают все команды.

Команда

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

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

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

Культура дизайна в большой компании

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

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

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

«Костыли» и цена изменения

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

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

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

Проектирование и прототипы

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

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

Процессы

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

Планы на будущее

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

Реализацию дизайн-системы в продуктах уже сейчас можно увидеть на «Рамблер/почте» и на новых медийных вертикалях «Рамблера». Компоненты обновляются на нашем GitHub, а основные принципы визуального языка описаны на сайте о бренде нового «Рамблера», который скоро обновится.

#дизайн

Материал опубликован пользователем. Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
{ "author_name": "Julia Zorkina", "author_type": "self", "tags": ["\u0434\u0438\u0437\u0430\u0439\u043d"], "comments": 29, "likes": 47, "favorites": 1, "is_advertisement": false, "subsite_label": "design", "id": 28213, "is_wide": true }
00
дни
00
часы
00
мин
00
сек
(function(){ var banner = document.querySelector('.teaserSberbank'); var isAdsDisabled = document.querySelector('noad'); if (!isAdsDisabled){ var countdownTimer = null; var timerItem = document.querySelectorAll('[data-sber-timer]'); var seconds = parseInt('15395' + '50799') - now(); function now(){ return Math.round(new Date().getTime()/1000.0); } function timer() { var days = Math.floor(seconds / 24 / 60 / 60); var hoursLeft = Math.floor((seconds) - (days * 86400)); var hours = Math.floor(hoursLeft / 3600); var minutesLeft = Math.floor((hoursLeft) - (hours * 3600)); var minutes = Math.floor(minutesLeft / 60); var remainingSeconds = seconds % 60; if (days < 10) days = '0' + days; if (hours < 10) hours = '0' + hours; if (minutes < 10) minutes = '0' + minutes; if (remainingSeconds < 10) remainingSeconds = '0' + remainingSeconds; if (seconds <= 0) { clearInterval(countdownTimer); } else { timerItem[0].textContent = days; timerItem[1].textContent = hours; timerItem[2].textContent = minutes; timerItem[3].textContent = remainingSeconds; seconds -= 1; } } timer(); countdownTimer = setInterval(timer, 1000); } else { banner.style.display = 'none'; } })();
{ "id": 28213, "author_id": 116026, "diff_limit": 1000, "urls": {"diff":"\/comments\/28213\/get","add":"\/comments\/28213\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/28213"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199114 }

29 комментариев 29 комм.

Популярные

По порядку

Написать комментарий...
4

Было бы ещё интересно узнать, к чему привел этот огромный объем работы.
Повысилась ли вовлеченность на контентных проектах?
Или средний чек где-то удалось увеличить?

Ответить
15

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

Ответить
4

Спасибо за рассказ.

Ответить
1

А почему выбрали сетку, кратную 5? Я ни в коем случае не дизайнер, но вроде бы индустрия сейчас двигается в сторону систем, использующих 4.

Ответить
3

Действительно 4x4 самый универсальный вариант, но изначально у нас был ряд требований, которым он (как ни парадоксально) не удовлетворял. В настоящее время мы как раз планируем переход на четную модульность.

Ответить
6

Никита, по сути, цель у нас одна: увеличить прибыльность. И если в краткосрочной перспективе подрастить показатель EBITDA позволяет, например, сокращение издержек (а можно и просто увеличить количество рекламных площадей до невменяемого состояния), то в долгую финансовые показатели (уже существующих типов выручки и существующих продуктов, я не говорю про новые) могут расти при росте аудитории и повышении ее вовлеченности (чем лучше наша аудитория достигает своей цели, тем быстрее мы достигаем своей).

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

Если говорить в цифрах, то какой показатель наиболее интересен? Тестирование системы мы начинали с Почты и ошибок было достаточно. У нас была статья https://vc.ru/22938-rambler-redesign - мы рассказывали, что за короткое время получили больше 40 000 откликов от наших пользователей. 80% из них были негативные. Научились, пересмотрели, "много думали". Когда мы перезапустили Рамблер/Медиа (4М пользователей в сутки) - мы получили три отзыва. При этом глубина выросла на 12% (6 страниц на пользователя теперь), время на сайте на 9% (8:49 сегодняшний показатель), выручка на пользователя увеличилась. И в этой работе единая дизайн-система играла далеко не последнюю роль.

Ответить
0

Спасибо за комментарий, много интересного узнал.
Я бы сказал, что им можно статью дополнить (подвести итог, например).

Ответить
8

У вас усик отклеился.

Ответить
2

Спасибо за внимательность! Поправим :)

Ответить
7

Что за рамблер, нормальная тема?

Ответить
4

Фирма-однодневка

Ответить
3

Как я не заходил на рамблер, так и не захожу... =(

Ответить
20

я вот на мэилру не захожу :-/ вот всё думаю, когда ж они без меня бизнес-то закроют. А, нет, минуточку, помимо менять есть еще двести миллионов русскоговорящих человек.

Ответить
9

Ваша частная практика в издании про бизнес никого не интересует.

Ответить
0

Ахуеный комментарий.

Ответить

Комментарий удален

0

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

Ответить
4

Дизайн реально годный, но это не увеличивает желание пользоваться сервисами :)

Ответить
0

А что бы увеличило? )

Ответить
3

Спасибо за статью. Первая почта была как раз на Рамблере.

Нашёл баг. На странице https://horoscopes.rambler.ru/ при переключении поиска внутри поля ввода прыгает экран.

Ответить
0

Спасибо!

Ответить
3

жаль немного, что углы у иконок скруглили. Было что-то клевое в этой "угловатости"

Ответить
0

Кажется, тут у кнопки должны быть прямые углы.
Спасибо, что выложили компоненты в паблик. Интересно взглянуть.

Ответить
3

Тоже ловим этот баг, к сожалению :( Скоро исправим!

Ответить

Комментарий удален

0

Модный синенький :)

Ответить
0

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

Ответить
0

Для пиктограмм Женский, Субботник, Класс и Автомобили, на мой взгляд, подобраны неудачные (несчитываемые с ходу) метафоры. Ну так, конечно, круто.

Ответить
0

Я просто в восторге от ваших гайдов. Если не секрет, каков штат сотрудников работающих непосредственно над дизайн системой?
Из моего опыта все потраченое время на создание такий системой покрывает быстрая разработка новых интерфейсов или даже страниц. Дальше все просто собираеться по компонентам, UI дизайнер не нужен ВООБЩЕ.

Ответить
0

Над дизайн-системой работают в 7 человек, из которых 3 являются наиболее активными контрибьюторами.

Ответить

Комментарий удален

0

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } } ]
Хакеры смогли обойти двухфакторную
авторизацию с помощью уговоров
Подписаться на push-уведомления