Atomic Design и Sketch — руководство по улучшению рабочего процесса

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

Дизайн-системы: введение

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

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

Material Design от Google является примером структурированной системы дизайна пользовательского интерфейса. Материальный дизайн был представлен еще в 2014 году как способ проектирования и разработки целостных приложений для Android.

Другой пример — Voice and Tone Mailchimp. Он описывает, как голос всегда один и тот же, но тон меняется в зависимости от контекста. Понимание этого помогает расширить возможности контента и придать бренду индивидуальность.

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

Атомарный дизайн: системы проектирования зданий

Атомарный дизайн, методология, представленная Брэдом Фростом в 2013 году, основана на идее, что каждую систему дизайна можно определить как серию строительных блоков, которые сосуществуют.

Вот краткий обзор компонентов Atomic Design:

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

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

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

Как использовать атомарный дизайн в Sketch

Для разработки дизайн-системы с помощью Atomic Design отличным (и уже знакомым) инструментом является Sketch. Он предоставляет нам холст для создания атомов, молекул и организмов: элементов, необходимых для определения ядра дизайн-системы.

Создание атомов

Мы начнем с создания трех типов атомов в Sketch: символы, стили слоя и стили текста.

Символы. Символы — это не что иное, как повторно используемые компоненты. Они определяются один раз, потому что их можно создавать во всем продукте. Например, символ стрелки (атом) может быть определен с такими свойствами, как цвет границы, размер и т. д. Затем мы можем повторно использовать этот символ без необходимости его повторного создания каждый раз.

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

Стили текста. Стили текста, как и стили слоя, представляют собой элементы многократного использования, обеспечивающие единообразие похожих текстовых объектов. Например, определение размера шрифта и цвета элемента h1. Он работает аналогично стилям текста в Google Docs или Microsoft Word.

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

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

Мы можем представить символы, используя следующее предлагаемое соглашение об именах в Atoms/ :

• Ресурсы
• Кнопки
• Элементы управления вводом
• Картинки
• Навигация
• Информация

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

• Заполняет
• Границы
• Тени
• Градиенты

Подобно стилям слоя, вот как мы можем создать текстовые стили в Atoms /:

• Заголовки
• Тело
• Подпись
• Этикетки
• Ссылки

Единый язык дизайна не должен быть просто набором статических правил и отдельных атомов; это должна быть развивающаяся экосистема. — Airbnb о создании визуального языка.

Создание молекул

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

Соединение метки (атома) с кнопкой ввода (атома) для создания функции поиска — хороший пример часто используемого элемента молекулы.

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

Основные категории, подпадающие под Molecules/ :

• Информация
• Навигация
• Элементы управления вводом

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

• Выпадающие списки
• Переключает
• Слайдеры
• Вкладки
• Пагинация
• Индикаторы прогресса
• Поля даты
• Текстовые поля
• Флажки
• Радио-кнопки
• Модули

Создание Организмов

Организмы – это группы атомов и молекул. Они также могут быть частью других организмов.

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

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

Организмы, как и молекулы, могут относиться к одним и тем же категориям и подкатегориям:

Вот основные категории, которые мы создадим для Организмов/:

• Информация
• Навигация
• Элементы управления вводом

Как и в случае с молекулами, мы также создадим подкатегории для организмов:

• Выпадающие списки
• Переключает
• Слайдеры
• Вкладки
• Пагинация
• Индикаторы прогресса
• Поля даты

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

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

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

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

Завершение

Sketch и Atomic Design — это мощный набор инструментов, которые можно использовать вместе для улучшения рабочих процессов проектирования и создания эффективной структуры системы проектирования.

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

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

Дальнейшее чтение в блоге Toptal Design:

• Как создать эффективную структуру дизайна
• Понимание систем дизайна и шаблонов
• Как создать руководство по стилю эскиза, библиотеку и набор пользовательского интерфейса
• Зачем стартапам нужен Styleguide
• Плагин Zeplin Sketch — мост рабочего процесса между проектированием и проектированием