Frontend-разработчики и веб-дизайнеры решают совместную задачу – чтобы пользователь получил лучший user experience. Но часто смотрят на проблему с разных позиций — либо наилучшего технического решения проблемы, либо художественного видения мира. Различие инженерных и художественных подходов нередко приводит к конфликту интересов и снижает эффективность работы команды. Однако поле битвы мировоззрений можно превратить в совместное рабочее пространство. В качестве основного подхода к поиску оптимального процесса создания и сопровождения визуального стиля веб-сайта рассматривается подготовка User Interface Kit (или UI Kit). UI Kit содержит элементы, которые служат кирпичами при построении единообразного интерфейса корпоративных веб-сайтов.
Из предлагаемого доклада слушатели смогут узнать следующее:
– какие плюсы предоставляет декомпозиция дизайна;
– что такое UI Kit и какими свойствами он обладает;
– почему работа с UI Kit понравится и разработчикам, и дизайнерам, и даже менеджеру проекта;
– как можно реализовать UI Kit и организовать его хранение.
15. Концепция UI Kit
1. Абстрактный подход
2. Интерфейс — набор компонентов
3. Компоненты индивидуально документируются
4. Компоненты используются всеми участниками
разработки
15
22. Облачное хранилище
Пример: Seafile, ownCloud, Acronis Access
1. Иерархия — файловая структура
2. Доступно всем участникам процесса
3. Разворачивается внутри локальной сети
4. История изменений, группы доступа,
комментирование, wiki
22
23. Файловая структура
Webapps
│
├─ Common components
│ │
│ ├─ Global nav
│ ├─ Typography
│ ├─ Icons
│ ├─ Palette
│ └─ ...
│
├─ Access
│
├─ Desktop
│
└─ Account
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
24
25. Файловая структура
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)
25
29. Adobe Creative Cloud
1. Входит в подписку Adobe
2. Интегрируется в Photoshop, Illustrator, ...
3. Синхронизация файлов в облаке
4. Создание, обмен и просмотр
библиотек элементов
29
33. Style guide
1. Веб-страница с описанием визуальных
паттернов (как Bootstrap)
2. Описывается при помощи KSS
3. Генерируется с помощью SC5 Style Guide
Generator
33
37. Состав UI Kit
Файловое
хранилище
Библиотеки
Creative Cloud
Style guide
Ревизии + - +
Документация + - +
Доступность
запись
и чтение
чтение чтение
Назначение
Хранение
эталонного
представления
о компонентах
Синхронизация
компонентов
между
дизайнерами
Состояние
реализованных
компонентов
37
38. Workflow подготовки макета
Время
Workflow подготовки макета
Менеджер Дизайнер Разработчик
Формулирование
задачи
Рисует новый компонент
Обсуждают компонент, добавляют его описание
и изображение в облачное хранилище
Собирает макет
из компонентов
Согласовывают макет
Реализует новые
компоненты и макет
38
39.
40. Плюсы использования UI Kit
1. Точка соприкосновения разных проектов
2. Прозрачный рабочий процесс
3. Уменьшение порога вхождения
40