Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Как взаимодействовать

с графическими дизайнерами: 

готовим UI Kit
Молоков Артем, front-end разработчик
amolokov@parallel...
План доклада
1.Проблемы разработки пользовательского
интерфейса
2.Модульный подход
3.Инструменты взаимодействия команд
2
3
1.Продуктовый сайт



2.Knowledge Base



3.Личный кабинет
Смена языка интерфейса
4
Workflow подготовки макета
Время
Менеджер Дизайнер Разработчик
Создание макета
страницы
Формулирование
задач и требований
У...
Параллельные проекты
Дизайнер 1
Разработчик 1
Дизайнер 2
Разработчик 2
6
Проблемы процесса
Обратная
связь?
Как поддерживать
актуальность?
Связь между
проектами?
7
8
Есть ли готовые решения?
9
Сторонние веб-сервисы
Пример: LayerVault, Pixelapse, Invision App
1. Работа с большинством графических форматов
2. Коммент...
11
12
Минусы веб-сервисов
• Не отражают фактического состояния сайтов
• Дороги для больших команд
• Надежность и конфиденциально...
Собственное решение
14
Концепция UI Kit
1. Абстрактный подход
2. Интерфейс — набор компонентов
3. Компоненты индивидуально документируются
4. Ком...
Пример компонента
Документация, история изменений, ...
+
16
Декомпозиция компонента
17
Глобальная навигация
Иерархия компонентов
Общие компоненты
UI Kit
Палитра Кнопки
Проект1
Ссылки
Имя
пользователя
Переключа...
UI Kit на практике
19
Взаимодействия
Дизайнер Разработчик
1. Внутри команды
2. Между командами
20
Инструменты
1. Облачное хранилище
2. Каталог графических макетов
3. Каталог реализованных компонентов
21
Облачное хранилище
Пример: Seafile, ownCloud, Acronis Access
1. Иерархия — файловая структура
2. Доступно всем участникам п...
Файловая структура
Webapps
│
├─ Common components
│ │
│ ├─ Global nav
│ ├─ Typography
│ ├─ Icons
│ ├─ Palette
│ └─ ...
│
├...
Файловая структура
Webapps
│
├─ Common components
│ │
│ ├─ Global nav
│ ├─ Typography
│ ├─ Icons
│ ├─ Palette
│ └─ ...
│
├...
Файловая структура
Webapps
│
├─ Common components
│ │
│ ├─ Global nav
│ ├─ Typography
│ ├─ Icons
│ ├─ Palette
│ └─ ...
│
├...
Пример использования
Дизайнер
Разработчик
Оповещения
Облачное
хранилище
Изменения (mockup, changelog)
Другой
разработчик
26
Недостатки формата .psd
1. Нужен Photoshop
2. Трудно отслеживать изменения
3. Трудно контролировать структуру слоев
27
Каталог графических
макетов
28
Adobe Creative Cloud
1. Входит в подписку Adobe
2. Интегрируется в Photoshop, Illustrator, ...
3. Синхронизация файлов в о...
30
Пример использования
Другие
дизайнеры
Синхронизация
Компонент
библиотеки
Правки
Дизайнер
31
Каталог реализованных
компонентов
32
Style guide
1. Веб-страница с описанием визуальных
паттернов (как Bootstrap)
2. Описывается при помощи KSS
3. Генерируется...
// Buttons
//
// Button styles used
// in the styleguide
//
// default - Default button
// .primary - Primary button
// :d...
Style
guide
Пример использования
Разработчик
Новый
разработчик
Дизайнер
FeedbackСтруктура
интерфейса
Документация
35
Общая картина
36
Состав UI Kit
Файловое
хранилище
Библиотеки
Creative Cloud
Style guide
Ревизии + - +
Документация + - +
Доступность
запись...
Workflow подготовки макета
Время
Workflow подготовки макета
Менеджер Дизайнер Разработчик
Формулирование
задачи
Рисует новый...
Плюсы использования UI Kit
1. Точка соприкосновения разных проектов
2. Прозрачный рабочий процесс
3. Уменьшение порога вхо...
Ссылки
1. Pixelapse: pixelapse.com
2. Adobe Creative Cloud: adobe.com/creativecloud.html
3. KSS: warpspire.com/kss/
4. SC5...
42
Демо-стенд
Слайды и демо:

mockups.github.io

Доклад подготовил

Артем Молоков, 

amolokov@parallels.com

Спасибо за внимание!
43
Как взаимодействовать с графическими дизайнерами: готовим UI Kit / Артем Молоков (Parallels)
Upcoming SlideShare
Loading in …5
×

Как взаимодействовать с графическими дизайнерами: готовим UI Kit / Артем Молоков (Parallels)

664 views

Published on

Frontend-разработчики и веб-дизайнеры решают совместную задачу – чтобы пользователь получил лучший user experience. Но часто смотрят на проблему с разных позиций — либо наилучшего технического решения проблемы, либо художественного видения мира. Различие инженерных и художественных подходов нередко приводит к конфликту интересов и снижает эффективность работы команды. Однако поле битвы мировоззрений можно превратить в совместное рабочее пространство. В качестве основного подхода к поиску оптимального процесса создания и сопровождения визуального стиля веб-сайта рассматривается подготовка User Interface Kit (или UI Kit). UI Kit содержит элементы, которые служат кирпичами при построении единообразного интерфейса корпоративных веб-сайтов.

