1

Архитектура дизайн-системАнтон Виноградов

Антон Виноградов

• основатель theprotein.io

• разработчик интерфейсов в Альфа-Лаборатории

• 5 лет занимаюсь фронтендом • евангелист и БЭМ-контрибьютор • автор OpenSource решений

@awinogradov

2

Дизайн-система

4

Дизайн-система

4

Дизайн-система

• описание концепта

4

Дизайн-система

• описание концепта

• компоненты интерфейса

4

Дизайн-система

• описание концепта

• компоненты интерфейса

• правила компоновки

4

Дизайн-система

• описание концепта

• компоненты интерфейса

• правила компоновки

• отображение данных

4

Дизайн-система

• описание концепта

• компоненты интерфейса

• правила компоновки

• отображение данных

• типографика и верстка

5

На рынке

5

На рынке

• Universal Windows Platform

5

На рынке

• Universal Windows Platform

• Google Material

5

На рынке

• Universal Windows Platform

• Google Material

• Apple (iOS, OSX, TV)

5

На рынке

• Universal Windows Platform

• Google Material

• Apple (iOS, OSX, TV)

• IBM Design Language

5

На рынке

• Universal Windows Platform

• Google Material

• Apple (iOS, OSX, TV)

• IBM Design Language

• Lightning by Saleforce

5

На рынке

• Universal Windows Platform

• Google Material

• Apple (iOS, OSX, TV)

• IBM Design Language

• Lightning by Saleforce

• Mailchimp patterns

Уникальность

7

7

7

7

7

7

7

8

Секреты

8

Секреты

• нихрена мы не должны

8

Секреты

• нихрена мы не должны

• в вебе все равны

11

Не в дизайне дело

12

Проблемы

• CSS only

12

Проблемы

• CSS only

12

Проблемы

• CSS only

13

Проблемы

• CSS only

• параметры это тупик

13

Проблемы

• CSS only

• параметры это тупик

13

Проблемы

• CSS only

• параметры это тупик

13

Проблемы

• CSS only

• параметры это тупик

14

Проблемы

• CSS only

• параметры это тупик

• инкапсуляции никакой

14

Проблемы

• CSS only

• параметры это тупик

• инкапсуляции никакой

15

Проблемы

• CSS only

• параметры это тупик

• инкапсуляции никакой

• зависимость

16

Проблемы

• CSS only

• параметры это тупик

• инкапсуляции никакой

• зависимость

• так себе наследование

Особое мышление

?19

• выбрать карту из списка

Задача

?19

• выбрать карту из списка

Задача

?19

• выбрать карту из списка

40% веб-страниц

Задача

20

20

control

20

controlbutton

20

controlbutton

popup

20

controlbutton

popupmenu

20

controlbutton

popupmenu

menu-item

20

controlbutton

popupmenu

menu-itemcard

20

controlbutton

popupmenu

menu-itemcard

heading

20

controlbutton

popupmenu

menu-itemcard

headingicon

21

Задача

• выбор карты из списка • ввод номера карты

с клавиатуры ??

21

Задача

• выбор карты из списка • ввод номера карты

с клавиатуры ??

22

controlbutton

popupmenu

menu-itemcard

headingicon

23

control

popupmenu

menu-itemcard

headingicon

24

control

popupmenu

menu-itemcard

headingicon

input

25

Задача

• выбор карты из списка • ввод номера карты

с клавиатуры

• редактирование с клавиатуры ??

26

Задача

• выбор карты из списка • ввод номера карты

с клавиатуры

• редактирование с клавиатуры ?

26

Задача

• выбор карты из списка • ввод номера карты

с клавиатуры

• редактирование с клавиатуры ?

26

Задача

• выбор карты из списка • ввод номера карты

с клавиатуры

• редактирование с клавиатуры ?

27

27

control

27

control

input

27

control

input

control

27

control

input

control

tag

27

control

input

control

tag

card

28

Задача

• выбор карты из списка • ввод номера карты

с клавиатуры

• редактирование с клавиатуры

29

Компоненты

30

Компоненты

• кнопка

31

Компоненты

• кнопка • ссылка

32

Компоненты

• кнопка • ссылка

• попап

33

Компоненты

• кнопка • ссылка

• попап

• иконка

34

Компоненты

• кнопка • ссылка

• попап

• иконка • меню

35

Компоненты

• кнопка • ссылка

• попап

• иконка • меню • инпут

36

Компоненты

• кнопка • ссылка

• попап

• иконка • меню • инпут • заголовок

Параноидальное реиспользование

38

Такая жизнь

38

Такая жизнь

• auto.ru

38

Такая жизнь

• auto.ru• theprotein.io

38

Такая жизнь

• auto.ru• theprotein.io• factory.mn

38

Такая жизнь

• auto.ru• theprotein.io• factory.mn• polavkam.ru

38

Такая жизнь

• auto.ru• theprotein.io• factory.mn• polavkam.ru• indi.io

38

Такая жизнь

• auto.ru• theprotein.io• factory.mn• polavkam.ru• indi.io• …

44

