UI kit1

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

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

2

3

4

5

• Студенты

• Кураторы

• Преподаватели

• Контент-менеджеры

• Администраторы

6

Английский онлайндля компаний

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

7

— Дизайнер

Nooooo!

8

9

10

Styleguide не тащит11

UIkit

12

Styleguide13

Статичный UI kit

Styleguide14

Библиотека

GuidelinesПринципы стилизации, создания компонентов, построения страниц.

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

15

16

17

Процесс

18

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

19

UX IA Проектирование

Дизайн- UI kit Сложные макеты Верстка

UI компоненты

UX, IA → Проектирование → Визуальная концепция → Все макеты → Styleguide → Верстка

20

→ → →

Было

Стало

и визуальная концепции

Было

• Перерисовка — время

• Слабое погружение в проект

• Ошибки, плохой порядок

• Дизайн как картина

21

Стало

• Синхронизация UX, дизайнера, разработчика

• Компонентный подход

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

22

Структура и семантикаДолой бардак

• Именование по БЭМ

• Сначала структура, потом реализация

• Рабочая среда: Табличка + репозиторий / SourceJS / Для простых проектов Frontify

23

24

Валидация

25

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

26

27

28

29

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

31

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

32

33

34

35

36

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

37

38

40

41

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

42

Навигация (сценарные и ролевые различия)

Специфичные для проекта виджеты• магазин: мини-корзина или слайдер фильтра стоимости,

• портал: виджет рекомендованных статей,

• сервис заказа услуг: календарь с выбором даты и времени…

43

44

45

46

47

48

Работает

49

50

51

Гайдлайн. Здравый смысл

Внедрение (Колосков, Ветров пишут)

Переиспользование — быстрый старт

52

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

53

Ты или используешь технологии в работе или конкурируешь с ними• Дизайн-шаблоны (Baikal UI kit)

• Платформы (Squarespace, Киоск)

• Дизайн-фреймворки (Bootstrap, Bem-components, UIkit, Pure и т.д.)

• Дизайнеры-разработчики

54

Польза

55

Дизайнеру• Унификация и проработка — качество продукта

• Меньше мелких задач и рутины

• Больше времени на серьезные задачи (концепцию и UX)

• Интеграция в смежные области — знания и опыт

56

→

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

• Общая рабочая среда с дизайнером → экономия времени

• Это интересно + останется время на фишки

57

Проекту• Сроки

• Поддержка без дизайнера

• Масштабирование

• Меньше косяков, багов

58

Спасибо!

Добавляйте в друзья, скину презу

fb.com/by.talk59