Лекция об инструментах для прототипирования

1. ИНСТРУМЕНТЫ
ДЛЯ ПРОТОТИПИРОВАНИЯ
Николай Березовский
unikolas.com
07.2016

2. Расскажу как прототипы помогают
выбрасывать работу дизайнера на помойку
и при этом оставаться на коне
О видах прототипов и в чем их собирать
Попрактикуемся
Скретная сектантская часть
СЕГОДНЯ

3. ДЕНЬГИ

4. МАГАЗИН «ВСЕ ПО 500»
500 ₽ — Про***кт-менеджер
500 ₽ — Дизайнер
500 ₽ — Программист
500 ₽ — Программист
500 ₽ — Тестировщик
500 ₽ — Аналитик

5. ЦЕНА ОШИБКИ
500 ₽ — Дизайнер 500 ₽ — Дизайнер
500 ₽ — Программист
500 ₽ — Программист
500 ₽ — Тестировщик
500 ₽
2 000 ₽

6. Дурная слава — бесценно!

7. Прототипы помогают

8. Сосредоточиться на главном
Прототипы помогают

9. Еще 5 идеальных вариантов

10. Прототипы помогают
Сосредоточиться на главном
Найти пробелы

11. D D

12. Все ок?

13. Все ок?

14. Прототипы помогают
Сосредоточиться на главном
Найти пробелы
Попробовать продукт в действии

15. Да куда ты жмешь

16. Прототипы помогают
Сосредоточиться на главном
Найти пробелы
Попробовать продукт в действии
Улучшить коммуникацию в команде

17. Как это работает?

18. Так это работает

19. Прототипы помогают
Сосредоточиться на главном
Найти пробелы
Попробовать продукт в действии
Улучшить коммуникацию в команде
Проверить на пользователях

20. Да куда ты жмешь - 2

21. Да куда ты жмешь - 2

22. Прототипы помогают
Сосредоточиться на главном
Найти пробелы
Попробовать продукт в действии
Улучшить коммуникацию в команде
Проверить на пользователях
Облегчить жизнь разработчикам

23. Прототипы помогают
Сосредоточиться на главном
Найти пробелы
Попробовать продукт в действии
Улучшить коммуникацию в команде
Проверить на пользователях
Облегчить жизнь разработчикам
И себе…

24. Прототипы помогают
Сосредоточиться на главном
Найти пробелы
Попробовать продукт в действии
Улучшить коммуникацию в команде
Проверить на пользователях
Облегчить жизнь разработчикам
И себе… И вообще всем.

25. Что проис одит когда
я сюда нажимаю?
Я понял так
А как эта штука
появляется?
И куда девать
эту кнопку?
Это другая активити
так те нически нельзя сделать!
Ну я тут сделал, кароч, посмотри
все так или переделываем?
Разработчики

27. Хочу.
Как делать?

28. ВИДЫ ПРОТОТИПОВ
Структура и состояния
Анимация интерфейса
Работа с данными

29. СТРУКТУРА
И СОСТОЯНИЯ
Блокнот, карандаш, голова,
руки, ножницы…

31. СТРУКТУРА
И СОСТОЯНИЯ
Invision, Flinto, Marvelapp…

32. СТРУКТУРА
И СОСТОЯНИЯ
Invision, Flinto, Marvelapp…

33. Использование в контексте
Низкий порог входа
Легко вносить изменения
Линейность
СТРУКТУРА
И СОСТОЯНИЯ

34. АНИМАЦИЯ
ИНТЕРФЕЙСА

35. АНИМАЦИЯ
ИНТЕРФЕЙСА
Principle, Flinto for Mac, Pixate…

36. АНИМАЦИЯ
ИНТЕРФЕЙСА
Principle, Flinto for Mac, Pixate…

37. АНИМАЦИЯ
ИНТЕРФЕЙСА
Principle, Flinto for Mac, Pixate…

38. Look and feel
Средний порог входа
Время зависит от контекста
Линейность и ограничения инструмента
АНИМАЦИЯ
ИНТЕРФЕЙСА

39. D D
РАБОТА
С ДАННЫМИ

40. РАБОТА
С ДАННЫМИ
Framer, Fuse, Axure,
Proto.io, Form…

41. РАБОТА
С ДАННЫМИ
Framer, Fuse, Axure,
Proto.io, Form…

42. РАБОТА
С ДАННЫМИ
Framer, Fuse, Axure,
Proto.io, Form…

43. ИНСТРУМЕНТЫ
bit.ly/proto-tools

44. МОЙ
НАБОР Идеи
и обсуджения
Бумага
Sketch
Invision
Flinto for Mac
Principle
Framer, HTML, JS
Разработчики
Логика
взаимодействия
Интерфейсные
решения
Сложный прототип,
логика, данные

45. ПРАКТИКА

46. ЗАЧЕМ
ПРОГРАММИРОВАТЬ

47. Ввод данных

48. Больше возможностей
Камера, микрофон, гироскоп, bluetooth, вибрация…

49. Состояния

50. Состояния

51. Продуктовые гипотезы

52. × 10 000

54. Опыты на живых людях

56. СПАСИБО
Николай Березовский
unikolas.com
fb.com/unikolas
fb.com/groups/prototypingclub
Russian Prototyping Club