Download - UI Kit and design developig workflow
Как взаимодействоватьс графическими дизайнерами:
готовим UI Kit
Молоков Артем, front-end разработчик
Как взаимодействоватьс графическими дизайнерами:
готовим UI Kit
Молоков Артем, front-end разработчик [email protected]
План доклада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
Доклад подготовилАртем Молоков, [email protected]
Спасибо за внимание!
40