Как взаимодействоватьс графическими дизайнерами:

готовим UI Kit

Молоков Артем, front-end разработчик

amolokov@parallels.com

Как взаимодействоватьс графическими дизайнерами:

готовим UI Kit

Молоков Артем, front-end разработчик amolokov@parallels.com

План доклада1. Проблемы разработки пользовательского интерфейса

2. Модульный подход

3. Инструменты взаимодействия команд

2

3

1. Продуктовый сайт

2. Knowledge Base

3. Личный кабинет

Смена языка интерфейса

4

Workflow подготовки макета

Время

Менеджер Дизайнер Разработчик

Создание макета страницы

Формулирование задач и требований

Утверждение макета

Реализация макета

5

Параллельные проекты

Дизайнер 1

Разработчик 1

Дизайнер 2

Разработчик 2

6

Проблемы процесса

Обратнаясвязь?

Как поддерживать актуальность?

Связь междупроектами?

7

Есть ли готовые решения?

8

Сторонние веб-сервисы

Пример: LayerVault, Pixelapse, Invision App

1. Работа с большинством графических форматов

2. Комментирование и оповещение участников

9

10

11

Минусы веб-сервисов• Не отражают фактического состояния сайтов

• Дороги для больших команд

• Надежность и конфиденциальность не контролируются

12

Собственное решение

13

Концепция UI Kit

1. Абстрактный подход

2. Интерфейс — набор компонентов

3. Компоненты индивидуально документируются

4. Компоненты используются всеми участниками разработки

14

Пример компонента

Документация, история изменений, ...+

15

Декомпозиция компонента

16

Глобальная навигация

Иерархия компонентов

Общие компоненты

UI Kit

Палитра Кнопки

Проект1

Ссылки Имя пользователя

Переключатель

17

UI Kit на практике

18

Взаимодействия

Дизайнер Разработчик

1. Внутри команды

2. Между командами

19

Инструменты

1. Облачное хранилище

2. Каталог графических макетов

3. Каталог реализованных компонентов

20

Облачное хранилище

Пример: Seafile, ownCloud, Acronis Access

1. Иерархия — файловая структура

2. Доступно всем участникам процесса

3. Разворачивается внутри локальной сети

4. История изменений, группы доступа, комментирование, wiki

21

Файловая структураWebapps                    │                                ├─  Common  components      │    │                          │    ├─  Global  nav│    ├─  Typography  │    ├─  Icons            │    ├─  Palette          │    └─  ...                │                                ├─  Access                │                                ├─  Desktop              │                                └─  Account  

22

Файловая структураWebapps                    │                                ├─  Common  components      │    │                          │    ├─  Global  nav│    ├─  Typography  │    ├─  Icons            │    ├─  Palette          │    └─  ...                │                                ├─  Access                │                                ├─  Desktop              │                                └─  Account  

                                         Global  nav                │                                    ├─  Links  group          ├─  User  name              ├─  Company  name        ├─  Toggle                    ├─  mockup.png            ├─  changelog.txt      └─  behaviour.txt                                                                              

23

Файловая структураWebapps                    │                                ├─  Common  components      │    │                          │    ├─  Global  nav│    ├─  Typography  │    ├─  Icons            │    ├─  Palette          │    └─  ...                │                                ├─  Access                │                                ├─  Desktop              │                                └─  Account  

                                         Global  nav                │                                    ├─  Links  group          ├─  User  name              ├─  Company  name        ├─  Toggle                    ├─  mockup.png  (внешний  вид)            ├─  changelog.txt  (история  правок)    └─  behaviour.txt  (use  cases)                                                                              

24

Пример использованияДизайнер

Разработчик

Оповещения

Облачное хранилище

Изменения (mockup, changelog)

Другойразработчик

25

Недостатки формата .psd1. Нужен Photoshop

2. Трудно отслеживать изменения

3. Трудно контролировать структуру слоев

26

Каталог графических макетов

27

Adobe Creative Cloud

1. Входит в подписку Adobe

2. Интегрируется в Photoshop, Illustrator, ...

3. Синхронизация файлов в облаке

4. Создание, обмен и просмотр библиотек элементов

28

29

Пример использования

Другиедизайнеры

Синхронизация

Компонентбиблиотеки

Правки

Дизайнер

30

Каталог реализованныхкомпонентов

31

Style guide

1. Веб-страница с описанием визуальных паттернов (как bootstrap)

2. Описывается при помощи KSS

3. Генерируется с помощью SC5 Style Guide Generator

32

//  Buttons////  Button  styles  used  //  in  the  styleguide////  default  -­‐  Default  button//  .primary  -­‐  Primary  button//  :disabled  -­‐  Disabled  button////  markup://  <button  class="{$modifiers}">//      Label//  </button>////  Styleguide  2.3

button  {   ...   &:hover  {...}   &.primary  {...}   &:disabled  {...}}

33

Style guide

Пример использованияРазработчик

Новыйразработчик

Дизайнер

FeedbackСтруктура интерфейса

Документация

34

Общая картина

35

Состав UI KitФайловое хранилище

Библиотеки Creative Cloud

Style guide

Ревизии + - +

Документация + - +

Доступность запись и чтение

чтение чтение

Назначение

Хранение эталонного представления о компонентах

Синхронизация компонентов между

дизайнерами

Состояниереализованных компонентов

36

Workflow подготовки макета

Время

Workflow подготовки макетаМенеджер Дизайнер РазработчикФормулирование

задачи

Рисует новый компонент

Обсуждают компонент, добавляют его описание и изображение в облачное хранилище

Собирает макет из компонентов

Согласовывают макет

Реализует новые компоненты и макет

37

Плюсы использования UI Kit

1. Точка соприкосновения разных проектов

2. Прозрачный рабочий процесс

3. Уменьшение порога вхождения

38

Ссылки

1. Pixelapse: https://www.pixelapse.com

2. Adobe Creative Cloud: http://www.adobe.com/creativecloud.html

3. KSS: http://warpspire.com/kss/

4. SC5 Style Guide Generator: http://styleguide.sc5.io

5. Seafile: http://www.seafile.com

39

Слайды и демо:

mockups.github.io

Доклад подготовилАртем Молоков, amolokov@parallels.com

Спасибо за внимание!

40