О проектировании дизайн-систем от разработчика интерфейсов. Что такое композиции компонентов и с чего стоит начинать строить свою систему, чем плохи и хороши имеющиеся на рынке решения и почему их точно нельзя использовать. Все то как передать бренд через интерфейсы в CSS с параноидальным переиспользованием кода. Дизайнерские и разработческие сетки, высокоуровневое проектирование интерфейсов с ориентацией на решение задач. Верстка и дизайн уровня «бог». Живые примеры, годы работы, инсайды, вот это вот всё.

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

2. Антон Виноградов
• основатель theprotein.io
• разработчик интерфейсов
в Альфа-Лаборатории
• 5 лет занимаюсь фронтендом
• евангелист и БЭМ-контрибьютор
• автор OpenSource решений
@awinogradov
2

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

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

5. 4
Дизайн-система
• описание концепта

6. 4
Дизайн-система
• описание концепта
• компоненты интерфейса

7. 4
Дизайн-система
• описание концепта
• компоненты интерфейса
• правила компоновки

8. 4
Дизайн-система
• описание концепта
• компоненты интерфейса
• правила компоновки
• отображение данных

9. 4
Дизайн-система
• описание концепта
• компоненты интерфейса
• правила компоновки
• отображение данных
• типографика и верстка

10. 5
На рынке

11. 5
На рынке
• Universal Windows Platform

12. 5
На рынке
• Universal Windows Platform
• Google Material

13. 5
На рынке
• Universal Windows Platform
• Google Material
• Apple (iOS, OSX, TV)

14. 5
На рынке
• Universal Windows Platform
• Google Material
• Apple (iOS, OSX, TV)
• IBM Design Language

15. 5
На рынке
• Universal Windows Platform
• Google Material
• Apple (iOS, OSX, TV)
• IBM Design Language
• Lightning by Saleforce

16. 5
На рынке
• Universal Windows Platform
• Google Material
• Apple (iOS, OSX, TV)
• IBM Design Language
• Lightning by Saleforce
• Mailchimp patterns

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

18. 7

19. 7

20. 7

21. 7

22. 7

23. 7

24. 7

25. 8
Секреты

26. 8
Секреты
• нихрена мы не должны

27. 8
Секреты
• нихрена мы не должны
• в вебе все равны

30. 11
Не в дизайне дело

31. 12
Проблемы
• CSS only

32. 12
Проблемы
• CSS only

33. 12
Проблемы
• CSS only

34. 13
Проблемы
• CSS only
• параметры это тупик

35. 13
Проблемы
• CSS only
• параметры это тупик

36. 13
Проблемы
• CSS only
• параметры это тупик

37. 13
Проблемы
• CSS only
• параметры это тупик

38. 14
Проблемы
• CSS only
• параметры это тупик
• инкапсуляции никакой

39. 14
Проблемы
• CSS only
• параметры это тупик
• инкапсуляции никакой

40. 15
Проблемы
• CSS only
• параметры это тупик
• инкапсуляции никакой
• зависимость

41. 16
Проблемы
• CSS only
• параметры это тупик
• инкапсуляции никакой
• зависимость
• так себе наследование

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

44. ?
19
• выбрать карту из списка
Задача

45. ?
19
• выбрать карту из списка
Задача

46. ?
19
• выбрать карту из списка
40% веб-страниц
Задача

47. 20

48. 20
control

49. 20
control
button

50. 20
control
button
popup

51. 20
control
button
popup
menu

52. 20
control
button
popup
menu
menu-item

53. 20
control
button
popup
menu
menu-item
card

54. 20
control
button
popup
menu
menu-item
card
heading

55. 20
control
button
popup
menu
menu-item
card
heading
icon

56. 21
Задача
• выбор карты из списка
• ввод номера карты
с клавиатуры
??

57. 21
Задача
• выбор карты из списка
• ввод номера карты
с клавиатуры
??

