Universal Design Framework. Тезис.
Этот пост открывает серию публикаций про универсальный дизайн-фреймворк, который мы создаём для повышения эффективности продуктовых команд в их работе с дизайн-системами. Вы узнаете о создателях фреймворка, о том, как мы пришли к этой идее, какие задачи мы ставим перед собой, и из чего состоит фреймворк.
Проблема
Сегодня в сети много контента по теме проектирования дизайн-систем и выстраивания рабочих процессов. При правильном применении, системный подход может сильно облегчить жизнь дизайнерам и разработчикам. Но из-за избытка информации, сложно разобраться, с чего начать.
Информация сильно фрагментарна. Одни вещи очень хорошо описаны, например, Material Design и его документация по проектированию UI-элементов, а про другие приходится выискивать информацию на Medium, детально её анализировать перед применением. Сложно найти, как версионировать библиотеки компонентов в Sketch/Figma. Трудно понять, как, и нужно ли вообще, внедрять подход от AirBnb с использованием react-sketchapp в свой рабочий процесс и так далее.
У дизайн-сообщества нет единой площадки (единого источника правды) для кооперации и накопления экспертизы. При этом в индустрии существуют примеры таких площадок. Например, W3C из области разработки веб-стандартов. Они ответственны за стандарты современного веба и инкрементно развивают эти стандарты в специальных рабочих группах.
Дизайнеры и программисты общаются на разных языках, имеют разные принципы проектирования одних и тех же вещей.
“Interface design can benefit by embracing code, instead of having design and code live in two separate worlds imitating each other. By fusing them together into a shared library, designers and developers can cut down on menial work and spend time on what matters: solving bigger challenges.”
— Karl Jiang, Figma Engineering Team
Решение
Мы используем лучшие практики из дизайна и программирования и стремимся объединить опыт индустрии цифрового дизайна, чтобы создать площадку для роста и развития универсального дизайн-фреймворка.
Давайте знакомиться
Привет! Меня зовут Захар День
Я дизайнер и веб-разработчик. Работаю с большой коммерческой дизайн системой с 2016 года. В то время, когда я начинал проектировать дизайн систему, в Sketch ещё не было возможности оверрайдить вложенные символы, а до появления Figma оставалось ещё пол года. Систему проектировал в Adobe Illustrator. Кроме передачи клиенту картинок, я верстал все компоненты и отдавал в виде готового интерфейса в браузере. В то время я только познакомился с Atomic Design Methodology и начал применять её в рабочем проекте. Так как мне нужно было после проектирования переносить все компоненты в код, я разработал сквозную систему именования компонентов о которой расскажу позже.
Параллельно с этим я руковожу кафедрой «Дизайн и программирование» в Школе дизайна НИУ ВШЭ. С конца 2018 года вместе со мной над библиотекой работает мой студент. Он сделал большой вклад в развитие этого проекта. Благодаря ему и доверию клиента, на сегодняшний день мы смогли перенести библиотеку в Sketch. Теперь она содержит 1000+ компонентов и реализована в коде в виде React-компонентов, которые доставляются в виде NPM-пакета в продукт.
В работе над этим проектом мы столкнулись с огромным количеством проблем, которые приходилось решать, искать информацию и прототипировать решения, чтобы проверить их эффективность. Всё это вылилось в огромные трудозатраты, но на выходе мы получили ценный опыт, которым хотим поделиться. Так родилась идея универсального дизайн-фреймворка, который впоследствии стал дипломным проектом для моего студента.
Привет! Меня зовут Даня
Тема моего диплома: «Методология работы с графическими пользовательскими интерфейсами и их программной реализацией» или, проще говоря, «Универсальный дизайн-фреймворк».
В ходе работы с большой дизайн-системой мы прошли несколько этапов, пересобрали библиотеку несколько раз и пришли к выводам, которые привели нас к созданию фреймворка. В рамках диплома мы проводим исследования, сравниваем возможности различных графических редакторов, инструментов для версионирования и систем для документирования компонентов. Мы моделируем варианты организации хранения компонентов, дизайн-артефактов, версионирования файлов и библиотек, чтобы описать лучшие практики в первой спецификации фреймворка.
Описание проекта
Цели проекта
При создании проекта мы ставим себе две цели. Первая — сделать фреймворк, который поможет повысить эффективность продуктовой команды и станет единым языком для дизайна и разработки. Вторая — сформировать сообщество для развития фреймворка и накопления экспертизы.
На начальном этапе мы проанализируем, доработаем и уточним методы, которые мы применяем при разработке цифровых продуктов. Фреймворк будет состоять из следующих частей: компонентная методология, проектная методология и библиотека компонентов в дизайне и коде.
Компонентная методология
Включает в себя методы для организации и именования компонентов интерфейса в дизайне и коде.
“Operations are basically responsible for all of the overhead that makes design happen.”
— Josh Ulm, Oracle
Проектная методология
Включает в себя метод для версионирования дизайн-артефактов (черновых эскизов и финальных макетов); метод для организации и версионирования библиотек компонентов; метод организации единого источника правды в коде (не реализуемо с имеющимися технологиями, ждём обновление от Figma); метод организации проектной дизайн-документации.
Библиотека компонентов
Включает в себя библиотеку компонентов в Sketch и Figma, NPM-пакет с библиотекой компонентов на React; проект с применением библиотеки и фреймворка в Sketch и Figma; проект с применением библиотеки в коде на GitHub.
Тайминг проекта
Ноябрь
- Описать компонентную методологию
Декабрь
- Описать метод версионирования дизайн артефактов
Январь
- Описать метод организации работы с библиотеками компонентов и их версиями
- Опубликовать альфа версию библиотеки компонентов для Sketch и Figma
Февраль
- Описать метод организации единого источника правды в коде
- Опубликовать альфа версию библиотеки компонентов в виде NPM пакета
Март
- Описать метод организации проектной дизайн-документации
- Опубликовать альфа версию проекта с применением компонентов в Sketch и Figma
Апрель
- Опубликовать альфа версию проекта с применением компонентов из NPM пакета
Май
- Релиз сайта UDF
- Релиз бета-версий библиотеки компонентов и NPM пакета
- Релиз статьи про бренд и айдентику UDF
Июнь
- Подводим итоги первой части проекта и принимаем решение по развитию проекта
Заключение
Если вы уже долгое время развиваете дизайн-систему и нашли решения описанных проблем, мы будем рады встретиться с вами или связаться в любой удобной форме для обмена опытом. Ваша обратная связь будет очень полезна!
Если вы хотите получить доступ к неопубликованной информации, которая находится в разработке, или хотите присоединиться к процессу разработки фреймворка, свяжитесь с нами через Spectrum.
Вы никогда не работали с дизайн-системами? Мы будем рады узнать, насколько понятно для вас изложен материал, и есть ли что-то из изложенного непонятное, что требует дополнительного описания.
Присоединяйтесь к развитию фреймворка, вступайте в сообщество на Spectrum, расскажите о UDF друзьям.
