1 6 1160x620 - Переосмысление дизайн-систем Spotify

Как мы создаем дизайн-системы, соответствующие нашей культуре автономии

В ноябре мы представили Encore, новый подход Spotify к дизайн-системам. Encore – это на самом деле семейство дизайн-систем, управляемых удаленными командами. В этой статье мы расскажем, что побудило нас создать Encore, опишем его структуру, и чем он отличается от того, что мы пробовали раньше.

Как мы к этому пришли

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

Вначале у Spotify не было дизайн-системы – мы создавали все с нуля. Когда мы запустили мобильное приложение в 2009 году, существовало не так много стандартов или общих паттернов, и опыт Spotify начал становиться все более … непоследовательным.

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Переосмысление дизайн-систем Spotify

Этот дрейф продолжался до 2013 года, когда мы предприняли первую настоящую попытку согласовать визуальный дизайн на всех платформах. Это потребовало огромных усилий, и оказало большое влияние: мы представили фирменную темную тему, и Spotify начал выглядеть примерно так, каким мы его знаем сегодня.

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Переосмысление дизайн-систем Spotify
Редизайн с темной темой 2013-14 годов

Затем в 2014–2015 годах команда бренда и креатива значительно обновила фирменный стиль Spotify. У нас была новая цветовая палитра, новая гарнитура (Circular) и множество визуальных обновлений, которые нужно было интегрировать в наши приложения. Для этого мы создали полностью укомплектованную команду для создания дизайн-системы Spotify, а не рассматривали ее как одноразовый проект. Мы назвали эту дизайн-систему GLUE, также известную как Global Language Unified Experience (возможно, вы слышали о ней).

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Переосмысление дизайн-систем Spotify
GLUE – наша первая дизайн-система, которую обслуживала специально выделенная команда

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

Но тут был подвох: GLUE была единой, централизованной командой. Это было здорово для последовательности, и многие компании считают, что централизованная команда им подходит. Однако, для нас это стало проблемой. Почему? Все сводится к тому, как организована компания. Ценности Spotify в «согласованной автономии» и в возможности команд (отрядов) самостоятельно принимать решения. Через некоторое время мы увидели, что наличие команды централизованных дизайн-систем не подходит для такого способа работы.

В 2018 году Spotify продолжал быстро расти.

У нас было 200 дизайнеров. 2000 разработчиков. 45 разных платформ.

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Переосмысление дизайн-систем Spotify
Сколько дизайн-систем вы можете себе представить, включая телефоны и холодильники? Это много вещей

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

Именно тогда мы вступили в «массовую» фазу дизайн-систем Spotify. Дизайнеры и разработчики компании взяли на себя задачу создания собственных дизайн-систем. Например, команда в Нью-Йорке начала работать над Tape, дизайн-системой для веб-сайтов. Команда в Стокгольме запустила другую систему Design tokens; и так далее.

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Переосмысление дизайн-систем Spotify
Примеры наших дизайн-систем в 2018 году

На этом этапе была проделана огромная работа, и мы до сих пор используем отдельные части этих систем. Но этот крайне децентрализованный подход «каждый делает свою часть» не был устойчивым. В какой-то момент мы насчитали 22 различных дизайн-системы. Представьте, что вы новый дизайнер или разработчик и спрашиваете: «Эй, у нас есть дизайн-система?» И ответ: «Да, у нас их на самом деле 22»? Довольно запутанно.

Давайте попробуем еще раз

Spotify действительно нужна полезная унифицированная дизайн-система, но мы знали, что такая централизованная команда, как GLUE, вероятно, не сработает. Итак, в 2018 году мы начали новую попытку по созданию дизайн-системы для компании.

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

Самое главное, мы хотели систему, которая соответствовала бы культуре автономии Spotify, которая могла бы масштабироваться на несколько платформ и вариантов использования.

Это привело нас к Encore.

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Переосмысление дизайн-систем Spotify

Представляем Encore

Encore – это семейство дизайн-систем, в котором есть все, что нужно командам для создания красивых и масштабируемых приложений Spotify.

Главное отличие Encore заключается в том, что это не единая монолитная вещь. Это фреймворк, который объединяет существующие дизайн-системы Spotify под одним брендом – «система систем».

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Переосмысление дизайн-систем Spotify

Внутри Encore есть несколько дизайн-систем, каждая из которых управляется отдельной командой компании. И хотя эти команды поддерживают разные системы, любой, кто создает продукты в Spotify, может внести свой вклад.

