ui kit. Конструктор для больших проектов
TRANSCRIPT
![Page 1: UI kit. Конструктор для больших проектов](https://reader033.vdocuments.mx/reader033/viewer/2022051502/58ef48491a28abea738b464d/html5/thumbnails/1.jpg)
UI kit1
Конструктор для больших проектов
![Page 2: UI kit. Конструктор для больших проектов](https://reader033.vdocuments.mx/reader033/viewer/2022051502/58ef48491a28abea738b464d/html5/thumbnails/2.jpg)
Проектируем и разрабатываем сервисы
2
![Page 3: UI kit. Конструктор для больших проектов](https://reader033.vdocuments.mx/reader033/viewer/2022051502/58ef48491a28abea738b464d/html5/thumbnails/3.jpg)
3
![Page 4: UI kit. Конструктор для больших проектов](https://reader033.vdocuments.mx/reader033/viewer/2022051502/58ef48491a28abea738b464d/html5/thumbnails/4.jpg)
4
![Page 5: UI kit. Конструктор для больших проектов](https://reader033.vdocuments.mx/reader033/viewer/2022051502/58ef48491a28abea738b464d/html5/thumbnails/5.jpg)
5
![Page 6: UI kit. Конструктор для больших проектов](https://reader033.vdocuments.mx/reader033/viewer/2022051502/58ef48491a28abea738b464d/html5/thumbnails/6.jpg)
• Студенты
• Кураторы
• Преподаватели
• Контент-менеджеры
• Администраторы
6
Английский онлайндля компаний
![Page 7: UI kit. Конструктор для больших проектов](https://reader033.vdocuments.mx/reader033/viewer/2022051502/58ef48491a28abea738b464d/html5/thumbnails/7.jpg)
~ 400экранов в прототипе
7
![Page 8: UI kit. Конструктор для больших проектов](https://reader033.vdocuments.mx/reader033/viewer/2022051502/58ef48491a28abea738b464d/html5/thumbnails/8.jpg)
— Дизайнер
Nooooo!
8
![Page 9: UI kit. Конструктор для больших проектов](https://reader033.vdocuments.mx/reader033/viewer/2022051502/58ef48491a28abea738b464d/html5/thumbnails/9.jpg)
9
![Page 10: UI kit. Конструктор для больших проектов](https://reader033.vdocuments.mx/reader033/viewer/2022051502/58ef48491a28abea738b464d/html5/thumbnails/10.jpg)
10
![Page 11: UI kit. Конструктор для больших проектов](https://reader033.vdocuments.mx/reader033/viewer/2022051502/58ef48491a28abea738b464d/html5/thumbnails/11.jpg)
Styleguide не тащит11
![Page 12: UI kit. Конструктор для больших проектов](https://reader033.vdocuments.mx/reader033/viewer/2022051502/58ef48491a28abea738b464d/html5/thumbnails/12.jpg)
UIkit
12
![Page 13: UI kit. Конструктор для больших проектов](https://reader033.vdocuments.mx/reader033/viewer/2022051502/58ef48491a28abea738b464d/html5/thumbnails/13.jpg)
Styleguide13
Статичный UI kit
![Page 14: UI kit. Конструктор для больших проектов](https://reader033.vdocuments.mx/reader033/viewer/2022051502/58ef48491a28abea738b464d/html5/thumbnails/14.jpg)
Styleguide14
Библиотека
![Page 15: UI kit. Конструктор для больших проектов](https://reader033.vdocuments.mx/reader033/viewer/2022051502/58ef48491a28abea738b464d/html5/thumbnails/15.jpg)
GuidelinesПринципы стилизации, создания компонентов, построения страниц.
Правила работы сетки и лэйаута, типографики, анимации.
15
![Page 16: UI kit. Конструктор для больших проектов](https://reader033.vdocuments.mx/reader033/viewer/2022051502/58ef48491a28abea738b464d/html5/thumbnails/16.jpg)
16
![Page 17: UI kit. Конструктор для больших проектов](https://reader033.vdocuments.mx/reader033/viewer/2022051502/58ef48491a28abea738b464d/html5/thumbnails/17.jpg)
17
![Page 18: UI kit. Конструктор для больших проектов](https://reader033.vdocuments.mx/reader033/viewer/2022051502/58ef48491a28abea738b464d/html5/thumbnails/18.jpg)
Процесс
18
![Page 19: UI kit. Конструктор для больших проектов](https://reader033.vdocuments.mx/reader033/viewer/2022051502/58ef48491a28abea738b464d/html5/thumbnails/19.jpg)
При обычном каскадном процессе работать не будет. Нужна синхронизация.
19
![Page 20: UI kit. Конструктор для больших проектов](https://reader033.vdocuments.mx/reader033/viewer/2022051502/58ef48491a28abea738b464d/html5/thumbnails/20.jpg)
UX IA Проектирование
Дизайн- UI kit Сложные макеты Верстка
UI компоненты
UX, IA → Проектирование → Визуальная концепция → Все макеты → Styleguide → Верстка
20
→ → →
Было
Стало
и визуальная концепции
![Page 21: UI kit. Конструктор для больших проектов](https://reader033.vdocuments.mx/reader033/viewer/2022051502/58ef48491a28abea738b464d/html5/thumbnails/21.jpg)
Было
• Перерисовка — время
• Слабое погружение в проект
• Ошибки, плохой порядок
• Дизайн как картина
21
Стало
• Синхронизация UX, дизайнера, разработчика
• Компонентный подход
![Page 22: UI kit. Конструктор для больших проектов](https://reader033.vdocuments.mx/reader033/viewer/2022051502/58ef48491a28abea738b464d/html5/thumbnails/22.jpg)
Этапы создания
22
![Page 23: UI kit. Конструктор для больших проектов](https://reader033.vdocuments.mx/reader033/viewer/2022051502/58ef48491a28abea738b464d/html5/thumbnails/23.jpg)
Структура и семантикаДолой бардак
• Именование по БЭМ
• Сначала структура, потом реализация
• Рабочая среда: Табличка + репозиторий / SourceJS / Для простых проектов Frontify
23
![Page 24: UI kit. Конструктор для больших проектов](https://reader033.vdocuments.mx/reader033/viewer/2022051502/58ef48491a28abea738b464d/html5/thumbnails/24.jpg)
24
![Page 25: UI kit. Конструктор для больших проектов](https://reader033.vdocuments.mx/reader033/viewer/2022051502/58ef48491a28abea738b464d/html5/thumbnails/25.jpg)
Валидация
25
![Page 26: UI kit. Конструктор для больших проектов](https://reader033.vdocuments.mx/reader033/viewer/2022051502/58ef48491a28abea738b464d/html5/thumbnails/26.jpg)
Общие принципы и элементы
26
![Page 27: UI kit. Конструктор для больших проектов](https://reader033.vdocuments.mx/reader033/viewer/2022051502/58ef48491a28abea738b464d/html5/thumbnails/27.jpg)
27
![Page 28: UI kit. Конструктор для больших проектов](https://reader033.vdocuments.mx/reader033/viewer/2022051502/58ef48491a28abea738b464d/html5/thumbnails/28.jpg)
28
![Page 29: UI kit. Конструктор для больших проектов](https://reader033.vdocuments.mx/reader033/viewer/2022051502/58ef48491a28abea738b464d/html5/thumbnails/29.jpg)
29
![Page 30: UI kit. Конструктор для больших проектов](https://reader033.vdocuments.mx/reader033/viewer/2022051502/58ef48491a28abea738b464d/html5/thumbnails/30.jpg)
![Page 31: UI kit. Конструктор для больших проектов](https://reader033.vdocuments.mx/reader033/viewer/2022051502/58ef48491a28abea738b464d/html5/thumbnails/31.jpg)
Если сразу использовать готовые шаблоны и библиотеки, вы не разберетесь в предмете
31
![Page 32: UI kit. Конструктор для больших проектов](https://reader033.vdocuments.mx/reader033/viewer/2022051502/58ef48491a28abea738b464d/html5/thumbnails/32.jpg)
Дизайнер — это инженер. Инженер смотрит на вещи как ребенок— Как это работает?
32
![Page 33: UI kit. Конструктор для больших проектов](https://reader033.vdocuments.mx/reader033/viewer/2022051502/58ef48491a28abea738b464d/html5/thumbnails/33.jpg)
33
![Page 34: UI kit. Конструктор для больших проектов](https://reader033.vdocuments.mx/reader033/viewer/2022051502/58ef48491a28abea738b464d/html5/thumbnails/34.jpg)
34
![Page 35: UI kit. Конструктор для больших проектов](https://reader033.vdocuments.mx/reader033/viewer/2022051502/58ef48491a28abea738b464d/html5/thumbnails/35.jpg)
35
![Page 36: UI kit. Конструктор для больших проектов](https://reader033.vdocuments.mx/reader033/viewer/2022051502/58ef48491a28abea738b464d/html5/thumbnails/36.jpg)
36
![Page 37: UI kit. Конструктор для больших проектов](https://reader033.vdocuments.mx/reader033/viewer/2022051502/58ef48491a28abea738b464d/html5/thumbnails/37.jpg)
Стандартные компоненты
37
![Page 38: UI kit. Конструктор для больших проектов](https://reader033.vdocuments.mx/reader033/viewer/2022051502/58ef48491a28abea738b464d/html5/thumbnails/38.jpg)
38
![Page 39: UI kit. Конструктор для больших проектов](https://reader033.vdocuments.mx/reader033/viewer/2022051502/58ef48491a28abea738b464d/html5/thumbnails/39.jpg)
![Page 40: UI kit. Конструктор для больших проектов](https://reader033.vdocuments.mx/reader033/viewer/2022051502/58ef48491a28abea738b464d/html5/thumbnails/40.jpg)
40
![Page 41: UI kit. Конструктор для больших проектов](https://reader033.vdocuments.mx/reader033/viewer/2022051502/58ef48491a28abea738b464d/html5/thumbnails/41.jpg)
41
![Page 42: UI kit. Конструктор для больших проектов](https://reader033.vdocuments.mx/reader033/viewer/2022051502/58ef48491a28abea738b464d/html5/thumbnails/42.jpg)
Нестандартные компоненты
42
![Page 43: UI kit. Конструктор для больших проектов](https://reader033.vdocuments.mx/reader033/viewer/2022051502/58ef48491a28abea738b464d/html5/thumbnails/43.jpg)
Навигация (сценарные и ролевые различия)
Специфичные для проекта виджеты• магазин: мини-корзина или слайдер фильтра стоимости,
• портал: виджет рекомендованных статей,
• сервис заказа услуг: календарь с выбором даты и времени…
43
![Page 44: UI kit. Конструктор для больших проектов](https://reader033.vdocuments.mx/reader033/viewer/2022051502/58ef48491a28abea738b464d/html5/thumbnails/44.jpg)
44
![Page 45: UI kit. Конструктор для больших проектов](https://reader033.vdocuments.mx/reader033/viewer/2022051502/58ef48491a28abea738b464d/html5/thumbnails/45.jpg)
45
![Page 46: UI kit. Конструктор для больших проектов](https://reader033.vdocuments.mx/reader033/viewer/2022051502/58ef48491a28abea738b464d/html5/thumbnails/46.jpg)
46
![Page 47: UI kit. Конструктор для больших проектов](https://reader033.vdocuments.mx/reader033/viewer/2022051502/58ef48491a28abea738b464d/html5/thumbnails/47.jpg)
47
![Page 48: UI kit. Конструктор для больших проектов](https://reader033.vdocuments.mx/reader033/viewer/2022051502/58ef48491a28abea738b464d/html5/thumbnails/48.jpg)
48
Работает
![Page 49: UI kit. Конструктор для больших проектов](https://reader033.vdocuments.mx/reader033/viewer/2022051502/58ef48491a28abea738b464d/html5/thumbnails/49.jpg)
49
![Page 50: UI kit. Конструктор для больших проектов](https://reader033.vdocuments.mx/reader033/viewer/2022051502/58ef48491a28abea738b464d/html5/thumbnails/50.jpg)
50
![Page 51: UI kit. Конструктор для больших проектов](https://reader033.vdocuments.mx/reader033/viewer/2022051502/58ef48491a28abea738b464d/html5/thumbnails/51.jpg)
51
![Page 52: UI kit. Конструктор для больших проектов](https://reader033.vdocuments.mx/reader033/viewer/2022051502/58ef48491a28abea738b464d/html5/thumbnails/52.jpg)
Гайдлайн. Здравый смысл
Внедрение (Колосков, Ветров пишут)
Переиспользование — быстрый старт
52
![Page 53: UI kit. Конструктор для больших проектов](https://reader033.vdocuments.mx/reader033/viewer/2022051502/58ef48491a28abea738b464d/html5/thumbnails/53.jpg)
Зачем мне это всё?
53
![Page 54: UI kit. Конструктор для больших проектов](https://reader033.vdocuments.mx/reader033/viewer/2022051502/58ef48491a28abea738b464d/html5/thumbnails/54.jpg)
Ты или используешь технологии в работе или конкурируешь с ними• Дизайн-шаблоны (Baikal UI kit)
• Платформы (Squarespace, Киоск)
• Дизайн-фреймворки (Bootstrap, Bem-components, UIkit, Pure и т.д.)
• Дизайнеры-разработчики
54
![Page 55: UI kit. Конструктор для больших проектов](https://reader033.vdocuments.mx/reader033/viewer/2022051502/58ef48491a28abea738b464d/html5/thumbnails/55.jpg)
Польза
55
![Page 56: UI kit. Конструктор для больших проектов](https://reader033.vdocuments.mx/reader033/viewer/2022051502/58ef48491a28abea738b464d/html5/thumbnails/56.jpg)
Дизайнеру• Унификация и проработка — качество продукта
• Меньше мелких задач и рутины
• Больше времени на серьезные задачи (концепцию и UX)
• Интеграция в смежные области — знания и опыт
56
→
![Page 57: UI kit. Конструктор для больших проектов](https://reader033.vdocuments.mx/reader033/viewer/2022051502/58ef48491a28abea738b464d/html5/thumbnails/57.jpg)
Разработчику• Компонентный подход (работа с независимыми блоками) → унификация, структурность, переиспользование → качество продукта
• Общая рабочая среда с дизайнером → экономия времени
• Это интересно + останется время на фишки
57
![Page 58: UI kit. Конструктор для больших проектов](https://reader033.vdocuments.mx/reader033/viewer/2022051502/58ef48491a28abea738b464d/html5/thumbnails/58.jpg)
Проекту• Сроки
• Поддержка без дизайнера
• Масштабирование
• Меньше косяков, багов
58