Как взаимодействовать с графическими дизайнерами:...
TRANSCRIPT
![Page 1: Как взаимодействовать с графическими дизайнерами: готовим UI Kit / Артем Молоков (Parallels)](https://reader034.vdocuments.site/reader034/viewer/2022042723/586f91971a28ab54768b7d45/html5/thumbnails/1.jpg)
Как взаимодействоватьс графическими дизайнерами:
готовим UI Kit
Молоков Артем, front-end разработчик
Как взаимодействоватьс графическими дизайнерами:
готовим UI Kit
Молоков Артем, front-end разработчик [email protected]
![Page 2: Как взаимодействовать с графическими дизайнерами: готовим UI Kit / Артем Молоков (Parallels)](https://reader034.vdocuments.site/reader034/viewer/2022042723/586f91971a28ab54768b7d45/html5/thumbnails/2.jpg)
План доклада1.Проблемы разработки пользовательского интерфейса
2.Модульный подход3.Инструменты взаимодействия команд
2
![Page 3: Как взаимодействовать с графическими дизайнерами: готовим UI Kit / Артем Молоков (Parallels)](https://reader034.vdocuments.site/reader034/viewer/2022042723/586f91971a28ab54768b7d45/html5/thumbnails/3.jpg)
3
![Page 4: Как взаимодействовать с графическими дизайнерами: готовим UI Kit / Артем Молоков (Parallels)](https://reader034.vdocuments.site/reader034/viewer/2022042723/586f91971a28ab54768b7d45/html5/thumbnails/4.jpg)
1.Продуктовый сайт
2.Knowledge Base
3.Личный кабинет
Смена языка интерфейса
4
![Page 5: Как взаимодействовать с графическими дизайнерами: готовим UI Kit / Артем Молоков (Parallels)](https://reader034.vdocuments.site/reader034/viewer/2022042723/586f91971a28ab54768b7d45/html5/thumbnails/5.jpg)
Workflow подготовки макета
Время
Менеджер Дизайнер Разработчик
Создание макета страницы
Формулирование задач и требований
Утверждение макета
Реализация макета
5
![Page 6: Как взаимодействовать с графическими дизайнерами: готовим UI Kit / Артем Молоков (Parallels)](https://reader034.vdocuments.site/reader034/viewer/2022042723/586f91971a28ab54768b7d45/html5/thumbnails/6.jpg)
Параллельные проекты
Дизайнер 1
Разработчик 1
Дизайнер 2
Разработчик 2
6
![Page 7: Как взаимодействовать с графическими дизайнерами: готовим UI Kit / Артем Молоков (Parallels)](https://reader034.vdocuments.site/reader034/viewer/2022042723/586f91971a28ab54768b7d45/html5/thumbnails/7.jpg)
Проблемы процесса
Обратнаясвязь?
Как поддерживать актуальность?
Связь междупроектами?
7
![Page 8: Как взаимодействовать с графическими дизайнерами: готовим UI Kit / Артем Молоков (Parallels)](https://reader034.vdocuments.site/reader034/viewer/2022042723/586f91971a28ab54768b7d45/html5/thumbnails/8.jpg)
8
![Page 9: Как взаимодействовать с графическими дизайнерами: готовим UI Kit / Артем Молоков (Parallels)](https://reader034.vdocuments.site/reader034/viewer/2022042723/586f91971a28ab54768b7d45/html5/thumbnails/9.jpg)
Есть ли готовые решения?
9
![Page 10: Как взаимодействовать с графическими дизайнерами: готовим UI Kit / Артем Молоков (Parallels)](https://reader034.vdocuments.site/reader034/viewer/2022042723/586f91971a28ab54768b7d45/html5/thumbnails/10.jpg)
Сторонние веб-сервисы
Пример: LayerVault, Pixelapse, Invision App
1. Работа с большинством графических форматов
2. Комментирование и оповещение участников
10
![Page 11: Как взаимодействовать с графическими дизайнерами: готовим UI Kit / Артем Молоков (Parallels)](https://reader034.vdocuments.site/reader034/viewer/2022042723/586f91971a28ab54768b7d45/html5/thumbnails/11.jpg)
11
![Page 12: Как взаимодействовать с графическими дизайнерами: готовим UI Kit / Артем Молоков (Parallels)](https://reader034.vdocuments.site/reader034/viewer/2022042723/586f91971a28ab54768b7d45/html5/thumbnails/12.jpg)
12
![Page 13: Как взаимодействовать с графическими дизайнерами: готовим UI Kit / Артем Молоков (Parallels)](https://reader034.vdocuments.site/reader034/viewer/2022042723/586f91971a28ab54768b7d45/html5/thumbnails/13.jpg)
Минусы веб-сервисов• Не отражают фактического состояния сайтов
• Дороги для больших команд
• Надежность и конфиденциальность не контролируются
13
![Page 14: Как взаимодействовать с графическими дизайнерами: готовим UI Kit / Артем Молоков (Parallels)](https://reader034.vdocuments.site/reader034/viewer/2022042723/586f91971a28ab54768b7d45/html5/thumbnails/14.jpg)
Собственное решение
14
![Page 15: Как взаимодействовать с графическими дизайнерами: готовим UI Kit / Артем Молоков (Parallels)](https://reader034.vdocuments.site/reader034/viewer/2022042723/586f91971a28ab54768b7d45/html5/thumbnails/15.jpg)
Концепция UI Kit
1. Абстрактный подход
2. Интерфейс — набор компонентов
3. Компоненты индивидуально документируются
4. Компоненты используются всеми участниками разработки
15
![Page 16: Как взаимодействовать с графическими дизайнерами: готовим UI Kit / Артем Молоков (Parallels)](https://reader034.vdocuments.site/reader034/viewer/2022042723/586f91971a28ab54768b7d45/html5/thumbnails/16.jpg)
Пример компонента
Документация, история изменений, ...+
16
![Page 17: Как взаимодействовать с графическими дизайнерами: готовим UI Kit / Артем Молоков (Parallels)](https://reader034.vdocuments.site/reader034/viewer/2022042723/586f91971a28ab54768b7d45/html5/thumbnails/17.jpg)
Декомпозиция компонента
17
![Page 18: Как взаимодействовать с графическими дизайнерами: готовим UI Kit / Артем Молоков (Parallels)](https://reader034.vdocuments.site/reader034/viewer/2022042723/586f91971a28ab54768b7d45/html5/thumbnails/18.jpg)
Глобальная навигация
Иерархия компонентов
Общие компоненты
UI Kit
Палитра Кнопки
Проект1
Ссылки Имя пользователя
Переключател
18
![Page 19: Как взаимодействовать с графическими дизайнерами: готовим UI Kit / Артем Молоков (Parallels)](https://reader034.vdocuments.site/reader034/viewer/2022042723/586f91971a28ab54768b7d45/html5/thumbnails/19.jpg)
UI Kit на практике
19
![Page 20: Как взаимодействовать с графическими дизайнерами: готовим UI Kit / Артем Молоков (Parallels)](https://reader034.vdocuments.site/reader034/viewer/2022042723/586f91971a28ab54768b7d45/html5/thumbnails/20.jpg)
Взаимодействия
Дизайнер Разработчик
1. Внутри команды
2. Между командами
20
![Page 21: Как взаимодействовать с графическими дизайнерами: готовим UI Kit / Артем Молоков (Parallels)](https://reader034.vdocuments.site/reader034/viewer/2022042723/586f91971a28ab54768b7d45/html5/thumbnails/21.jpg)
Инструменты
1. Облачное хранилище
2. Каталог графических макетов
3. Каталог реализованных компонентов
21
![Page 22: Как взаимодействовать с графическими дизайнерами: готовим UI Kit / Артем Молоков (Parallels)](https://reader034.vdocuments.site/reader034/viewer/2022042723/586f91971a28ab54768b7d45/html5/thumbnails/22.jpg)
Облачное хранилище
Пример: Seafile, ownCloud, Acronis Access
1. Иерархия — файловая структура
2. Доступно всем участникам процесса
3. Разворачивается внутри локальной сети
4. История изменений, группы доступа, комментирование, wiki
22
![Page 23: Как взаимодействовать с графическими дизайнерами: готовим UI Kit / Артем Молоков (Parallels)](https://reader034.vdocuments.site/reader034/viewer/2022042723/586f91971a28ab54768b7d45/html5/thumbnails/23.jpg)
Файловая структура
Webapps │ ├─ Common components │ │ │ ├─ Global nav │ ├─ Typography │ ├─ Icons │ ├─ Palette │ └─ ... │ ├─ Access │ ├─ Desktop │ └─ Account
23
![Page 24: Как взаимодействовать с графическими дизайнерами: готовим UI Kit / Артем Молоков (Parallels)](https://reader034.vdocuments.site/reader034/viewer/2022042723/586f91971a28ab54768b7d45/html5/thumbnails/24.jpg)
Файловая структура
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
![Page 25: Как взаимодействовать с графическими дизайнерами: готовим UI Kit / Артем Молоков (Parallels)](https://reader034.vdocuments.site/reader034/viewer/2022042723/586f91971a28ab54768b7d45/html5/thumbnails/25.jpg)
Файловая структура
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
![Page 26: Как взаимодействовать с графическими дизайнерами: готовим UI Kit / Артем Молоков (Parallels)](https://reader034.vdocuments.site/reader034/viewer/2022042723/586f91971a28ab54768b7d45/html5/thumbnails/26.jpg)
Пример использованияДизайнер
Разработчик
Оповещения
Облачное хранилище
Изменения (mockup, changelog)
Другойразработчик
26
![Page 27: Как взаимодействовать с графическими дизайнерами: готовим UI Kit / Артем Молоков (Parallels)](https://reader034.vdocuments.site/reader034/viewer/2022042723/586f91971a28ab54768b7d45/html5/thumbnails/27.jpg)
Недостатки формата .psd1. Нужен Photoshop
2. Трудно отслеживать изменения
3. Трудно контролировать структуру слоев
27
![Page 28: Как взаимодействовать с графическими дизайнерами: готовим UI Kit / Артем Молоков (Parallels)](https://reader034.vdocuments.site/reader034/viewer/2022042723/586f91971a28ab54768b7d45/html5/thumbnails/28.jpg)
Каталог графических макетов
28
![Page 29: Как взаимодействовать с графическими дизайнерами: готовим UI Kit / Артем Молоков (Parallels)](https://reader034.vdocuments.site/reader034/viewer/2022042723/586f91971a28ab54768b7d45/html5/thumbnails/29.jpg)
Adobe Creative Cloud
1. Входит в подписку Adobe
2. Интегрируется в Photoshop, Illustrator, ...
3. Синхронизация файлов в облаке
4. Создание, обмен и просмотр библиотек элементов
29
![Page 30: Как взаимодействовать с графическими дизайнерами: готовим UI Kit / Артем Молоков (Parallels)](https://reader034.vdocuments.site/reader034/viewer/2022042723/586f91971a28ab54768b7d45/html5/thumbnails/30.jpg)
30
![Page 31: Как взаимодействовать с графическими дизайнерами: готовим UI Kit / Артем Молоков (Parallels)](https://reader034.vdocuments.site/reader034/viewer/2022042723/586f91971a28ab54768b7d45/html5/thumbnails/31.jpg)
Пример использования
Другиедизайнеры
Синхронизация
Компонентбиблиотеки
Правки
Дизайнер
31
![Page 32: Как взаимодействовать с графическими дизайнерами: готовим UI Kit / Артем Молоков (Parallels)](https://reader034.vdocuments.site/reader034/viewer/2022042723/586f91971a28ab54768b7d45/html5/thumbnails/32.jpg)
Каталог реализованныхкомпонентов
32
![Page 33: Как взаимодействовать с графическими дизайнерами: готовим UI Kit / Артем Молоков (Parallels)](https://reader034.vdocuments.site/reader034/viewer/2022042723/586f91971a28ab54768b7d45/html5/thumbnails/33.jpg)
Style guide
1. Веб-страница с описанием визуальных паттернов (как Bootstrap)
2. Описывается при помощи KSS
3. Генерируется с помощью SC5 Style Guide Generator
33
![Page 34: Как взаимодействовать с графическими дизайнерами: готовим UI Kit / Артем Молоков (Parallels)](https://reader034.vdocuments.site/reader034/viewer/2022042723/586f91971a28ab54768b7d45/html5/thumbnails/34.jpg)
// Buttons // // Button styles used // in the styleguide // // default - Default button // .primary - Primary button // :disabled - Disabled button // // markup: // <button class="sg {$modifiers}"> // Button text // </button> // // Styleguide 2.3
button { ... &:hover {...} &.primary {...} &:disabled {...} }
34
![Page 35: Как взаимодействовать с графическими дизайнерами: готовим UI Kit / Артем Молоков (Parallels)](https://reader034.vdocuments.site/reader034/viewer/2022042723/586f91971a28ab54768b7d45/html5/thumbnails/35.jpg)
Style guide
Пример использованияРазработчик
Новыйразработчик
Дизайнер
FeedbackСтруктура интерфейса
Документация
35
![Page 36: Как взаимодействовать с графическими дизайнерами: готовим UI Kit / Артем Молоков (Parallels)](https://reader034.vdocuments.site/reader034/viewer/2022042723/586f91971a28ab54768b7d45/html5/thumbnails/36.jpg)
Общая картина
36
![Page 37: Как взаимодействовать с графическими дизайнерами: готовим UI Kit / Артем Молоков (Parallels)](https://reader034.vdocuments.site/reader034/viewer/2022042723/586f91971a28ab54768b7d45/html5/thumbnails/37.jpg)
Состав UI KitФайловое хранилище
Библиотеки Creative Cloud Style guide
Ревизии + - +
Документация + - +
Доступностьзапись и чтение чтение чтение
Назначение
Хранение эталонного представления о компонентах
Синхронизация компонентов между
дизайнерами
Состояниереализованных компонентов
37
![Page 38: Как взаимодействовать с графическими дизайнерами: готовим UI Kit / Артем Молоков (Parallels)](https://reader034.vdocuments.site/reader034/viewer/2022042723/586f91971a28ab54768b7d45/html5/thumbnails/38.jpg)
Workflow подготовки макета
Время
Workflow подготовки макетаМенеджер Дизайнер РазработчикФормулирование
задачи
Рисует новый компонент
Обсуждают компонент, добавляют его описание и изображение в облачное хранилище
Собирает макет из компонентов
Согласовывают макет
Реализует новые компоненты и макет
38
![Page 39: Как взаимодействовать с графическими дизайнерами: готовим UI Kit / Артем Молоков (Parallels)](https://reader034.vdocuments.site/reader034/viewer/2022042723/586f91971a28ab54768b7d45/html5/thumbnails/39.jpg)
![Page 40: Как взаимодействовать с графическими дизайнерами: готовим UI Kit / Артем Молоков (Parallels)](https://reader034.vdocuments.site/reader034/viewer/2022042723/586f91971a28ab54768b7d45/html5/thumbnails/40.jpg)
Плюсы использования UI Kit
1. Точка соприкосновения разных проектов
2. Прозрачный рабочий процесс
3. Уменьшение порога вхождения
40
![Page 41: Как взаимодействовать с графическими дизайнерами: готовим UI Kit / Артем Молоков (Parallels)](https://reader034.vdocuments.site/reader034/viewer/2022042723/586f91971a28ab54768b7d45/html5/thumbnails/41.jpg)
Ссылки
1. Pixelapse: pixelapse.com
2. Adobe Creative Cloud: adobe.com/creativecloud.html
3. KSS: warpspire.com/kss/
4. SC5 Style Guide Generator: styleguide.sc5.io
5. Seafile: seafile.com
41
![Page 42: Как взаимодействовать с графическими дизайнерами: готовим UI Kit / Артем Молоков (Parallels)](https://reader034.vdocuments.site/reader034/viewer/2022042723/586f91971a28ab54768b7d45/html5/thumbnails/42.jpg)
42
Демо-стенд
![Page 43: Как взаимодействовать с графическими дизайнерами: готовим UI Kit / Артем Молоков (Parallels)](https://reader034.vdocuments.site/reader034/viewer/2022042723/586f91971a28ab54768b7d45/html5/thumbnails/43.jpg)
Слайды и демо:
mockups.github.io
Доклад подготовилАртем Молоков, [email protected]
Спасибо за внимание!
43