SlideShare a Scribd company logo
ИНСТРУМЕНТЫ

ДЛЯ ПРОТОТИПИРОВАНИЯ
Николай Березовский
unikolas.com
07.2016
Расскажу как прототипы помогают 

выбрасывать работу дизайнера на помойку

и при этом оставаться на коне
О видах прототипов и в чем их собирать
Попрактикуемся
Скретная сектантская часть
СЕГОДНЯ
ДЕНЬГИ
МАГАЗИН «ВСЕ ПО 500»
500 ₽ — Про***кт-менеджер

500 ₽ — Дизайнер

500 ₽ — Программист

500 ₽ — Программист

500 ₽ — Тестировщик

500 ₽ — Аналитик
ЦЕНА ОШИБКИ
500 ₽ — Дизайнер 500 ₽ — Дизайнер 

500 ₽ — Программист 

500 ₽ — Программист 

500 ₽ — Тестировщик
500 ₽
2 000 ₽
Дурная слава — бесценно!
Прототипы помогают
Сосредоточиться на главном
Прототипы помогают
Еще 5 идеальных вариантов
Прототипы помогают
Сосредоточиться на главном

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

Найти пробелы

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

Найти пробелы

Попробовать продукт в действии

Улучшить коммуникацию в команде
Как это работает?
Так это работает
Прототипы помогают
Сосредоточиться на главном

Найти пробелы

Попробовать продукт в действии

Улучшить коммуникацию в команде
Проверить на пользователях
Да куда ты жмешь - 2
Да куда ты жмешь - 2
Прототипы помогают
Сосредоточиться на главном

Найти пробелы

Попробовать продукт в действии

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

Найти пробелы

Попробовать продукт в действии

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

Найти пробелы

Попробовать продукт в действии

Улучшить коммуникацию в команде
Проверить на пользователях
Облегчить жизнь разработчикам
И себе… И вообще всем.
Что проис одит когда
я сюда нажимаю?
Я понял так
А как эта штука
появляется?
И куда девать
эту кнопку?
Это другая активити
так те нически нельзя сделать!
Ну я тут сделал, кароч, посмотри
все так или переделываем?
Разработчики
Prototyping
Хочу. 

Как делать?
ВИДЫ ПРОТОТИПОВ
Структура и состояния

Анимация интерфейса

Работа с данными
СТРУКТУРА 

И СОСТОЯНИЯ
Блокнот, карандаш, голова, 

руки, ножницы…
Prototyping
СТРУКТУРА 

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

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

И СОСТОЯНИЯ
АНИМАЦИЯ 

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

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

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

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

ИНТЕРФЕЙСА
D D
РАБОТА 

С ДАННЫМИ
РАБОТА 

С ДАННЫМИ
Framer, Fuse, Axure,

Proto.io, Form…
РАБОТА 

С ДАННЫМИ
Framer, Fuse, Axure,

Proto.io, Form…
РАБОТА 

С ДАННЫМИ
Framer, Fuse, Axure,

Proto.io, Form…
ИНСТРУМЕНТЫ
bit.ly/proto-tools
МОЙ 

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

ПРОГРАММИРОВАТЬ
Ввод данных
Больше возможностей
Камера, микрофон, гироскоп, bluetooth, вибрация…
Состояния
Состояния
Продуктовые гипотезы
× 10 000
Prototyping
Опыты на живых людях
Prototyping
СПАСИБО
Николай Березовский
unikolas.com

fb.com/unikolas
fb.com/groups/prototypingclub
Russian Prototyping Club

More Related Content

PDF
UXPeople2013: Юрий Ветров — UX-стратегия. Теория и практика
PDF
BHSD MAIL.RU UI/UX 2016 Restrictions
PDF
Design Management
PPTX
UX Research для интенсива UX&UI Британская Школа Дизайна
PPTX
WUD2011: Юрий Ветров — Design Thinking. Тренинг от Stanford d.School для Mail...
PDF
Lean UX, Уровни UX, UXD процесс
PDF
Юзабилити-тестирование
PDF
Дизайн в хаосе
UXPeople2013: Юрий Ветров — UX-стратегия. Теория и практика
BHSD MAIL.RU UI/UX 2016 Restrictions
Design Management
UX Research для интенсива UX&UI Британская Школа Дизайна
WUD2011: Юрий Ветров — Design Thinking. Тренинг от Stanford d.School для Mail...
Lean UX, Уровни UX, UXD процесс
Юзабилити-тестирование
Дизайн в хаосе

What's hot (20)