58. 22
control
button
popup
menu
menu-item
card
heading
icon

59. 23
control
popup
menu
menu-item
card
heading
icon

60. 24
control
popup
menu
menu-item
card
heading
icon
input

61. 25
Задача
• выбор карты из списка
• ввод номера карты
с клавиатуры
• редактирование
с клавиатуры ??

62. 26
Задача
• выбор карты из списка
• ввод номера карты
с клавиатуры
• редактирование
с клавиатуры ?

63. 26
Задача
• выбор карты из списка
• ввод номера карты
с клавиатуры
• редактирование
с клавиатуры ?

64. 26
Задача
• выбор карты из списка
• ввод номера карты
с клавиатуры
• редактирование
с клавиатуры ?

65. 27

66. 27
control

67. 27
control
input

68. 27
control
input
control

69. 27
control
input
control
tag

70. 27
control
input
control
tag
card

71. 28
Задача
• выбор карты из списка
• ввод номера карты
с клавиатуры
• редактирование
с клавиатуры

72. 29
Компоненты

73. 30
Компоненты
• кнопка

74. 31
Компоненты
• кнопка
• ссылка

75. 32
Компоненты
• кнопка
• ссылка
• попап

76. 33
Компоненты
• кнопка
• ссылка
• попап
• иконка

77. 34
Компоненты
• кнопка
• ссылка
• попап
• иконка
• меню

78. 35
Компоненты
• кнопка
• ссылка
• попап
• иконка
• меню
• инпут

79. 36
Компоненты
• кнопка
• ссылка
• попап
• иконка
• меню
• инпут
• заголовок

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

81. 38
Такая жизнь

82. 38
Такая жизнь
• auto.ru

83. 38
Такая жизнь
• auto.ru
• theprotein.io

84. 38
Такая жизнь
• auto.ru
• theprotein.io
• factory.mn

85. 38
Такая жизнь
• auto.ru
• theprotein.io
• factory.mn
• polavkam.ru

86. 38
Такая жизнь
• auto.ru
• theprotein.io
• factory.mn
• polavkam.ru
• indi.io

87. 38
Такая жизнь
• auto.ru
• theprotein.io
• factory.mn
• polavkam.ru
• indi.io
• …

98. 44
7 40%

99. 45
60 ?

100. 46
500+ ?

101. 47

102. 48

103. Состояния

104. 50
control

105. 51

106. 51

107. 51

108. 51

109. 51

110. 51

111. 51

112. 51

113. 51

114. 52
Состояния

115. 52
Состояния
• *_hovered

116. 52
Состояния
• *_hovered
• *_focused

117. 52
Состояния
• *_hovered
• *_focused
• *_disabled

118. 52
Состояния
• *_hovered
• *_focused
• *_disabled
• *_invalid

119. 52
Состояния
• *_hovered
• *_focused
• *_disabled
• *_invalid
• *_pressed

120. 52
Состояния
• *_hovered
• *_focused
• *_disabled
• *_invalid
• *_pressed
• *_checked

121. 52
Состояния
• *_hovered
• *_focused
• *_disabled
• *_invalid
• *_pressed
• *_checked
• *_opened

122. 52
Состояния
• *_hovered
• *_focused
• *_disabled
• *_invalid
• *_pressed
• *_checked
• *_opened
• …

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

124. 54
Компоненты
• кнопка
• ссылка
• попап
• иконка
• меню
• инпут
• заголовок

125. 55
Компоненты
• кнопка
• ссылка
• попап
• иконка
• меню
• инпут
• заголовок

126. 55
Компоненты
• кнопка
• ссылка
• попап
• иконка
• меню
• инпут
• заголовок

127. 55
Компоненты
• кнопка
• ссылка
• попап
• иконка
• меню
• инпут
• заголовок

128. 55
Компоненты
• кнопка
• ссылка
• попап
• иконка
• меню
• инпут
• заголовок