Так является ли Encore «новой дизайн-системой»? Не совсем. Это новый фреймворк, но на самом деле Encore использует много замечательного, что было в наших предыдущих дизайн-системах. Мы либо просто обновили их, либо используем их части для создания новых систем Encore.

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

Дизайн-системы внутри Encore

Вот как выглядит Encore под капотом.

Encore Foundation

В центре у нас есть Encore Foundation. Здесь мы храним такие вещи, как цвет, стили шрифта, движение, интервалы, а также рекомендации по копирайтингу и доступности. Также здесь расположены наши дизайн-токены. Это то, что каждый должен использовать – это то, что делает Spotify похожим на Spotify. Использование Encore Foundation – минимальная планка для каждого продукта Spotify.

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Переосмысление дизайн-систем Spotify

Encore Web

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

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Переосмысление дизайн-систем Spotify

Encore Mobile

Мы все еще работаем над этой системой – подобно Encore Web, мы предполагаем, что это место для общих компонентов, которые совместно используются несколькими мобильными приложениями.

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Переосмысление дизайн-систем Spotify

Локальные дизайн-системы

Но это еще не все, ребята. На следующем уровне Encore содержит то, что мы называем «локальными дизайн-системами». Локальные системы – это место, где хранятся элементы дизайна, предназначенные для конкретных продуктов или аудиторий. Это те вещи, которыми нужно делиться, но не делить это со всеми продуктами Spotify.

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Переосмысление дизайн-систем Spotify

Некоторые веб-компоненты используются только для артистов или подкастеров (например, приложению Spotify for Artists может потребоваться специальный паттерн навигации или макет таблицы). С помощью фреймворка Encore мы можем хранить кастомные элементы дизайна в локальной системе, чтобы все команды, работающие над Spotify for Artists, могли их использовать.

Также и с  мобильными платформами. Над основным приложением Spotify работает множество команд, поэтому существует большая потребность в общих мобильных компонентах и паттернах. Эти элементы дизайна находятся внутри локальной системы, адаптированной к платформе (мобильные приложения для iOS и Android) и аудитории (люди, которые слушают музыку и подкасты).

Сейчас у нас есть две локальные системы, но мы не думаем, что это окончательный вариант. С помощью Encore мы можем добавить дополнительные локальные системы, если потребуется. Например, в будущем мы можем добавить локальные системы для автономных приложений, таких как Spotify Kids и Stations. Суть заключается в том, что они остаются связанными и все они доступны в одном месте (веб-сайт Encore).

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Переосмысление дизайн-систем Spotify

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

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

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Переосмысление дизайн-систем Spotify
png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Переосмысление дизайн-систем Spotify
Так выглядит внутренний сайт Encore

Мысли в заключение

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

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

Это только начало, и нам еще многое предстоит выяснить, поскольку мы продвигаемся вперед в построении нашей системы систем. Хотя, в данный момент, Encore не является общедоступным, мы будем продолжать делиться тем, что узнаем, так что следите за будущими публикациями!

P.S. Хотите присоединиться к нам и поработать над Encore? Ознакомьтесь со списком открытых вакансий.

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

Свежие вакансии
                        Регистратор доменных имен РЕГ.РУ Регистратор доменных имен РЕГ.РУ UX/UI дизайнер Удаленно Москва
                        MYTONA MYTONA Game UI/UX Designer Удаленно Санкт-Петербург
                        ООО "Компания В.И.К." ООО "Компания В.И.К." Дизайнер (в офис) Офис Краснодар 35 000 ₽
                        ООО РЖД-Технологии ООО РЖД-Технологии Графический дизайнер Офис Москва
                        Ак Барс Цифровые Технологии Ак Барс Цифровые Технологии UI/UX дизайнер Офис Казань от 70 000 ₽
Все вакансии

Оригинал: spotify.design

Если вы нашли ошибку, выделите фрагмент текста и нажмите Ctrl+Enter

Похожие записи

Организация пространства в дизайне. Отступы, сетки и лейауты

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

История о том, как Dropbox перешел на Figma и структурировал свою дизайн-систему

Опыт перехода дизайн команды Dropbox на Figma

Почему дизайн-системы терпят неудачу и как заставить их работать в 2020 году

После отказа от нашей первой дизайн-системы в конце 2018 года мы создали новую и улучшенную дизайн-систему с нуля