Из предлагаемого доклада слушатели смогут узнать следующее:
– какие плюсы предоставляет декомпозиция дизайна;
– что такое UI Kit и какими свойствами он обладает;
– почему работа с UI Kit понравится и разработчикам, и дизайнерам, и даже менеджеру проекта;
– как можно реализовать UI Kit и организовать его хранение.

Published in: Engineering
  • Be the first to comment

  • Be the first to like this

Как взаимодействовать с графическими дизайнерами: готовим UI Kit / Артем Молоков (Parallels)

  1. 1. Как взаимодействовать
 с графическими дизайнерами: 
 готовим UI Kit Молоков Артем, front-end разработчик amolokov@parallels.com Как взаимодействовать
 с графическими дизайнерами: 
 готовим UI Kit Молоков Артем, front-end разработчик amolokov@parallels.com
  2. 2. План доклада 1.Проблемы разработки пользовательского интерфейса 2.Модульный подход 3.Инструменты взаимодействия команд 2
  3. 3. 3
  4. 4. 1.Продуктовый сайт
 
 2.Knowledge Base
 
 3.Личный кабинет Смена языка интерфейса 4
  5. 5. Workflow подготовки макета Время Менеджер Дизайнер Разработчик Создание макета страницы Формулирование задач и требований Утверждение макета Реализация макета 5
  6. 6. Параллельные проекты Дизайнер 1 Разработчик 1 Дизайнер 2 Разработчик 2 6
  7. 7. Проблемы процесса Обратная связь? Как поддерживать актуальность? Связь между проектами? 7
  8. 8. 8
  9. 9. Есть ли готовые решения? 9
  10. 10. Сторонние веб-сервисы Пример: LayerVault, Pixelapse, Invision App 1. Работа с большинством графических форматов 2. Комментирование и оповещение участников 10
  11. 11. 11
  12. 12. 12
  13. 13. Минусы веб-сервисов • Не отражают фактического состояния сайтов • Дороги для больших команд • Надежность и конфиденциальность 
 не контролируются 13
  14. 14. Собственное решение 14
  15. 15. Концепция UI Kit 1. Абстрактный подход 2. Интерфейс — набор компонентов 3. Компоненты индивидуально документируются 4. Компоненты используются всеми участниками разработки 15
  16. 16. Пример компонента Документация, история изменений, ... + 16
  17. 17. Декомпозиция компонента 17
  18. 18. Глобальная навигация Иерархия компонентов Общие компоненты UI Kit Палитра Кнопки Проект1 Ссылки Имя пользователя Переключател 18
  19. 19. UI Kit на практике 19
  20. 20. Взаимодействия Дизайнер Разработчик 1. Внутри команды 2. Между командами 20
  21. 21. Инструменты 1. Облачное хранилище 2. Каталог графических макетов 3. Каталог реализованных компонентов 21
  22. 22. Облачное хранилище Пример: Seafile, ownCloud, Acronis Access 1. Иерархия — файловая структура 2. Доступно всем участникам процесса 3. Разворачивается внутри локальной сети 4. История изменений, группы доступа, комментирование, wiki 22
  23. 23. Файловая структура Webapps │ ├─ Common components │ │ │ ├─ Global nav │ ├─ Typography │ ├─ Icons │ ├─ Palette │ └─ ... │ ├─ Access │ ├─ Desktop │ └─ Account 23
  24. 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. 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
  26. 26. Пример использования Дизайнер Разработчик Оповещения Облачное хранилище Изменения (mockup, changelog) Другой разработчик 26
  27. 27. Недостатки формата .psd 1. Нужен Photoshop 2. Трудно отслеживать изменения 3. Трудно контролировать структуру слоев 27
  28. 28. Каталог графических макетов 28
  29. 29. Adobe Creative Cloud 1. Входит в подписку Adobe 2. Интегрируется в Photoshop, Illustrator, ... 3. Синхронизация файлов в облаке 4. Создание, обмен и просмотр 
 библиотек элементов 29
  30. 30. 30
  31. 31. Пример использования Другие дизайнеры Синхронизация Компонент библиотеки Правки Дизайнер 31
  32. 32. Каталог реализованных компонентов 32
  33. 33. Style guide 1. Веб-страница с описанием визуальных паттернов (как Bootstrap) 2. Описывается при помощи KSS 3. Генерируется с помощью SC5 Style Guide Generator 33
  34. 34. // 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
  35. 35. Style guide Пример использования Разработчик Новый разработчик Дизайнер FeedbackСтруктура интерфейса Документация 35
  36. 36. Общая картина 36
  37. 37. Состав UI Kit Файловое хранилище Библиотеки Creative Cloud Style guide Ревизии + - + Документация + - + Доступность запись 
 и чтение чтение чтение Назначение Хранение эталонного представления о компонентах Синхронизация компонентов между дизайнерами Состояние реализованных компонентов 37
  38. 38. Workflow подготовки макета Время Workflow подготовки макета Менеджер Дизайнер Разработчик Формулирование задачи Рисует новый компонент Обсуждают компонент, добавляют его описание 
 и изображение в облачное хранилище Собирает макет
 из компонентов Согласовывают макет Реализует новые компоненты и макет 38
  39. 39. Плюсы использования UI Kit 1. Точка соприкосновения разных проектов 2. Прозрачный рабочий процесс 3. Уменьшение порога вхождения 40
  40. 40. Ссылки 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
  41. 41. 42 Демо-стенд
  42. 42. Слайды и демо:
 mockups.github.io
 Доклад подготовил
 Артем Молоков, 
 amolokov@parallels.com
 Спасибо за внимание! 43

×