Если вы дизайнер, разработчик, менеджер или любопытный руководитель, желающий масштабировать брендинг своей компании с последовательностью: эта статья для вас.
Прочитав эту статью, вы будете иметь четкое представление о том, что такое маркеры дизайна и как они могут помочь вашей команде управлять брендингом в масштабе.
Однако эта статья посвящена тому, почему и что такое маркеры дизайна. Я не буду делиться с вами тем, как создавать, называть, преобразовывать или распространять их в вашей системе дизайна. Эти темы заслуживают отдельной статьи.
Готовы? Давайте погрузимся 🤿.
Основная бизнес-проблема
Чтобы представить вам, что такое дизайн-токены, я сначала сделаю акцент на бизнес-проблеме, которую они решают.
Все организации в мире имеют одну общую черту: у них есть брендинг. Этот брендинг позволяет им общаться и отличаться друг от друга. Если говорить коротко, то брендинг вашей организации — это основа ее коммуникации.
В прошлом, когда печать была королем, брендинг определялся в графической хартии. Сегодня этот свод графических правил эволюционировал, чтобы учесть огромное количество экранов, окружающих нас. Ваш брендинг должен применяться последовательно везде, независимо от того, по какому каналу вы общаетесь. Системы дизайна — это логическое развитие графических правил. Они помогают всем, кто участвует в создании, поддержании и использовании брендинга, работать вместе.
Ваш брендинг — это часть доверия аудитории к вашей организации. Берегите его, чтобы ваша аудитория оставалась с вами.
Как бы вы отреагировали, если бы получили электронное письмо от вашего банка с устаревшим логотипом?
Как бы вы себя чувствовали, если бы веб-сайт вашего банка и мобильное приложение не имели одинакового брендинга?
Что бы вы подумали ночью, когда интерфейс в режиме полной подсветки жжет ваши маленькие глазки?
Позвольте мне рассказать вам одну историю. Речь идет о простом ребрендинге организации ACME. Мы окажемся на месте дизайнера, который пытается применить дизайнерское решение в масштабе.
Вот оно. Вы — новый руководитель отдела дизайна в ACME Corp. Вы взволнованы и не можете дождаться начала ребрендинга, для которого вас наняли. Этот ребрендинг заключается в замене основного цвета вашей организации на новый. Замена одного цвета.
Проходит некоторое время, и вы наконец-то довольны новым брендингом. Он «просто» должен быть применен в каждом интерфейсе каждого продукта вашей организации.
К сожалению для вас, у вашей организации много интерфейсов и много платформ, которые необходимо поддерживать:
- маркетинговый веб-сайт
- веб-приложение
- приложение для Android
- приложение для iOS
Вы смелы и полны решимости выполнить свою миссию. Вы решаете лично попросить каждого менеджера каждой инженерной команды обновить цвет в их кодовой базе с помощью нового значения, которое вы выбрали.
Вы открываете Slack и начинаете писать:
Hey Steve,
I've updated our main brand color.
The old one is rgb(237, 200, 078).
The new one is rgb(187, 45, 23).
Can you update your codebase with the new value please?
Cheers
Вы думаете, что это не составит труда. Предупреждение о спойлере: вы ошибаетесь.
Стив, менеджер, отвечающий за веб-платформу, отвечает, и разговор выглядит следующим образом:
- Стив: Спасибо за новое значение цвета. У вас есть HEX-значение?
- Вы: Это
#EDC840. Думаю, да… 😬 - Стив: Вы уверены? Я не совсем уверен в этом и у меня много работы.
А вы даже не получили ответ от менеджеров команд Android и iOS. А между прочим, как вы, возможно, догадались, эти платформы обрабатывают цвет в разных форматах.
Вы начинаете понимать, что между вами и разработчиками, с которыми вы работаете, что-то нарушено. Донесение дизайнерских решений и обеспечение их правильного применения — утомительная задача. Другими словами, в вашей организации нет «языка дизайна», которым могли бы пользоваться дизайнеры и разработчики.
Мы — люди. А не машины. Абсолютные значения, такие как цветовой код RGB или HEX, не говорят сами за себя.
Чтобы подчеркнуть это, давайте переиначим известную цитату:
Розы — это
#ff0000,фиалки —
#624de3,Дизайнерские жетоны — это мило,
И вы тоже.
Применение нового цвета на нескольких платформах не должно занимать месяцы…
В 2015 году компания Spotify провела ребрендинг и, соответственно, обновила свои рекомендации по бренду. Им потребовалось несколько месяцев, чтобы распространить новый зеленый цвет на все свои платформы. Теперь, благодаря их системе дизайна, основанной на маркерах, это займет всего несколько минут.
А обновление шрифта на многих сайтах не должно стоить миллионы.
Мэтью Стрём — дизайнер, ранее работавший в Wall Street Journal. Им нужно было обновить шрифт на главном сайте и всех его суббрендах. Им потребовалось 2 года и 100 человек, чтобы изменить его. И даже сейчас на некоторых страницах все еще используется старый шрифт.
Как front-end разработчик, я предполагаю, что дизайнеры отвечают за принятие дизайнерских решений. Изменить цвет, размер шрифта или любой «основной стиль» и увидеть результат на любой платформе должно быть для них несложно. К сожалению, в настоящее время это не так.
Разве не было бы здорово, если бы дизайнеры могли принимать дизайнерские решения и видеть, что они применяются правильно везде, автоматически?
Что такое маркеры дизайна?
Маркеры дизайна — это имена, используемые для выражения проектных решений на языке дизайна вашей организации. Эти названия предназначены для использования и понимания людьми, такими как вы и я. Дизайнерские решения могут быть цветом, шрифтом, радиусом границы, иконкой, размером шрифта, градиентом или даже длительностью анимации.
«Дизайнерские маркеры — это язык для передачи намерений между разрозненными частями системы».
Этан Маркотте, Дизайн-системы
Система дизайна — это ваша земля, а ваши маркеры дизайна — это язык, который люди используют для передачи друг другу дизайнерских решений.
Помимо использования дизайн-токенов в разговорах, вы будете использовать их в основном в своих продуктах. Токены дизайна встречаются буквально повсюду, в том числе и на этой странице.
Давайте разберем цифровой продукт:
- Цифровой продукт состоит из функций
- Функция состоит из интерфейсов
- Интерфейс состоит из компонентов
- Компонент состоит из маркеров дизайна
В Specify наш основной фирменный цвет называется фиолетовый «app-base-violet», а его значение #624de3.
Вот анатомия нашего основного фирменного цвета:
{
"name": "app-base-violet",
"value": "#624de3",
"type": "color"
}
Этот цвет может быть преобразован и отформатирован в соответствии с потребностями любой платформы: Android, iOS, Web и т.д..
Дизайнерские маркеры могут храниться в коде. Это делает их настолько мощными, насколько это позволяют инженеры. Помните, что дизайн-токены предназначены для использования во всей вашей системе проектирования и продуктах. Для этого их необходимо преобразовать, чтобы они могли использоваться различными командами.
Используя маркеры дизайна, вы защищаете брендинг вашей организации и облегчаете управление им.
Дизайнерские маркеры помогут вам достичь:
- Уникальный источник истины для вашего брендинга
- Лучшая передача информации от дизайна к разработке
- Согласованность дизайна в любом пользовательском интерфейсе продукта
- Улучшенное управление вашей системой дизайна
- Более простое управление темами и функциями белой маркировки
- Правильная методология сотрудничества между командами
Для дизайнеров
Используйте маркеры дизайна, если:
- Вы устали видеть, что дизайн приносится в жертву, потому что разработчики не могут или не умеют правильно реализовать вашу работу.
- Вы хотите иметь возможность управлять дизайнерским решением от его определения до развертывания
- Вы хотите, чтобы каждая часть интерфейса приложения и все элементы имели одинаковый внешний вид и ощущение.
Для разработчиков
Используйте маркеры дизайна, если:
- Вы хотите тратить больше времени на работу над ценными бизнес-функциями, а не на ручное обновление значений маркеров дизайна
- Вы хотите улучшить свой опыт при использовании и рефакторинге стилей
- Вы хотите использовать темные/светлые темы и/или продукты нескольких брендов.
Для менеджеров
Используйте маркеры дизайна, если:
- Вам надоело видеть, как накапливаются тикеты об ошибках в стилях.
- Вы хотите, чтобы дизайнеры и разработчики нашли общий язык и беспрепятственно сотрудничали друг с другом
- Вам нужно облегчить масштабирование ваших команд.
Заключение
Токены дизайна позволяют продуктовым командам лучше сотрудничать и обеспечивать согласованность бренда на любой платформе.
Это действительно захватывающее время для проектирования и создания согласованных пользовательских интерфейсов в масштабе. Дизайн-токены здесь надолго. Наша экосистема принимает их, и вы тоже должны это делать. Давайте снова сделаем дизайн веселым. Вместе.
Спасибо за чтение!