По-моему, всем давно надоело, что дизайнеры и разработчики интерфейсов дублируют работу друг друга, причем постоянно. У каждого свой набор компонентов для сборки интерфейса, свои понятия о принципах его построения, и компоненты каждый делает, как знает, лишь бы выглядели хорошо. Компонентный веб, современные методологии, такие как БЭМ, и инструменты, такие как Sketch и AI, вкупе с передовыми фреймворками, такими как React и Angular, а также шагающий по миру стандарт ES6, могут решить насущные проблемы создания интерфейсов. Я покажу, как дизайнер может использовать компоненты в Sketch, сделанные разработчиком. Редактировать и изменять их. А также расскажу, насколько сильно это упрощает жизнь в команде, создающей невероятные продукты каждый день ;)

1. Компонентный веб
Проникновение в дизайн
Антон Виноградов, Альфа-Лаборатория
FrontendConf 2015, 21-22 мая
1

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

3. 3

4. 4

5. 5

6. 6

7. 7

8. Везде одно и тоже…
8

9. Везде одно и тоже
• не те подходы
• не те методологии
• и инструменты не те
9

10. Везде одно и тоже ;-)

11. Оживляем UI Kit
11

12. Оживляем UI Kit
• дизайнер в фотошопе
12

13. Оживляем UI Kit
• дизайнер в фотошопе
• разрабы во фреймворках
13

14. Оживляем UI Kit
• дизайнер в фотошопе
• разрабы во фреймворках
• компонентный веб
14

15. Оживляем UI Kit
• дизайнер в фотошопе
• разрабы во фреймворках
• компонентный веб
• генераторы гайдов
15

16. Оживляем UI Kit
• дизайнер в фотошопе
• разрабы во фреймворках
• компонентный веб
• генераторы гайдов
• дизайн в браузере
16

17. Оживляем UI Kit
• дизайнер в фотошопе
• разрабы во фреймворках
• компонентный веб
• генераторы гайдов
• дизайн в браузере
• учимся верстать
17

18. Все это про разработку…

19. Это не решает проблем взаимодействия
дизайнера и разработчика

20. Проблемы
• нет синхронизации
• разная методология
• 2 набора компонент
• изменения в одну сторону
• визуальное наследование
• верстка умерла
20

22. Дизайн в депрессии…

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

24. Компонентный дизайн
24

26. Дать живые компоненты
дизайнерам

28. corebasecompanyservice

30. 30

31. 31

32. 32

34. BEMHTML
bit.ly/bemhtml-tmpl

35. Кнопка
35

36. BEMHTML
36

37. ReactJS
37

38. JSON
38

39. HTML
39

40. common
desktop
common
touch
Схема наложения уровней кода
40

43. BEMHTML
43

44. ReactJS
44

45. JSON
45

46. SVG
46

47. common
desktop
common
touch
Новая схема наложения уровней кода
sketch sketch
47

49. Структура
49

50. CSS
50
common.blocks/button/button.css common.blocks/button/__text/button__text.css

51. CSSTOATTRS
51

52. 52

53. PROFIT!!!
53

54. IT WORK!
54
bit.ly/svg-xmpl

55. Нет предела совершенству

56. ENB
bit.ly/enb-techs

59. the
Protein
Toolkit

60. the

61. save
the

62. save watcher
the

63. save watcher parse
the

64. save watcher parse commit
the

65. save watcher parse commit push
the

66. save watcher parse commit push PR
the

67. the

68. PR
the

69. hookPR
the

70. hook watcherPR
the

71. hook watcher pullPR
the

72. the
hook watcher rebuildpullPR

73. the
hook watcher rebuild reloadpullPR

74. the
Protein
Front end development workflow

75. the
Protein

76. Проблемы???

77. Проблемы
77

78. Проблемы
• разбор составных CSS свойств
78

79. Проблемы
• разбор составных CSS свойств
• размерность компонентов
79
sketch.blocks/button/button.css

80. Проблемы
• разбор составных CSS свойств
• размерность компонентов
• позиционирование
80
sketch.blocks/button/__text/button__text.css

81. Проблемы
• разбор составных CSS свойств
• размерность компонентов
• позиционирование
• именования
81

82. Проблемы
• разбор составных CSS свойств
• размерность компонентов
• позиционирование
• именования
• разбор состояний
82

83. Проблемы
• разбор составных CSS свойств
• размерность компонентов
• позиционирование
• именования
• разбор состояний
• программная специфика:
атрибуты, символы,
ограничения
83

84. Результат
• одна библиотека компонент
• нет кучи дизайнерских версий
• всё под контролем
• все в теме
• один язык общения
• нет дублирования работы
84

86. Спасибо!
theprotein.io
github.com/theprotein/svg-example
bem.info
bit.ly/fconf-comp-design
@awinogradov