Я расскажу о быстром прототипировании интерфейсов: почему важно как можно скорее получить живую версию продукта и почему от этого зависит его судьба, как использовать для этого БЭМ-инструментарий и библиотеки, а также как забыть про Photoshop и спать спокойно. Live coding ;)

2. Прототипирование с БЭМ
Антон Виноградов
разработчик интерфейсов
Альфа-Банк
http://bit.ly/prototyping-bem

3. Антон Виноградов
winogradovaa@gmail.com @awinogradov
разработчик интерфейсов, Альфа-Банк

4. Процесс
Чисто гипотетически

5. Продуктовая команда
5

6. Продуктовая команда
6
Идея
самый крутой проект на планете

7. Продуктовая команда
7
Идея
самый крутой проект на планете
Анализ
аудитория и проблематика

8. Продуктовая команда
8
Идея
самый крутой проект на планете
Анализ
аудитория и проблематика
Проектирование
создание бумажного прототипа и wireframes

9. Бизнес
9

10. Бизнес
10
Для кого этот продукт?
зачем он вообще нужен

11. Бизнес
11
Для кого этот продукт?
зачем он вообще нужен
Как это работает?
дизайн, прототип, что-нибудь

12. Проблематика
Кажется что-то пошло не так

13. Проблемы
13

14. Проблемы
14
Анализ
недостоверные данные

15. Проблемы
15
Анализ
недостоверные данные
Далеко не все
не все понимают, что у вас за продукт и как он работает

16. Проблемы
16
Анализ
недостоверные данные
Далеко не все
не все понимают, что у вас за продукт и как он работает
Логика приложения
с этим вообще ничего не понятно

17. Проблемы
17
Анализ
недостоверные данные
Далеко не все
не все понимают, что у вас за продукт и как он работает
Логика приложения
с этим вообще ничего не понятно
Дизайн абстрактного
нет адекватного способа видеть дизайн на устройстве

19. Решение
19

20. Решение
20
Живой прототип
еще на этапе анализа

21. Решение
21
Живой прототип
еще на этапе анализа
Переиспользование компонентов
все продукты похожи друг на друга

22. Решение
22
Живой прототип
еще на этапе анализа
Переиспользование компонентов
все продукты похожи друг на друга
Прототип на устройстве
можно пощупать и понять логику

23. Решение
23
Живой прототип
еще на этапе анализа
Переиспользование компонентов
все продукты похожи друг на друга
Прототип на устройстве
можно пощупать и понять логику
Прототипирование реалтайм
строим и меняем прототип сразу на всех устройствах

24. Инструментарий
24

25. Инструментарий
25
Веб-приложение
html, css и javascript

26. Инструментарий
26
Веб-приложение
html, css и javascript
БЭМ
методология, инструменты и библиотеки
(BEMHTML, Stylus, i-bem.js, bem-core, bem-components)

27. Инструментарий
27
Веб-приложение
html, css и javascript
БЭМ
методология, инструменты и библиотеки
(BEMHTML, Stylus, i-bem.js, bem-core, bem-components)
Socket.io
дай бог здоровья разработчикам

28. Инструментарий
28
Веб-приложение
html, css и javascript
БЭМ
методология, инструменты и библиотеки
(BEMHTML, Stylus, i-bem.js, bem-core, bem-components)
Socket.io
дай бог здоровья разработчикам
Gulp
супервизор и таски

29. Инструментарий
29
Веб-приложение
html, css и javascript
БЭМ
методология, инструменты и библиотеки
(BEMHTML, Stylus, i-bem.js, bem-core, bem-components)
Socket.io
дай бог здоровья разработчикам
Gulp
супервизор и таски
BrowserSync
супервизор и http сервер

30. Демонстрация
Live-кодинг

31. Демонстрация
Магия происходит здесь
http://verybigman.local:3000

32. Демонстрация
Пример из демонстрации
http://bit.ly/prototyping-bem-example

33. Как это работает
33
Следим за изменениями
в файлах блоков
bem make
Перекладываем ассеты
в папку public
В папке public
запущен BrowserSync

34. Спасибо!
Ссылки
http://bit.ly/generator-bem
http://bit.ly/bem-grid
http://bit.ly/bemjson-snippets
http://bit.ly/bem-ng
Контакты
winogradovaa@gmail.com
winogradovaa
awinogradov
verybigman