Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Прототипирование с БЭМ — Антон Виноградов, Альфа-Лаб

1.398 visualizaciones

Publicado el

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

  • Inicia sesión para ver los comentarios

Прототипирование с БЭМ — Антон Виноградов, Альфа-Лаб

  1. 1. Прототипирование с БЭМ Антон Виноградов разработчик интерфейсов Альфа-Банк http://bit.ly/prototyping-bem
  2. 2. Антон Виноградов winogradovaa@gmail.com @awinogradov разработчик интерфейсов, Альфа-Банк
  3. 3. Процесс Чисто гипотетически
  4. 4. Продуктовая команда 5
  5. 5. Продуктовая команда 6 Идея самый крутой проект на планете
  6. 6. Продуктовая команда 7 Идея самый крутой проект на планете Анализ аудитория и проблематика
  7. 7. Продуктовая команда 8 Идея самый крутой проект на планете Анализ аудитория и проблематика Проектирование создание бумажного прототипа и wireframes
  8. 8. Бизнес 9
  9. 9. Бизнес 10 Для кого этот продукт? зачем он вообще нужен
  10. 10. Бизнес 11 Для кого этот продукт? зачем он вообще нужен Как это работает? дизайн, прототип, что-нибудь
  11. 11. Проблематика Кажется что-то пошло не так
  12. 12. Проблемы 13
  13. 13. Проблемы 14 Анализ недостоверные данные
  14. 14. Проблемы 15 Анализ недостоверные данные Далеко не все не все понимают, что у вас за продукт и как он работает
  15. 15. Проблемы 16 Анализ недостоверные данные Далеко не все не все понимают, что у вас за продукт и как он работает Логика приложения с этим вообще ничего не понятно
  16. 16. Проблемы 17 Анализ недостоверные данные Далеко не все не все понимают, что у вас за продукт и как он работает Логика приложения с этим вообще ничего не понятно Дизайн абстрактного нет адекватного способа видеть дизайн на устройстве
  17. 17. Решение 19
  18. 18. Решение 20 Живой прототип еще на этапе анализа
  19. 19. Решение 21 Живой прототип еще на этапе анализа Переиспользование компонентов все продукты похожи друг на друга
  20. 20. Решение 22 Живой прототип еще на этапе анализа Переиспользование компонентов все продукты похожи друг на друга Прототип на устройстве можно пощупать и понять логику
  21. 21. Решение 23 Живой прототип еще на этапе анализа Переиспользование компонентов все продукты похожи друг на друга Прототип на устройстве можно пощупать и понять логику Прототипирование реалтайм строим и меняем прототип сразу на всех устройствах
  22. 22. Инструментарий 24
  23. 23. Инструментарий 25 Веб-приложение html, css и javascript
  24. 24. Инструментарий 26 Веб-приложение html, css и javascript БЭМ методология, инструменты и библиотеки (BEMHTML, Stylus, i-bem.js, bem-core, bem-components)
  25. 25. Инструментарий 27 Веб-приложение html, css и javascript БЭМ методология, инструменты и библиотеки (BEMHTML, Stylus, i-bem.js, bem-core, bem-components) Socket.io дай бог здоровья разработчикам
  26. 26. Инструментарий 28 Веб-приложение html, css и javascript БЭМ методология, инструменты и библиотеки (BEMHTML, Stylus, i-bem.js, bem-core, bem-components) Socket.io дай бог здоровья разработчикам Gulp супервизор и таски
  27. 27. Инструментарий 29 Веб-приложение html, css и javascript БЭМ методология, инструменты и библиотеки (BEMHTML, Stylus, i-bem.js, bem-core, bem-components) Socket.io дай бог здоровья разработчикам Gulp супервизор и таски BrowserSync супервизор и http сервер
  28. 28. Демонстрация Live-кодинг
  29. 29. Демонстрация Магия происходит здесь http://verybigman.local:3000
  30. 30. Демонстрация Пример из демонстрации http://bit.ly/prototyping-bem-example
  31. 31. Как это работает 33 Следим за изменениями в файлах блоков bem make Перекладываем ассеты в папку public В папке public запущен BrowserSync
  32. 32. Спасибо! Ссылки 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

×