Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
1
Архитектура дизайн-систем

Антон Виноградов
Антон Виноградов
• основатель theprotein.io
• разработчик интерфейсов 

в Альфа-Лаборатории
• 5 лет занимаюсь фронтендом
•...
Дизайн-система
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 Sale...
5
На рынке
• Universal Windows Platform
• Google Material
• Apple (iOS, OSX, TV)
• IBM Design Language
• Lightning by Sale...
Уникальность
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
control
button
20
control
button
popup
20
control
button
popup
menu
20
control
button
popup
menu
menu-item
20
control
button
popup
menu
menu-item
card
20
control
button
popup
menu
menu-item
card
heading
20
control
button
popup
menu
menu-item
card
heading
icon
21
Задача
• выбор карты из списка
• ввод номера карты 

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

с клавиатуры
??
22
control
button
popup
menu
menu-item
card
heading
icon
23
control
popup
menu
menu-item
card
heading
icon
24
control
popup
menu
menu-item
card
heading
icon
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
Aрхитектура дизайн-систем
Aрхитектура дизайн-систем
Aрхитектура дизайн-систем
Aрхитектура дизайн-систем
Aрхитектура дизайн-систем
Aрхитектура дизайн-систем
Aрхитектура дизайн-систем
Aрхитектура дизайн-систем
Aрхитектура дизайн-систем
Aрхитектура дизайн-систем
Aрхитектура дизайн-систем
Aрхитектура дизайн-систем
Aрхитектура дизайн-систем
Aрхитектура дизайн-систем
Aрхитектура дизайн-систем
Aрхитектура дизайн-систем
Aрхитектура дизайн-систем
Aрхитектура дизайн-систем
Aрхитектура дизайн-систем
Aрхитектура дизайн-систем
Aрхитектура дизайн-систем
Nächste SlideShare
Wird geladen in …5
×

Aрхитектура дизайн-систем

494 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Technologie
  • Login to see the comments