PPTX
Мастер-класс по ЮТ для Британки
PDF
CodeFest2015: Ю.Ветров — От дизайн-команды к дизайн-культуре
PDF
Design Weekend Ярославль 2014: Юрий Ветров — Продуктовый дизайнер. Современно...
PDF
Основы быстрого прототипирования
PDF
BHSD MAIL.RU UI/UX 2016 Single interface
PDF
WUD2014: Ю.Ветров — Фоновые исследования. Как много читать, знать и не офигевать
PDF
UX-Марафон 2016: Ю.Ветров — Дайджест продуктового дизайна, выпуск 2
PDF
UX Strategy 101
PDF
UXPeople 2015: Юрий Ветров — Платформенное мышление
PDF
Стачка! 2016: Юрий Ветров — Дизайн с выхлопом
PPTX
Сайдпроекты БВШД 2016
PPTX
DesignCamp2012: Юрий Ветров — Метро-дизайн в Mail.Ru
PDF
WUD2013: Юрий Ветров — Унификация, vol. 1. Фреймворк Mail.Ru для мобильного веба
PPTX
User Experience 2012: Как меняется Mail.Ru — Продукты, процессы, команда
PDF
Как продавать исследования
PDF
UX-Марафон 2015: Ю.Ветров — Дайджест продуктового дизайна, выпуск 1
PPTX
Дизайн успешных продуктов
PPTX
Форум Технологий Mail.Ru 2011: Юрий Ветров — Как создаются интерфейсы в Mail.Ru
PPTX
Дизайн-мышление. Гайд по процессу / Design Thinking Guide / Russian
PPTX
Хитрости UX-дизайна: ключевые лайфхаки, которые должен знать разработчик
Мастер-класс по ЮТ для Британки
CodeFest2015: Ю.Ветров — От дизайн-команды к дизайн-культуре
Design Weekend Ярославль 2014: Юрий Ветров — Продуктовый дизайнер. Современно...
Основы быстрого прототипирования
BHSD MAIL.RU UI/UX 2016 Single interface
WUD2014: Ю.Ветров — Фоновые исследования. Как много читать, знать и не офигевать
UX-Марафон 2016: Ю.Ветров — Дайджест продуктового дизайна, выпуск 2
UX Strategy 101
UXPeople 2015: Юрий Ветров — Платформенное мышление
Стачка! 2016: Юрий Ветров — Дизайн с выхлопом
Сайдпроекты БВШД 2016
DesignCamp2012: Юрий Ветров — Метро-дизайн в Mail.Ru
WUD2013: Юрий Ветров — Унификация, vol. 1. Фреймворк Mail.Ru для мобильного веба
User Experience 2012: Как меняется Mail.Ru — Продукты, процессы, команда
Как продавать исследования
UX-Марафон 2015: Ю.Ветров — Дайджест продуктового дизайна, выпуск 1
Дизайн успешных продуктов
Форум Технологий Mail.Ru 2011: Юрий Ветров — Как создаются интерфейсы в Mail.Ru
Дизайн-мышление. Гайд по процессу / Design Thinking Guide / Russian
Хитрости UX-дизайна: ключевые лайфхаки, которые должен знать разработчик
Ad

Viewers also liked (6)

PDF
Информационная архитектура в интернете
PDF
Paper prototyping
PDF
Dth 3 0
PDF
Алексей Лапаев - Жизненный цикл продукта
PDF
Основы ведения интервью
PDF
Experiment Prototyping
Информационная архитектура в интернете
Paper prototyping
Dth 3 0
Алексей Лапаев - Жизненный цикл продукта
Основы ведения интервью
Experiment Prototyping
Ad

Similar to Prototyping (20)

PDF
Гибкое прототипирование для гибкой разработки (Максим Гапонов)
PDF
Опыт выстраивания процесса Product Discovery
PDF
Мотивация потребителя через скрытые потребности: как управлять вниманием поль...
PDF
Мифы про Project-ов, Product-ов, любимую Jira и многие темы вокруг на
PPTX
Практика организации ИТ-конфереций и других мероприятий для разработчиков
ODP
Мастер-класс "Экспериментальный дизайн взаимодействия"
PPTX
организация мероприятий без упячки. герасимович. Itotvet 19 20 октября
PDF
Инженерный дизайн: как делать умные и красивые продукты
PPTX
IT-Nonstop. Продукт и пользователь: дружба начинается с UX
PPTX
Николай Грачев (AllBiz) "Продукт и пользователь: дружба начинается с UX"
KEY
Start-up Reality Check - Empatika в ВШЭ
PDF
Как заставить говорить корову? Product design мобильного приложения. Павел Гр...
PDF
What logos do And how they do it?
PDF
Product discovery. Наши шишки и успехи
PDF
Бумажное прототипирование
PDF
Канвас "Думай как создатель": дизайн-мышление-трендвотчинг-прототипирование
PPTX
Usability don't make me think
PDF
Agile: Think different
PDF
Как выжить в диких условиях сложного развивающегося продукта. Что полюбить, ...
Гибкое прототипирование для гибкой разработки (Максим Гапонов)
Опыт выстраивания процесса Product Discovery
Мотивация потребителя через скрытые потребности: как управлять вниманием поль...
Мифы про Project-ов, Product-ов, любимую Jira и многие темы вокруг на
Практика организации ИТ-конфереций и других мероприятий для разработчиков
Мастер-класс "Экспериментальный дизайн взаимодействия"
организация мероприятий без упячки. герасимович. Itotvet 19 20 октября
Инженерный дизайн: как делать умные и красивые продукты
IT-Nonstop. Продукт и пользователь: дружба начинается с UX
Николай Грачев (AllBiz) "Продукт и пользователь: дружба начинается с UX"
Start-up Reality Check - Empatika в ВШЭ
Как заставить говорить корову? Product design мобильного приложения. Павел Гр...
What logos do And how they do it?
Product discovery. Наши шишки и успехи
Бумажное прототипирование
Канвас "Думай как создатель": дизайн-мышление-трендвотчинг-прототипирование
Usability don't make me think
Agile: Think different
Как выжить в диких условиях сложного развивающегося продукта. Что полюбить, ...

Prototyping