137. 57
А как же код?

138. 58
А как же код?

139. 58
А как же код?

140. 59
А как же код?

141. 59
А как же код?

142. 60
Формы

143. 61
.form
.form-field
.form-field
Формы
• абстрактны

144. 62
.form-field__label
.form-field__control
.form-field__label
.form-field__control
Формы
• абстрактны
• не знают про компоненты

145. 63
.form__header
.form__content
.form__actions
Формы
• абстрактны
• не знают про компоненты
• гибкий лейаут

146. 64
.form-field__label .form-field__control
Формы
• абстрактны
• не знают про компоненты
• гибкий лейаут
• модификации

147. 65

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

149. 66
Отправитель
0
Сумма
Формы
• абстрактны
• не знают про компоненты
• гибкий лейаут
• модификации
• размеры

150. 66
Отправитель
0
Сумма
.form_size_m
.form-field_size_m
.form-field_size_m
.input_size_m
.input_size_m
.button_size_m
Формы
• абстрактны
• не знают про компоненты
• гибкий лейаут
• модификации
• размеры

151. 66
Отправитель
0
Сумма
.form_size_m
.form-field_size_m
.form-field_size_m
.input_size_m
.input_size_m
.button_size_m
Формы
• абстрактны
• не знают про компоненты
• гибкий лейаут
• модификации
• размеры

152. 67
Отправитель
0
Сумма
Формы
• абстрактны
• не знают про компоненты
• гибкий лейаут
• модификации
• размеры

153. 67
Отправитель
0
Сумма
Формы
• абстрактны
• не знают про компоненты
• гибкий лейаут
• модификации
• размеры

154. 67
Отправитель
0
Сумма
Пополнение карты
онлайн и не только
Формы
• абстрактны
• не знают про компоненты
• гибкий лейаут
• модификации
• размеры

155. 68
Отправитель
0
Сумма
Пополнение карты
онлайн и не только

156. 68
Отправитель
0
Сумма
Пополнение карты
онлайн и не только

157. 68
Отправитель
0
Сумма
Пополнение карты
онлайн и не только

158. Лейауты

159. 70
Лейауты
• абстрактны
.app

160. 71
• абстрактны
• не знают про компоненты
.app
Лейауты

161. 72
• абстрактны
• не знают про компоненты
• гибкий лейаут
.app__header
.app__content
.app__menu
Лейауты

162. 73
Отправитель
0
Сумма
Пополнение карты
онлайн и не только

163. 74
Отправитель
0
Сумма
Пополнение всего
Карты СчетаДепозита

164. 75
Отправитель
0
Сумма
Пополнение всего
Карты СчетаДепозита

165. 75
Отправитель
0
Сумма
Пополнение всего
Карты СчетаДепозита

166. 75
Отправитель
0
Сумма
Пополнение всего
Карты СчетаДепозита

167. 76
Отправитель
0
Сумма
Пополнение всего
Карты СчетаДепозита

168. 77
Отправитель
0
Сумма
Пополнение всего
Карты СчетаДепозита

169. Отправитель
0
Сумма
Пополнение всего
Карты СчетаДепозита

170. Отправитель
0
Сумма
Пополнение всего
Карты СчетаДепозита

171. Техника

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

173. Техника
• инкапсуляция структур в
шаблон компонента
• декларативность
bem-xjst

174. Техника
• инкапсуляция структур в
шаблон компонента
• декларативность
• независимые стили
• на компонент
• размеры и темы

175. Техника
• инкапсуляция структур в
шаблон компонента
• декларативность
• независимые стили
• на компонент
• размеры и темы
• умное дерево

176. Техника
• инкапсуляция структур в
шаблон компонента
• декларативность
• независимые стили
• на компонент
• размеры и темы
• умное дерево
• дизайнерские гайды по
разработческим китам

177. Техника
• bem/bem-components
• alfa-bank-dev/ui

178. theprotein.io