Как создать масштабируемую дизайн-систему: рассматриваем на примере SaaS-продуктов

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

Мы нашли и перевели практическую статью о том, как организовать дизайн-систему для SaaS-продуктов. Она раскладывает на шаги создание дизайн-системы.

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

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

Эволюция разработки интерфейсов в сторону компонентного подхода (ReactJS, AngularJS) создала потребность в централизованных системах.

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

Работы по созданию дизайн-системы можно разделить на две части:

• Стандартизация дизайна — определение и создание шаблонов проектирования.
• Рекомендации по оформлению — документация, которая объясняет, как использовать компоненты.

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

Дизайн-система, как и руководство по стилю, начинается со следующих шагов:

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

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

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

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

Создание стандартного макета страницы — самая важная часть дизайна в SaaS-приложении. Для создания макетов необходимо выстроить информационную архитектуру и пользовательские сценарии.

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

В зависимости от типа данных, можно стандартизировать следующие макеты в SaaS-продукте:

• Дашборд с отображением статистики и графиков.
• Макет для больших списков с сортировкой и фильтрами.
• Отображение ленты активности.
• Формы для создания и редактирования контента.
• Макет для настроек.
• Беседы, чаты.

Поработайте над стандартным зонированием для каждого макета страницы. Определите место для навигации, разместите кнопку «Назад» и другую дополнительную навигацию. Используйте доступную зону для основного содержимого, а остальное пространство для дополнительного.

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

Самая большая проблема на данном этапе — найти «единую сетку для всего».

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

Чтобы найти подходящий адаптивный дизайн, необходимо объединить несколько правил:

• Определите наиболее подходящую ширину содержимого для удобного чтения.
• Определите порядок отображения контента при ограниченном просмотре.
• Убедитесь, что важная информация всегда доступна.

Если продукт поддерживает несколько языков, при стандартизации следует учитывать, что ширина содержимого может отличаться от одного языка к другому.

Для дизайна используется множество инструментов: Sketch, Figma, AdobeXD. Основная идея — выбрать тот, в котором удобнее создать библиотеку повторно используемых компонентов интерфейса, чтобы импортировать их в любой рабочий файл.

Например, если вы используете Sketch, функция Sketch Libraries позволит создать общий файл со всеми стилями. Библиотеку можно импортировать в любой файл Sketch и предоставить доступ к элементам в ней. По мере увеличения количества символов файл библиотеки может стать тяжелым и медленно загружаться. Его можно разделить на отдельные файлы и создать отдельные библиотеки для значков, кнопок, форм. Sketch позволяет вкладывать библиотеки друг в друга.

В Figma есть функция Team Library, которая позволяет создавать компоненты интерфейса и совместно использовать их в нескольких документах.

Хранение компонентов в библиотеках сэкономит время при совместной работе. Внедрите такой процесс: как только утвержден новый компонент, дизайнеры должны добавить все элементы в общую библиотеку или обновить старые. Обновление распространит изменения на существующие файлы.

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

• Стили. Укажите, как использовать цвета, типографику, интервалы, иконки, стили изображений, графики и т. д.
• Компоненты. Перечислите все компоненты пользовательского интерфейса: кнопки, таблицы, баннеры, формы, диалоговые окна — и дайте рекомендации по их использованию. Приведите примеры состояний для компонентов.
• Макеты. Объясните, как использовать макеты страниц, навигации, уведомлений, индикаторов обратной связи, оверлеев и диалогов, справочных текстов, всплывающих подсказок и т. д.
• Контент. Рекомендации по формату данных, интернационализации, доступности, пустому содержимому и страницам ошибок.

В зависимости от вашего продукта вам может потребоваться больше или меньше разделов для гайдлайна.