Документ описывает процесс создания комплексного UI-кита для крупных проектов, акцентируя внимание на важности синхронизации между UX-дизайнерами и разработчиками. Он подчеркивает использование компонентного подхода, общих принципов и стандартных компонентов для повышения качества продукта и уменьшения ошибок. Кроме того, в документе раскрываются преимущества интеграции технологий и унификации процессов для повышения эффективности работы всех участников проекта.

1. UI kit
1
Конструктор для больших проектов

2. Проектируем
и разрабатываем сервисы
2

3. 3

4. 4

5. 5

6. • Студенты
• Кураторы
• Преподаватели
• Контент-менеджеры
• Администраторы
6
Английский
онлайн
для компаний

7. ~400экранов в прототипе
7

8. — Дизайнер
Nooooo!
8

9. 9

10. 10

11. Styleguide не тащит
11

12. UI
kit 12

13. Styleguide
13
Статичный UI kit

14. Styleguide
14
Библиотека

15. Guidelines
Принципы стилизации, создания компонентов,
построения страниц.
Правила работы сетки и лэйаута, типографики,
анимации.
15

16. 16

17. 17

18. Процесс
18

19. При обычном каскадном процессе
работать не будет.
Нужна синхронизация.
19

20. UX IA Проектирование
Дизайн- UI kit Сложные макеты Верстка
UI компоненты
UX, IA → Проектирование → Визуальная концепция → Все макеты → Styleguid
20
→ → →
Было
Стало
и визуальная
концепции

21. Было
• Перерисовка — время
• Слабое погружение в проект
• Ошибки, плохой порядок
• Дизайн как картина
21
Стало
• Синхронизация UX, дизайнера,
разработчика
• Компонентный подход

22. Этапы создания
22

23. Структура и семантика
Долой бардак
• Именование по БЭМ
• Сначала структура, потом реализация
• Рабочая среда:
Табличка + репозиторий / SourceJS / Для простых проектов Frontify
23

24. 24

25. Валидация
25

26. Общие принципы
и элементы
26

27. 27

28. 28

29. 29

31. Если сразу использовать
готовые шаблоны и библиотеки,
вы не разберетесь в предмете
31

32. Дизайнер — это инженер.
Инженер смотрит на вещи
как ребенок
— Как это работает?
32

33. 33

34. 34

35. 35

36. 36

37. Стандартные компоненты
37

38. 38

40. 40

41. 41

42. Нестандартные компоненты
42

43. Навигация (сценарные и ролевые различия)
Специфичные для проекта виджеты
• магазин: мини-корзина или слайдер фильтра стоимости,
• портал: виджет рекомендованных статей,
• сервис заказа услуг: календарь с выбором даты и времени…
43

44. 44

45. 45

46. 46

47. 47

48. 48
Работает

49. 49

50. 50

51. 51

52. Гайдлайн. Здравый смысл
Внедрение (Колосков, Ветров пишут)
Переиспользование — быстрый старт
52

53. Зачем мне это всё?
53

54. Ты или используешь
технологии в работе или
конкурируешь с ними
• Дизайн-шаблоны (Baikal UI kit)
• Платформы (Squarespace, Киоск)
• Дизайн-фреймворки (Bootstrap, Bem-components, UIkit, Pure и т.д.)
• Дизайнеры-разработчики
54

55. Польза
55

56. Дизайнеру
• Унификация и проработка — качество продукта
• Меньше мелких задач и рутины
• Больше времени на серьезные задачи (концепцию и UX)
• Интеграция в смежные области — знания и опыт
56
→

57. Разработчику
• Компонентный подход (работа с независимыми блоками) →
унификация, структурность, переиспользование → качество продукта
• Общая рабочая среда с дизайнером → экономия времени
• Это интересно + останется время на фишки
57

58. Проекту
• Сроки
• Поддержка без дизайнера
• Масштабирование
• Меньше косяков, багов
58

59. Спасибо!
Добавляйте в друзья, скину презу
fb.com/by.talk
59