UI Kit is an abstract conception to organize your user interface in modular way. It strongly relies on documentating design components. Learn how to build your team's workflow by implementing the UI Kit for next project.

1. Как взаимодействовать
с графическими дизайнерами:
готовим UI Kit
Молоков Артем, front-end разработчик
amolokov@parallels.com
Как взаимодействовать
с графическими дизайнерами:
готовим UI Kit
Молоков Артем, front-end разработчик
amolokov@parallels.com

2. План доклада
1. Проблемы разработки пользовательского
интерфейса
2. Модульный подход
3. Инструменты взаимодействия команд
2

3. 3

4. 1. Продуктовый сайт
2. Knowledge Base
3. Личный кабинет
Смена языка интерфейса
4

5. Workflow подготовки макета
Время
Менеджер Дизайнер Разработчик
Создание макета
страницы
Формулирование задач
и требований
Утверждение макета
Реализация макета
5

6. Параллельные проекты
Дизайнер 1
Разработчик 1
Дизайнер 2
Разработчик 2
6

7. Проблемы процесса
Обратная
связь?
Как поддерживать
актуальность?
Связь между
проектами?
7

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

9. Сторонние веб-сервисы
Пример: LayerVault, Pixelapse, Invision App
1. Работа с большинством графических форматов
2. Комментирование и оповещение участников
9

10. 10

11. 11

12. Минусы веб-сервисов
• Не отражают фактического состояния сайтов
• Дороги для больших команд
• Надежность и конфиденциальность
не контролируются
12

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

14. Концепция UI Kit
1. Абстрактный подход
2. Интерфейс — набор компонентов
3. Компоненты индивидуально документируются
4. Компоненты используются всеми участниками
разработки
14

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

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

17. Глобальная навигация
Иерархия компонентов
Общие компоненты
UI Kit
Палитра Кнопки
Проект1
Ссылки
Имя
пользователя
Переключатель
17

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

19. Взаимодействия
Дизайнер Разработчик
1. Внутри команды
2. Между командами
19

20. Инструменты
1. Облачное хранилище
2. Каталог графических макетов
3. Каталог реализованных компонентов
20

21. Облачное хранилище
Пример: Seafile, ownCloud, Acronis Access
1. Иерархия — файловая структура
2. Доступно всем участникам процесса
3. Разворачивается внутри локальной сети
4. История изменений, группы доступа,
комментирование, wiki
21

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

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
23

24. Файловая структура
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

25. Пример использования
Дизайнер
Разработчик
Оповещения
Облачное
хранилище
Изменения (mockup, changelog)
Другой
разработчик
25

26. Недостатки формата .psd
1. Нужен Photoshop
2. Трудно отслеживать изменения
3. Трудно контролировать структуру слоев
26

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

28. Adobe Creative Cloud
1. Входит в подписку Adobe
2. Интегрируется в Photoshop, Illustrator, ...
3. Синхронизация файлов в облаке
4. Создание, обмен и просмотр
библиотек элементов
28

29. 29

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

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

32. Style guide
1. Веб-страница с описанием визуальных
паттернов (как bootstrap)
2. Описывается при помощи KSS
3. Генерируется с помощью SC5 Style Guide
Generator
32

33. //
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

34. Style
guide
Пример использования
Разработчик
Новый
разработчик
Дизайнер
FeedbackСтруктура
интерфейса
Документация
34

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

36. Состав UI Kit
Файловое
хранилище
Библиотеки
Creative Cloud
Style guide
Ревизии + - +
Документация + - +
Доступность
запись
и чтение
чтение чтение
Назначение
Хранение
эталонного
представления
о компонентах
Синхронизация
компонентов
между
дизайнерами
Состояние
реализованных
компонентов
36

37. Workflow подготовки макета
Время
Workflow подготовки макета
Менеджер Дизайнер Разработчик
Формулирование
задачи
Рисует новый компонент
Обсуждают компонент, добавляют его описание
и изображение в облачное хранилище
Собирает макет
из компонентов
Согласовывают макет
Реализует новые
компоненты и макет
37

38. Плюсы использования UI Kit
1. Точка соприкосновения разных проектов
2. Прозрачный рабочий процесс
3. Уменьшение порога вхождения
38

39. Ссылки
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

40. Слайды и демо:
mockups.github.io
Доклад подготовил
Артем Молоков,
amolokov@parallels.com
Спасибо за внимание!
40