Aрхитектура дизайн-систем

  1. 1. 1 Архитектура дизайн-систем
 Антон Виноградов
  2. 2. Антон Виноградов • основатель theprotein.io • разработчик интерфейсов 
 в Альфа-Лаборатории • 5 лет занимаюсь фронтендом • евангелист и БЭМ-контрибьютор • автор OpenSource решений @awinogradov 2
  3. 3. Дизайн-система
  4. 4. 4 Дизайн-система
  5. 5. 4 Дизайн-система • описание концепта
  6. 6. 4 Дизайн-система • описание концепта • компоненты интерфейса
  7. 7. 4 Дизайн-система • описание концепта • компоненты интерфейса • правила компоновки
  8. 8. 4 Дизайн-система • описание концепта • компоненты интерфейса • правила компоновки • отображение данных
  9. 9. 4 Дизайн-система • описание концепта • компоненты интерфейса • правила компоновки • отображение данных • типографика и верстка
  10. 10. 5 На рынке
  11. 11. 5 На рынке • Universal Windows Platform
  12. 12. 5 На рынке • Universal Windows Platform • Google Material
  13. 13. 5 На рынке • Universal Windows Platform • Google Material • Apple (iOS, OSX, TV)
  14. 14. 5 На рынке • Universal Windows Platform • Google Material • Apple (iOS, OSX, TV) • IBM Design Language
  15. 15. 5 На рынке • Universal Windows Platform • Google Material • Apple (iOS, OSX, TV) • IBM Design Language • Lightning by Saleforce
  16. 16. 5 На рынке • Universal Windows Platform • Google Material • Apple (iOS, OSX, TV) • IBM Design Language • Lightning by Saleforce • Mailchimp patterns
  17. 17. Уникальность
  18. 18. 7
  19. 19. 7
  20. 20. 7
  21. 21. 7
  22. 22. 7
  23. 23. 7
  24. 24. 7
  25. 25. 8 Секреты
  26. 26. 8 Секреты • нихрена мы не должны
  27. 27. 8 Секреты • нихрена мы не должны • в вебе все равны
  28. 28. 11 Не в дизайне дело
  29. 29. 12 Проблемы • CSS only
  30. 30. 12 Проблемы • CSS only
  31. 31. 12 Проблемы • CSS only
  32. 32. 13 Проблемы • CSS only • параметры это тупик
  33. 33. 13 Проблемы • CSS only • параметры это тупик
  34. 34. 13 Проблемы • CSS only • параметры это тупик
  35. 35. 13 Проблемы • CSS only • параметры это тупик
  36. 36. 14 Проблемы • CSS only • параметры это тупик • инкапсуляции никакой
  37. 37. 14 Проблемы • CSS only • параметры это тупик • инкапсуляции никакой
  38. 38. 15 Проблемы • CSS only • параметры это тупик • инкапсуляции никакой • зависимость
  39. 39. 16 Проблемы • CSS only • параметры это тупик • инкапсуляции никакой • зависимость • так себе наследование
  40. 40. Особое мышление
  41. 41. ? 19 • выбрать карту из списка Задача
  42. 42. ? 19 • выбрать карту из списка Задача
  43. 43. ? 19 • выбрать карту из списка 40% веб-страниц Задача
  44. 44. 20
  45. 45. 20 control
  46. 46. 20 control button
  47. 47. 20 control button popup
  48. 48. 20 control button popup menu
  49. 49. 20 control button popup menu menu-item
  50. 50. 20 control button popup menu menu-item card
  51. 51. 20 control button popup menu menu-item card heading
  52. 52. 20 control button popup menu menu-item card heading icon
  53. 53. 21 Задача • выбор карты из списка • ввод номера карты 
 с клавиатуры ??
  54. 54. 21 Задача • выбор карты из списка • ввод номера карты 
 с клавиатуры ??
  55. 55. 22 control button popup menu menu-item card heading icon
  56. 56. 23 control popup menu menu-item card heading icon
  57. 57. 24 control popup menu menu-item card heading icon input
  58. 58. 25 Задача • выбор карты из списка • ввод номера карты 
 с клавиатуры • редактирование 
 с клавиатуры ??
  59. 59. 26 Задача • выбор карты из списка • ввод номера карты 
 с клавиатуры • редактирование 
 с клавиатуры ?
  60. 60. 26 Задача • выбор карты из списка • ввод номера карты 
 с клавиатуры • редактирование 
 с клавиатуры ?
  61. 61. 26 Задача • выбор карты из списка • ввод номера карты 
 с клавиатуры • редактирование 
 с клавиатуры ?
  62. 62. 27
  63. 63. 27 control
  64. 64. 27 control input
  65. 65. 27 control input control
  66. 66. 27 control input control tag
  67. 67. 27 control input control tag card
  68. 68. 28 Задача • выбор карты из списка • ввод номера карты 
 с клавиатуры • редактирование 
 с клавиатуры
  69. 69. 29 Компоненты
  70. 70. 30 Компоненты • кнопка
  71. 71. 31 Компоненты • кнопка • ссылка
  72. 72. 32 Компоненты • кнопка • ссылка • попап
  73. 73. 33 Компоненты • кнопка • ссылка • попап • иконка
  74. 74. 34 Компоненты • кнопка • ссылка • попап • иконка • меню
  75. 75. 35 Компоненты • кнопка • ссылка • попап • иконка • меню • инпут
  76. 76. 36 Компоненты • кнопка • ссылка • попап • иконка • меню • инпут • заголовок
  77. 77. Параноидальное реиспользование
  78. 78. 38 Такая жизнь
  79. 79. 38 Такая жизнь • auto.ru
  80. 80. 38 Такая жизнь • auto.ru • theprotein.io
  81. 81. 38 Такая жизнь • auto.ru • theprotein.io • factory.mn
  82. 82. 38 Такая жизнь • auto.ru • theprotein.io • factory.mn • polavkam.ru
  83. 83. 38 Такая жизнь • auto.ru • theprotein.io • factory.mn • polavkam.ru • indi.io
  84. 84. 38 Такая жизнь • auto.ru • theprotein.io • factory.mn • polavkam.ru • indi.io • …
  85. 85. 44 7 40%
  86. 86. 45 60 ?
  87. 87. 46 500+ ?
  88. 88. 47
  89. 89. 48
  90. 90. Состояния
  91. 91. 50 control
  92. 92. 51
  93. 93. 51
  94. 94. 51
  95. 95. 51
  96. 96. 51
  97. 97. 51
  98. 98. 51
  99. 99. 51
  100. 100. 51
  101. 101. 52 Состояния
  102. 102. 52 Состояния • *_hovered
  103. 103. 52 Состояния • *_hovered • *_focused
  104. 104. 52 Состояния • *_hovered • *_focused • *_disabled
  105. 105. 52 Состояния • *_hovered • *_focused • *_disabled • *_invalid
  106. 106. 52 Состояния • *_hovered • *_focused • *_disabled • *_invalid • *_pressed
  107. 107. 52 Состояния • *_hovered • *_focused • *_disabled • *_invalid • *_pressed • *_checked
  108. 108. 52 Состояния • *_hovered • *_focused • *_disabled • *_invalid • *_pressed • *_checked • *_opened
  109. 109. 52 Состояния • *_hovered • *_focused • *_disabled • *_invalid • *_pressed • *_checked • *_opened • …
  110. 110. Размер имеет значение
  111. 111. 54 Компоненты • кнопка • ссылка • попап • иконка • меню • инпут • заголовок
  112. 112. 55 Компоненты • кнопка • ссылка • попап • иконка • меню • инпут • заголовок
  113. 113. 55 Компоненты • кнопка • ссылка • попап • иконка • меню • инпут • заголовок
  114. 114. 55 Компоненты • кнопка • ссылка • попап • иконка • меню • инпут • заголовок
  115. 115. 55 Компоненты • кнопка • ссылка • попап • иконка • меню • инпут • заголовок
  116. 116. 57 А как же код?
  117. 117. 58 А как же код?
  118. 118. 58 А как же код?
  119. 119. 59 А как же код?
  120. 120. 59 А как же код?
  121. 121. 60 Формы
  122. 122. 61 .form .form-field .form-field Формы • абстрактны
  123. 123. 62 .form-field__label .form-field__control .form-field__label .form-field__control Формы • абстрактны • не знают про компоненты
  124. 124. 63 .form__header .form__content .form__actions Формы • абстрактны • не знают про компоненты • гибкий лейаут
  125. 125. 64 .form-field__label .form-field__control Формы • абстрактны • не знают про компоненты • гибкий лейаут • модификации
  126. 126. 65
  127. 127. 66 Формы • абстрактны • не знают про компоненты • гибкий лейаут • модификации • размеры
  128. 128. 66 Отправитель 0 Сумма Формы • абстрактны • не знают про компоненты • гибкий лейаут • модификации • размеры
  129. 129. 66 Отправитель 0 Сумма .form_size_m .form-field_size_m .form-field_size_m .input_size_m .input_size_m .button_size_m Формы • абстрактны • не знают про компоненты • гибкий лейаут • модификации • размеры
  130. 130. 66 Отправитель 0 Сумма .form_size_m .form-field_size_m .form-field_size_m .input_size_m .input_size_m .button_size_m Формы • абстрактны • не знают про компоненты • гибкий лейаут • модификации • размеры
  131. 131. 67 Отправитель 0 Сумма Формы • абстрактны • не знают про компоненты • гибкий лейаут • модификации • размеры
  132. 132. 67 Отправитель 0 Сумма Формы • абстрактны • не знают про компоненты • гибкий лейаут • модификации • размеры
  133. 133. 67 Отправитель 0 Сумма Пополнение карты онлайн и не только Формы • абстрактны • не знают про компоненты • гибкий лейаут • модификации • размеры
  134. 134. 68 Отправитель 0 Сумма Пополнение карты онлайн и не только
  135. 135. 68 Отправитель 0 Сумма Пополнение карты онлайн и не только
  136. 136. 68 Отправитель 0 Сумма Пополнение карты онлайн и не только
  137. 137. Лейауты
  138. 138. 70 Лейауты • абстрактны .app
  139. 139. 71 • абстрактны • не знают про компоненты .app Лейауты
  140. 140. 72 • абстрактны • не знают про компоненты • гибкий лейаут .app__header .app__content .app__menu Лейауты
  141. 141. 73 Отправитель 0 Сумма Пополнение карты онлайн и не только
  142. 142. 74 Отправитель 0 Сумма Пополнение всего Карты СчетаДепозита
  143. 143. 75 Отправитель 0 Сумма Пополнение всего Карты СчетаДепозита
  144. 144. 75 Отправитель 0 Сумма Пополнение всего Карты СчетаДепозита
  145. 145. 75 Отправитель 0 Сумма Пополнение всего Карты СчетаДепозита
  146. 146. 76 Отправитель 0 Сумма Пополнение всего Карты СчетаДепозита
  147. 147. 77 Отправитель 0 Сумма Пополнение всего Карты СчетаДепозита
  148. 148. Отправитель 0 Сумма Пополнение всего Карты СчетаДепозита
  149. 149. Отправитель 0 Сумма Пополнение всего Карты СчетаДепозита
  150. 150. Техника
  151. 151. Техника • инкапсуляция структур в 
 шаблон компонента
  152. 152. Техника • инкапсуляция структур в 
 шаблон компонента • декларативность bem-xjst
  153. 153. Техника • инкапсуляция структур в 
 шаблон компонента • декларативность • независимые стили • на компонент • размеры и темы
  154. 154. Техника • инкапсуляция структур в 
 шаблон компонента • декларативность • независимые стили • на компонент • размеры и темы • умное дерево
  155. 155. Техника • инкапсуляция структур в 
 шаблон компонента • декларативность • независимые стили • на компонент • размеры и темы • умное дерево • дизайнерские гайды по
 разработческим китам
  156. 156. Техника • bem/bem-components • alfa-bank-dev/ui
  157. 157. theprotein.io

×