Почему ваш фирстиль и библиотека шаблонов – это совсем не дизайн-система?
Airbnb, Uber и IBM изменили подход к дизайну цифровых продуктов, внедрив собственную дизайн-систему. Благодаря готовым компонентам и четким гайдлайнам по их применению, каждая из этих компаний смогла ускорить процесс создания и разработки проектов внутри своих команд. Во многих организациях есть то, что они считают дизайн-системой, но обычно это – не более, чем отдельные группы элементов и фрагментов кода. UI-Kit или коллекция шаблонов могут быть отправной точкой, но они являются только частью большого процесса.
Мы изучили и адаптировали подробное руководство от Уилла Фэнги из InVision. Он разобрался, в чем разница между дизайн-системой и фирменным стилем или библиотекой шаблонов. Делимся с вами главными выводами, трендами и полезными материалами из его статьи.
User Interface Kit - это набор основных элементов дизайна пользовательского интерфейса. В него входят шрифты, цвета, графические элементы, формы регистрации/обратной связи или кнопки, блоки меню, виджеты, а также элементы каталогов, карточек товаров. UI-kit ускоряет и упрощает работу, не нужно создавать каждый элемент с нуля, а всего лишь выбрать готовый из библиотеки - у каждого члена команды есть доступ и возможность быстро обратиться к нужному компоненту. Каждая новая разработка, основывается на уже сформированной системе, тем самым сохраняется логика и структура интерфейса
Важность дизайн-систем
Эммет Коннолли, директор по дизайну продуктов в Intercom, сравнивает большинство систем проектирования с огромной коробкой деталей Lego, которые можно собирать и компоновать бесконечное количество раз, и каждый раз результат будет другим. В создании цифрового продукта паттерны не главное, важнее – структура и смысл.
По словам Марко Суареса, дизайнера продуктов в InVision, решающее значение в создании уникального пользовательского опыта имеет стандартизация – документы, гайдлайны о том, для чего и как использовать те или иные элементы, и что учитывать при создании новых.
Обзор полезных материалов для погружения:
Выступление Дайаны Маунтер, менеджера по дизайн-системам в Github, о том, как улучшить и ускорить рабочий процесс внутри команды, как понять, что бизнесу пора внедрять свою дизайн-систему и какого объема материалов будет достаточно.
Чтобы быстро внедрять изменения и выполнять итерации, важен единый и понятный источник правил создания продукта для всей команды, а не просто готовая коллекция компонентов. Создание библиотеки шаблонов, правил и гайдлайнов по UX гарантирует соответствие общему стилю и духу бренда при выпуске продуктов в больших масштабах.
Создание продуманных систем проектирования интерфейсов позволяет адаптировать продукт под различные устройства, браузеры и новые среды с минимальными временными и финансовыми затратами.
Согласно этой методологии, атомы – это базовые элементы, такие как цвета, иконки, кнопки и т.п., они функциональны, но не могут существовать сами по себе. Молекулы группируют простейшие компоненты в единый смысловой блок (юнит), что позволяет уже создавать готовые решения. Далее они объединяются в более сложные организмы – например, меню или карточки товара в интернет-магазине, которая может состоять из изображения, кнопки, текстового описания, цены. Это уже позволяет отразить визуальный стиль интерфейса блока и вносить необходимые правки.
Шаблоны представляют собой пустые макеты страниц – прототипы, а страницы уже наполнены контентом и являются завершенным продуктом.
Атомарный дизайн привносит логику и структуру в отдельные элементы или страницы.
Полный стек – это красная нить, объединяющая воедино язык, дизайн и элементы кода для конкретного продукта.
Как отмечает Уилл Фэнги, ни один клиент не купит продукт, выслушав увлеченный рассказ о методологии атомарного дизайна или посетив семинар по модулям. Его может заинтересовать только профит – функция, которая позволит сэкономить время и даст наилучший результат. Важно убедить в эффективности и преимуществах подхода в конечном итоге, а не акцентировать внимание на рабочий процесс.
Более 10 лет назад дизайн-системами назывались просто библиотеки шаблонов. С появлением на рынке в 2014 году Material Design – системы для создания интерфейсов программного обеспечения и приложений, разработанной компанией Google – концепция окончательно созрела. Согласованность, эффективность и масштабируемость – теперь главные ценности. Но способны ли дизайн-системы решить все проблемы современного UX-дизайна, остается вопросом.
Энн Грундхофер, старший UX-дизайне, и Дрю Лумер, архитектор решений, подробно рассказывают о том, как внедрение дизайн-системы влияет на пользовательский опыт.
Кэти Сайлор-Миллер, старший инженер-программист в Etsy, уверена, что технический подход второстепенен, важнее создать живой, гибкий организм, способный адаптироваться и масштабироваться в долгосрочной перспективе
Выстраиваем дизайн-систему
Шаг №1. Проведите визуальный аудит
Начните с изучения внешнего вида приложения, сайта или какого-либо другого цифрового продукта. Оцените используемые вами CSS-стили и качество уже реализованных элементов, так вы сможете спрогнозировать насколько сложным может быть этот процесс.
Шаг №2. Создайте визуальный язык
Он является ядром системы и состоит из различных компонентов. Своеобразный стиль коммуникации и узкопрофильный словарь, который используют все члены команды проектирования и разработки.
– Определитесь с цветами
Нагляднее всего бренд представляют 1-3 выбранных цвета. Допускается использовать диапазон оттенков в сочетании с белым или черным, или настраивая уровень прозрачности, что позволит расширить простор для творчества дизайнерам.
– Утвердите типографику
Большинство дизайн-систем включают всего 2 шрифта: 1 шрифт для заголовков и основного текста и моноширинный шрифт для кода. Сохраняйте простоту, чтобы не перегружать и не сбивать с толку пользователя. Держите количество шрифтов на низком уровне; это не только лучшая практика типографского дизайна, но и предотвращение проблем с производительностью, вызванных чрезмерным использованием веб-шрифтов.
– Стандартизируйте размер и интервалы
Важно соблюдать ритм и баланс при настройке интервалов и выборе размеров основных шрифтов. Наиболее популярные и читабельные форматы работают с метриками на основе 4-балльной шкалы, используемой Apple и Google – всегда кратны 4-м.
– Образы
Язык визуального дизайна призывает придерживаться не только определенного стиля изображений, но и правил их использования. Важно установить рекомендации для иллюстраций и иконок, касательно их стиля, толщины линий, заливки и многого другого, это позволит в зависимости от ситуации выбрать наиболее подходящий формат, сохраняя единообразие.
Шаг №3. Создайте библиотеку UI-паттернов (или UI-kit)
На этом этапе нужно собрать все элементы пользовательского интерфейса в единую систему. Рекомендуем объединить повторяющиеся кнопки, формы, окна и изображения и удалить то, что не востребовано или выбивается из общей стилистики.
Шаг №4. Пропишите подробные инструкции, укажите что представляет собой каждый компонент и когда его использовать.
«Стандартны и гайдлайны – это самый важный фактор, отличающий простую библиотеку шаблонов от продуманной дизайн-системы. Чтобы создать ее, важно подобрать сильную команду. Кто должен быть в ней? Осторожно, спойлер! Вам понадобится больше, чем просто дизайнеры», – считает Джина Энн, защитник систем дизайна и бывший ведущий дизайнер Salesforce.
В качестве отличного руководства для новичков советуем Справочник по дизайн-системам, который поможет создать свою систему и улучшить качество продукта, сократив при этом цикл производства. Дополнительно полезно прочитать разработки по менеджменту дизайн-систем от InVision.
Дополнительные ресурсы
Выступление Пола Фарино из Pivotal Labs «Дизайн-системы: от нуля к единице»Автор рассказывает о жизненном цикле и итеративном характере построения дизайн-системы. Узнаете, как найти взаимопонимание внутри команды и какие тактические способы масштабирования и поддержки существуют.
Материал позволяет взглянуть на построение дизайн-систем с точки зрения спорта – это марафон, а не спринт. Таким образом вы постепенно закладываете базу и наращиваете её. Необходимо детальное понимание всех продуктов бренда, чтобы целостно прорабатывать UX.
Авторы рассказывают о том, как поддерживать систему в течение долгого времени, как исправлять ошибки, вносить изменения или делать «капитальный ремонт».
Продажа – это процесс, который требует хороших ораторских навыков, чтобы показать команде лучший вариант. Нужно запоминающееся имя и красочная презентация. Включите своего внутреннего Дона Дрейпера или Стива Джобса 2007 года.
Запись с конференции You Gotta Love Frontend «Разработка дизайн-системы | Джина Энн, команда Design Systems в Salesforce UX»Узнаете о подходах к проектированию и созданию эффективной и адаптивной системы дизайна, ее элементах и главных факторах успеха.
Примеры крутых дизайн-систем от лидеров рынка
Дизайн-система Atlassian основана на индивидуальном подходе и связи инструментов с людьми. Их основной месседж – быть человечным, а не юмористическим – “human” over “humorous”. Главные ценности – доступность, позволяющая даже людям с ограничениями по зрению использовать их продукты с комфортом.
Система дизайна Shopify называется Polaris. Главная цель – донести идею масштабируемости и простоты использования. Shopify помогает компаниям управлять глобальной сетью, предлагая опыт, который дает «даже самому неопытному предпринимателю наилучшие шансы на успех».
Доступность и продуманный дизайн имеют первостепенное значение для Polaris. Масштабирование бизнеса они сравнивают с восхождением на гору, поэтому их дизайнерские решения направлены на то, чтобы любой пользователь почувствовал, что он справился с преодолением вершины и решил свою задачу.
Рекомендуем еще несколько репозиториев дизайн-систем, руководств по стилю и библиотек паттернов на StyleGuides.io и материалов, собранных в репозитории Alex Pate на GitHub.
Примеры отечественных дизайн-систем
Вдохновившись примерами мировых корпораций, мы решили найти российские компании, которые имеют собственные дизайн-системы и рассказать вам о них. Это оказалось непростой задачей, но мы справились. В процессе мы обнаружили интересный онлайн-проект «КОД», представляющий собой удобный каталог отечественных компонентных дизайн-систем, размещенных в свободном доступе. С помощью бота в телеграм любая организация может подать заявку и попасть в список. Сейчас там уже более 20 компаний – рекомендуем к просмотру.
Дизайн-система Ростелекома отражает идею метавселенной в каждом элементе и стандарте. Компания стремится к кастомизации не только в визуальном пространстве, но использует четкие гайдлайны в рекламных и маркетинговых сферах. На сайте они делятся анонсами новых компонентов, а также собственными кейсами с упором на количественные результаты.
В Вышке руководствуются несколькими принципами при построении системы – это человечность, адаптивность, простота и приоритет контента. Все элементы должны направлять внимание пользователя на контент, поэтому их стиль узнаваем и лаконичен. Библиотека компонентов и руководства по использованию элементов регулярно обновляются и дорабатываются.
Дизайн-система ISPsystem содержит более 1000+ вариантов компонентов, гайдлайны, элементы визуального языка и кода, а также UI-kit.
Вот тут можно посмотреть много примеров дизайн систем - https://vc.ru/design/748524-dizayn-sistemy-77-primerov-ot-vedushchih-dizayn-komand