![Page 1: Прототипирование с БЭМ — Антон Виноградов, Альфа-Лаб](https://reader034.vdocuments.site/reader034/viewer/2022050804/54b6fcc84a79590a338b456b/html5/thumbnails/1.jpg)
![Page 2: Прототипирование с БЭМ — Антон Виноградов, Альфа-Лаб](https://reader034.vdocuments.site/reader034/viewer/2022050804/54b6fcc84a79590a338b456b/html5/thumbnails/2.jpg)
Прототипирование с БЭМАнтон Виноградов
разработчик интерфейсов Альфа-Банк
http://bit.ly/prototyping-bem
![Page 3: Прототипирование с БЭМ — Антон Виноградов, Альфа-Лаб](https://reader034.vdocuments.site/reader034/viewer/2022050804/54b6fcc84a79590a338b456b/html5/thumbnails/3.jpg)
Антон Виноградов[email protected] @awinogradov разработчик интерфейсов, Альфа-Банк
![Page 4: Прототипирование с БЭМ — Антон Виноградов, Альфа-Лаб](https://reader034.vdocuments.site/reader034/viewer/2022050804/54b6fcc84a79590a338b456b/html5/thumbnails/4.jpg)
ПроцессЧисто гипотетически
![Page 5: Прототипирование с БЭМ — Антон Виноградов, Альфа-Лаб](https://reader034.vdocuments.site/reader034/viewer/2022050804/54b6fcc84a79590a338b456b/html5/thumbnails/5.jpg)
5
Продуктовая команда
![Page 6: Прототипирование с БЭМ — Антон Виноградов, Альфа-Лаб](https://reader034.vdocuments.site/reader034/viewer/2022050804/54b6fcc84a79590a338b456b/html5/thumbnails/6.jpg)
6
Продуктовая команда
Идея самый крутой проект на планете
![Page 7: Прототипирование с БЭМ — Антон Виноградов, Альфа-Лаб](https://reader034.vdocuments.site/reader034/viewer/2022050804/54b6fcc84a79590a338b456b/html5/thumbnails/7.jpg)
7
Продуктовая команда
Идея самый крутой проект на планете Анализ аудитория и проблематика
![Page 8: Прототипирование с БЭМ — Антон Виноградов, Альфа-Лаб](https://reader034.vdocuments.site/reader034/viewer/2022050804/54b6fcc84a79590a338b456b/html5/thumbnails/8.jpg)
8
Продуктовая команда
Идея самый крутой проект на планете Анализ аудитория и проблематика
Проектированиесоздание бумажного прототипа и wireframes
![Page 9: Прототипирование с БЭМ — Антон Виноградов, Альфа-Лаб](https://reader034.vdocuments.site/reader034/viewer/2022050804/54b6fcc84a79590a338b456b/html5/thumbnails/9.jpg)
9
Бизнес
![Page 10: Прототипирование с БЭМ — Антон Виноградов, Альфа-Лаб](https://reader034.vdocuments.site/reader034/viewer/2022050804/54b6fcc84a79590a338b456b/html5/thumbnails/10.jpg)
10
Бизнес
Для кого этот продукт? зачем он вообще нужен
![Page 11: Прототипирование с БЭМ — Антон Виноградов, Альфа-Лаб](https://reader034.vdocuments.site/reader034/viewer/2022050804/54b6fcc84a79590a338b456b/html5/thumbnails/11.jpg)
11
Бизнес
Для кого этот продукт? зачем он вообще нужен Как это работает?дизайн, прототип, что-нибудь
![Page 12: Прототипирование с БЭМ — Антон Виноградов, Альфа-Лаб](https://reader034.vdocuments.site/reader034/viewer/2022050804/54b6fcc84a79590a338b456b/html5/thumbnails/12.jpg)
ПроблематикаКажется что-то пошло не так
![Page 13: Прототипирование с БЭМ — Антон Виноградов, Альфа-Лаб](https://reader034.vdocuments.site/reader034/viewer/2022050804/54b6fcc84a79590a338b456b/html5/thumbnails/13.jpg)
13
Проблемы
![Page 14: Прототипирование с БЭМ — Антон Виноградов, Альфа-Лаб](https://reader034.vdocuments.site/reader034/viewer/2022050804/54b6fcc84a79590a338b456b/html5/thumbnails/14.jpg)
14
Проблемы
Анализ недостоверные данные
![Page 15: Прототипирование с БЭМ — Антон Виноградов, Альфа-Лаб](https://reader034.vdocuments.site/reader034/viewer/2022050804/54b6fcc84a79590a338b456b/html5/thumbnails/15.jpg)
15
Проблемы
Анализ недостоверные данные Далеко не все не все понимают, что у вас за продукт и как он работает
![Page 16: Прототипирование с БЭМ — Антон Виноградов, Альфа-Лаб](https://reader034.vdocuments.site/reader034/viewer/2022050804/54b6fcc84a79590a338b456b/html5/thumbnails/16.jpg)
16
Проблемы
Анализ недостоверные данные Далеко не все не все понимают, что у вас за продукт и как он работает
Логика приложенияс этим вообще ничего не понятно
![Page 17: Прототипирование с БЭМ — Антон Виноградов, Альфа-Лаб](https://reader034.vdocuments.site/reader034/viewer/2022050804/54b6fcc84a79590a338b456b/html5/thumbnails/17.jpg)
17
Проблемы
Анализ недостоверные данные Далеко не все не все понимают, что у вас за продукт и как он работает
Логика приложенияс этим вообще ничего не понятно
Дизайн абстрактного нет адекватного способа видеть дизайн на устройстве
![Page 18: Прототипирование с БЭМ — Антон Виноградов, Альфа-Лаб](https://reader034.vdocuments.site/reader034/viewer/2022050804/54b6fcc84a79590a338b456b/html5/thumbnails/18.jpg)
![Page 19: Прототипирование с БЭМ — Антон Виноградов, Альфа-Лаб](https://reader034.vdocuments.site/reader034/viewer/2022050804/54b6fcc84a79590a338b456b/html5/thumbnails/19.jpg)
19
Решение
![Page 20: Прототипирование с БЭМ — Антон Виноградов, Альфа-Лаб](https://reader034.vdocuments.site/reader034/viewer/2022050804/54b6fcc84a79590a338b456b/html5/thumbnails/20.jpg)
20
Решение
Живой прототипеще на этапе анализа
![Page 21: Прототипирование с БЭМ — Антон Виноградов, Альфа-Лаб](https://reader034.vdocuments.site/reader034/viewer/2022050804/54b6fcc84a79590a338b456b/html5/thumbnails/21.jpg)
21
Решение
Живой прототипеще на этапе анализа Переиспользование компонентоввсе продукты похожи друг на друга
![Page 22: Прототипирование с БЭМ — Антон Виноградов, Альфа-Лаб](https://reader034.vdocuments.site/reader034/viewer/2022050804/54b6fcc84a79590a338b456b/html5/thumbnails/22.jpg)
22
Решение
Живой прототипеще на этапе анализа Переиспользование компонентоввсе продукты похожи друг на друга
Прототип на устройствеможно пощупать и понять логику
![Page 23: Прототипирование с БЭМ — Антон Виноградов, Альфа-Лаб](https://reader034.vdocuments.site/reader034/viewer/2022050804/54b6fcc84a79590a338b456b/html5/thumbnails/23.jpg)
23
Решение
Живой прототипеще на этапе анализа Переиспользование компонентоввсе продукты похожи друг на друга
Прототип на устройствеможно пощупать и понять логику
Прототипирование реалтаймстроим и меняем прототип сразу на всех устройствах
![Page 24: Прототипирование с БЭМ — Антон Виноградов, Альфа-Лаб](https://reader034.vdocuments.site/reader034/viewer/2022050804/54b6fcc84a79590a338b456b/html5/thumbnails/24.jpg)
24
Инструментарий
![Page 25: Прототипирование с БЭМ — Антон Виноградов, Альфа-Лаб](https://reader034.vdocuments.site/reader034/viewer/2022050804/54b6fcc84a79590a338b456b/html5/thumbnails/25.jpg)
25
Инструментарий
Веб-приложениеhtml, css и javascript
![Page 26: Прототипирование с БЭМ — Антон Виноградов, Альфа-Лаб](https://reader034.vdocuments.site/reader034/viewer/2022050804/54b6fcc84a79590a338b456b/html5/thumbnails/26.jpg)
26
Инструментарий
Веб-приложениеhtml, css и javascript БЭМметодология, инструменты и библиотеки (BEMHTML, Stylus, i-bem.js, bem-core, bem-components)
![Page 27: Прототипирование с БЭМ — Антон Виноградов, Альфа-Лаб](https://reader034.vdocuments.site/reader034/viewer/2022050804/54b6fcc84a79590a338b456b/html5/thumbnails/27.jpg)
27
Инструментарий
Веб-приложениеhtml, css и javascript БЭМметодология, инструменты и библиотеки (BEMHTML, Stylus, i-bem.js, bem-core, bem-components)
Socket.ioдай бог здоровья разработчикам
![Page 28: Прототипирование с БЭМ — Антон Виноградов, Альфа-Лаб](https://reader034.vdocuments.site/reader034/viewer/2022050804/54b6fcc84a79590a338b456b/html5/thumbnails/28.jpg)
28
Инструментарий
Веб-приложениеhtml, css и javascript БЭМметодология, инструменты и библиотеки (BEMHTML, Stylus, i-bem.js, bem-core, bem-components)
Socket.ioдай бог здоровья разработчикам
Gulpсупервизор и таски
![Page 29: Прототипирование с БЭМ — Антон Виноградов, Альфа-Лаб](https://reader034.vdocuments.site/reader034/viewer/2022050804/54b6fcc84a79590a338b456b/html5/thumbnails/29.jpg)
29
Инструментарий
Веб-приложениеhtml, css и javascript БЭМметодология, инструменты и библиотеки (BEMHTML, Stylus, i-bem.js, bem-core, bem-components)
Socket.ioдай бог здоровья разработчикам
Gulpсупервизор и таски
BrowserSync супервизор и http сервер
![Page 30: Прототипирование с БЭМ — Антон Виноградов, Альфа-Лаб](https://reader034.vdocuments.site/reader034/viewer/2022050804/54b6fcc84a79590a338b456b/html5/thumbnails/30.jpg)
ДемонстрацияLive-кодинг
![Page 32: Прототипирование с БЭМ — Антон Виноградов, Альфа-Лаб](https://reader034.vdocuments.site/reader034/viewer/2022050804/54b6fcc84a79590a338b456b/html5/thumbnails/32.jpg)
ДемонстрацияПример из демонстрации
http://bit.ly/prototyping-bem-example
![Page 33: Прототипирование с БЭМ — Антон Виноградов, Альфа-Лаб](https://reader034.vdocuments.site/reader034/viewer/2022050804/54b6fcc84a79590a338b456b/html5/thumbnails/33.jpg)
33
Как это работает
Следим за изменениями в файлах блоков
bem make
Перекладываем ассеты в папку public
В папке public запущен BrowserSync
![Page 34: Прототипирование с БЭМ — Антон Виноградов, Альфа-Лаб](https://reader034.vdocuments.site/reader034/viewer/2022050804/54b6fcc84a79590a338b456b/html5/thumbnails/34.jpg)
Спасибо!Ссылки
http://bit.ly/generator-bem
http://bit.ly/bem-grid
http://bit.ly/bemjson-snippets
http://bit.ly/bem-ng
Контакты
winogradovaa
awinogradov
verybigman