7 40%

45

60 ?

46

500+ ?

47

48

Состояния

50

control

51

51

51

51

51

51

51

51

51

52

Состояния

52

Состояния

• *_hovered

52

Состояния

• *_hovered

• *_focused

52

Состояния

• *_hovered

• *_focused

• *_disabled

52

Состояния

• *_hovered

• *_focused

• *_disabled

• *_invalid

52

Состояния

• *_hovered

• *_focused

• *_disabled

• *_invalid

• *_pressed

52

Состояния

• *_hovered

• *_focused

• *_disabled

• *_invalid

• *_pressed

• *_checked

52

Состояния

• *_hovered

• *_focused

• *_disabled

• *_invalid

• *_pressed

• *_checked

• *_opened

52

Состояния

• *_hovered

• *_focused

• *_disabled

• *_invalid

• *_pressed

• *_checked

• *_opened

• …

Размер имеет значение

54

Компоненты

• кнопка • ссылка

• попап

• иконка • меню • инпут • заголовок

55

Компоненты

• кнопка • ссылка

• попап

• иконка • меню • инпут • заголовок

55

Компоненты

• кнопка • ссылка

• попап

• иконка • меню • инпут • заголовок

55

Компоненты

• кнопка • ссылка

• попап

• иконка • меню • инпут • заголовок

55

Компоненты

• кнопка • ссылка

• попап

• иконка • меню • инпут • заголовок

57

А как же код?

58

А как же код?

58

А как же код?

59

А как же код?

59

А как же код?

60

Формы

61

.form

.form-field

.form-field

Формы

• абстрактны

62

.form-field__label

.form-field__control

.form-field__label

.form-field__control

Формы

• абстрактны • не знают про компоненты

63

.form__header

.form__content

.form__actions

Формы

• абстрактны • не знают про компоненты • гибкий лейаут

64

.form-field__label .form-field__control

Формы

• абстрактны • не знают про компоненты • гибкий лейаут • модификации

65

66

Формы

• абстрактны • не знают про компоненты • гибкий лейаут • модификации • размеры

66

Отправитель

0

Сумма

Формы

• абстрактны • не знают про компоненты • гибкий лейаут • модификации • размеры

66

Отправитель

0

Сумма

.form_size_m

.form-field_size_m

.form-field_size_m

.input_size_m

.input_size_m

.button_size_m

Формы

• абстрактны • не знают про компоненты • гибкий лейаут • модификации • размеры

66

Отправитель

0

Сумма

.form_size_m

.form-field_size_m

.form-field_size_m

.input_size_m

.input_size_m

.button_size_m

Формы

• абстрактны • не знают про компоненты • гибкий лейаут • модификации • размеры

67

Отправитель

0

Сумма

Формы

• абстрактны • не знают про компоненты • гибкий лейаут • модификации • размеры

67

Отправитель

0

Сумма

Формы

• абстрактны • не знают про компоненты • гибкий лейаут • модификации • размеры

67

Отправитель

0

Сумма

Пополнение карты онлайн и не только

Формы

• абстрактны • не знают про компоненты • гибкий лейаут • модификации • размеры

68

Отправитель

0

Сумма

Пополнение карты онлайн и не только

68

Отправитель

0

Сумма

Пополнение карты онлайн и не только

68

Отправитель

0

Сумма

Пополнение карты онлайн и не только

Лейауты

70

Лейауты

• абстрактны

.app

71

• абстрактны • не знают про компоненты

.appЛейауты

72

• абстрактны • не знают про компоненты • гибкий лейаут

.app__header

.app__content

.app__menu

Лейауты

73

Отправитель

0

Сумма

Пополнение карты онлайн и не только

74

Отправитель

0

Сумма

Пополнение всегоКарты СчетаДепозита

75

Отправитель

0

Сумма

Пополнение всегоКарты СчетаДепозита

75

Отправитель

0

Сумма

Пополнение всегоКарты СчетаДепозита

75

Отправитель

0

Сумма

Пополнение всегоКарты СчетаДепозита

76

Отправитель

0

Сумма

Пополнение всегоКарты СчетаДепозита

77

Отправитель

0

Сумма

Пополнение всегоКарты СчетаДепозита

Отправитель

0

Сумма

Пополнение всегоКарты СчетаДепозита

Отправитель

0

Сумма

Пополнение всегоКарты СчетаДепозита

Техника

Техника

• инкапсуляция структур в шаблон компонента

Техника

• инкапсуляция структур в шаблон компонента

• декларативность

bem-xjst

Техника

• инкапсуляция структур в шаблон компонента

• декларативность

• независимые стили

• на компонент

• размеры и темы

Техника

• инкапсуляция структур в шаблон компонента

• декларативность

• независимые стили

• на компонент

• размеры и темы

• умное дерево

Техника

• инкапсуляция структур в шаблон компонента

• декларативность

• независимые стили

• на компонент

• размеры и темы

• умное дерево

• дизайнерские гайды поразработческим китам

Техника

• bem/bem-components

• alfa-bank-dev/ui

theprotein.io