Как и зачем мы создаем дизайн системы
#AustinDesignWeek
Я пишу этот пост вдогонку к лекции, которую мне удалось посетить во время Austin Design Week.
В дискуссии о дизайн системах участвовали Roman Gonzalez, Adam Zeiner, Elyse Holladay (Retail me not), Chris Danaraj (IBM, Bluemix), Truman Boyes and Rebecca Murphey.
Дизайн системы понятие совсем не новое, наверняка все знакомы с фреймворком Bootstrap, в основе которого лежит UI kit. Но тем не менее, когда речь заходит о дизайне, мало кто из дизайнеров задумывается о перенесении фронт-энд методологий в дизайн процесс. Для некоторых дизайнеров дизайн система это просто руководство по стилю, типа UI kit, styleguide. Так ли это или за этим стоит что-то большее? И зачем вообще дизайнеру задумываться над дизайн системами, и тем более внедрять их на практике.
Ответ на этот вопрос очевиден. Если у вас на сайте есть хотя бы несколько повторяющихся компонентов, то вам скорее всего стоит задуматься над дизайн системой. Если вы конечно не собираетесь всю свою карьеру посвятить одностраничникам. Да и на одностраничных сайтах иногда надоедает копипастить абсолютно одинаковые кнопки или отмерять одинаковые отступы между заголовками и началом параграфов в разделах.
Как же сэкономить время на бесконечном дублировании, а вместо этого помыслить более глобально и понять что можно оптимизировать так, чтобы разработчкики могли взять мою дизайн систему и практически не думая перевели ее в работающий HTML/CSS и Javascript код. При таком системном подходе вы избежите многочисленных итераций и бесконечных переделок, когда столкнетесь с обновлением дизайна. Особенно в работе над динамичными сайтами, требующими постоянного обновления контента и добавления нового функционала.
Это же стандартизация, скажете вы, а что если мой заказчик говорит о том, что хочет уйти от тривиальных решений и претворить в жизнь самую крутую визуалку? На это стоит говорить заказчику, что, мы — дизайнеры занимаемся решением задач. Для нас главное в итоге сделать качественный продукт. Для того, чтобы сделать продукт качественным, мы создаем инструменты (дизайн системы). Вся наша деятельность направлена на то, чтобы продукт в итоге был поддерживаемым и приносил прибыль заказчику. И в конце концов никто вам не мешает делать крутую визуалку.
Что же входит в дизайн систему:
- гид по стилю (это поддержка стиля бренда)
- паттерны (не путать с паттернами в скетче и фотошопе), которые могут представлять собой отдельный каталог/библиотеку.
- motion guidelines или каталог интерактивных паттернов
- UI kit. В случаях мобильного дизайна UI flow (продуманные переходы всех компонентов)
- письменная документация, объясняющая компоненты для разработчиков
- UX. Исследование пользовательской аудитории
Как вы видите, дизайн система находится на пересечении многих составляющих дизайн процесса и ее применение может заметно ускорить работу над большим и средним проектoм. Всегда стоит задумываться как сэкономить время на этапе дизайна и как можно быстрее передать проект разработчкам, так как их работа по собиранию проекта действительно трудоемкая и требует времени.
Мне как дизайнеру с небольшим опытом в разработке было крайне важно увидеть подтверждение своих мыслей о том, что должна быть какая-то система. И это не касается только символов и текстовых стилей, а также упорядоченного названия файлов в Cкетче. Вот тут, кстати, можно почитать хорошую статью Тимура Нурутдинова о том, как можно организовать рабочий процесс и ускорить создание дизайна мобильного приложения в Cкетче.
Но дизайнеры сегодня идут еще дальше, они изучают инструменты фронт-энд разработчиков и применяют их на практике. К примеру, в стартапе из Остина “Retail Me Not” они используют Pattern Lab и фреймворк React. И у них есть отдельная страничка с UI kit (основных компонентов сайта) сверстанная с помощью кода, а не существующая в виде .jpg, .png или pdf файла. Разработчикам остается только зайти на сайт, взять code snippets оттуда и вставить в проект. По их словам это значительно экономит время разработчиков, им не приходится самим прописывать каждую кнопку.
Теперь немного подробнее о том, что же такое перенесение фронт-энд методологий в дизайн.
Для создания дизайн системы используются React, Pattern Lab и Атомный подход в дизайне.
React это библиотека JavaScript (ее разработали в Facebook). С ее помощью можно легко создавать объединенные и вложенные компоненты пользовательского интерфейса. React взаимодействует с обычными HTML элементами в DOM и быстро переписывает дерево вложенных компонентов. При динамическом изменении данных, обновлятся только та часть кода, где произошли изменения. Кроме того, React компоненты рендерятся на сервере и уже на клиенте показывают обработанную разметку. React активно пользуются фронт-энд разработчики, а в Америке, как выяснилось, и дизайнеры. Вот ссылка на вебинар от Front-End Discovery из Киева о React, кому интересно узнать больше.
Pattern Lab это система. На выходе получаются компоненты для разработчиков, написанные в виде шаблонов, в основе которых лежат принципы атомного веб-дизайна. Вот тут можно посмотреть Демо. (наведите на значок посмотреть инфо в правом верхнем углу и вы увидите code snippets или так назывемый mustache), который потом разработчики используют в своем коде.
Атомный Веб-дизайн. Этот подход придумал Брэд Фрост. По ссылке можно прочитать статью об этом подходе и посмотреть презентацию на vimeo (язык английский).
Атомный дизайн описывает части веб-страниц, которые можно разделить на несколько уровней абстракций. Фрост называет следующие уровни иерархии: атомы, молекулы, организмы, шаблоны и страницы. Объединение нескольких мелких элементов формирует новый элемент UI. Так например, текст, две ссылки и изображение (т.е. три атома) могут составить новую молекулу (заголовок). Шаблоны это уже макеты с фиктивными данными. Страницы являются частью шаблонов, с полноценным контентом и, возможно, специальными элементами, которые будут показаны только в определенных случаях.
То есть в целом, дизайн система это такая экосистема, которая объединяет элементы UI из атомного подхода, инструменты (такие как плагины Craft, Sketch Measure, Zeplin для скетча, генераторы стайлгайдов (вот тут неплохой обзор от Book Apart), InVision, Principle, Framer.JS (инструменты, отвечающие за интерактивность), и все это вместе формирует последовательную методологию.
Вывод:
Благодаря дизайн системе 1) экономится время (за счет избегания мелких итераций), особенно на этапе существующего постоянно обновляемого контента, и 2) проект быстро передается фронт-энд разработчикам. Абстрактную логику для них вы уже продумали, теперь им остается только перевести ее в код. Таким образом, вы как дизайнер помогаете создать поддерживаемый, масштабируемый код, а это многого стоит. Не говоря уже о том, что создание дизайн системы помогает создать вдумчивый, проработанный, убедительный дизайн и надежный пользовательский опыт.
Это был обзорный пост. Моей задачей было познакомить дизайнеров с новой методологией, приближенной к реалиям фронт-энд разработки.
Более подробную информацию можно узнать, если ввести на медиуме в строке поиска атомный дизайн.
Надеюсь вам было полезно.
P.S. IBM и ‘Retail Me Not’ скоро выложат в открытый доступ собственные библиотеки дизайн систем. Их можно будет скачать на github.
