2014.12.07 09 Елена Гальцина — Прототипирование...
Transcript of 2014.12.07 09 Елена Гальцина — Прототипирование...
![Page 1: 2014.12.07 09 Елена Гальцина — Прототипирование интерфейсов мобильных приложений](https://reader033.fdocuments.net/reader033/viewer/2022051414/55a290841a28ab21588b484a/html5/thumbnails/1.jpg)
Прототипирование
![Page 2: 2014.12.07 09 Елена Гальцина — Прототипирование интерфейсов мобильных приложений](https://reader033.fdocuments.net/reader033/viewer/2022051414/55a290841a28ab21588b484a/html5/thumbnails/2.jpg)
(Команда быстрого реагирования)
Инструменты быстрого прототипирования внутри команды или наглядно объяснить идею
![Page 3: 2014.12.07 09 Елена Гальцина — Прототипирование интерфейсов мобильных приложений](https://reader033.fdocuments.net/reader033/viewer/2022051414/55a290841a28ab21588b484a/html5/thumbnails/3.jpg)
Balsamiqbalsamiq.com
![Page 4: 2014.12.07 09 Елена Гальцина — Прототипирование интерфейсов мобильных приложений](https://reader033.fdocuments.net/reader033/viewer/2022051414/55a290841a28ab21588b484a/html5/thumbnails/4.jpg)
• Быстрый
• Простой
• Доступный
• Коллективный
• Внешне далёк от реальности
+ –
![Page 5: 2014.12.07 09 Елена Гальцина — Прототипирование интерфейсов мобильных приложений](https://reader033.fdocuments.net/reader033/viewer/2022051414/55a290841a28ab21588b484a/html5/thumbnails/5.jpg)
![Page 6: 2014.12.07 09 Елена Гальцина — Прототипирование интерфейсов мобильных приложений](https://reader033.fdocuments.net/reader033/viewer/2022051414/55a290841a28ab21588b484a/html5/thumbnails/6.jpg)
![Page 7: 2014.12.07 09 Елена Гальцина — Прототипирование интерфейсов мобильных приложений](https://reader033.fdocuments.net/reader033/viewer/2022051414/55a290841a28ab21588b484a/html5/thumbnails/7.jpg)
![Page 8: 2014.12.07 09 Елена Гальцина — Прототипирование интерфейсов мобильных приложений](https://reader033.fdocuments.net/reader033/viewer/2022051414/55a290841a28ab21588b484a/html5/thumbnails/8.jpg)
![Page 9: 2014.12.07 09 Елена Гальцина — Прототипирование интерфейсов мобильных приложений](https://reader033.fdocuments.net/reader033/viewer/2022051414/55a290841a28ab21588b484a/html5/thumbnails/9.jpg)
Pop popapp.in
![Page 10: 2014.12.07 09 Елена Гальцина — Прототипирование интерфейсов мобильных приложений](https://reader033.fdocuments.net/reader033/viewer/2022051414/55a290841a28ab21588b484a/html5/thumbnails/10.jpg)
Pop, для быстрого проектирования
• Быстрый
• Простой
• Доступный (iOS, Android
Windows phone, web)
• Внешне далёк от реальности • Платный доступ
к дополнительным возможностям
+ –
![Page 11: 2014.12.07 09 Елена Гальцина — Прототипирование интерфейсов мобильных приложений](https://reader033.fdocuments.net/reader033/viewer/2022051414/55a290841a28ab21588b484a/html5/thumbnails/11.jpg)
![Page 12: 2014.12.07 09 Елена Гальцина — Прототипирование интерфейсов мобильных приложений](https://reader033.fdocuments.net/reader033/viewer/2022051414/55a290841a28ab21588b484a/html5/thumbnails/12.jpg)
![Page 13: 2014.12.07 09 Елена Гальцина — Прототипирование интерфейсов мобильных приложений](https://reader033.fdocuments.net/reader033/viewer/2022051414/55a290841a28ab21588b484a/html5/thumbnails/13.jpg)
Инструменты для создания красивых презентаций
готового дизайна
![Page 14: 2014.12.07 09 Елена Гальцина — Прототипирование интерфейсов мобильных приложений](https://reader033.fdocuments.net/reader033/viewer/2022051414/55a290841a28ab21588b484a/html5/thumbnails/14.jpg)
Pop, для финального прототипа
• Доступный (iOS, Android Windows
phone, web)
• Поддержка жестов и анимации
переходов
• Синхронизация с дропбокс
• Работать с экранами удобней
• Сырой!!!
+ –
![Page 15: 2014.12.07 09 Елена Гальцина — Прототипирование интерфейсов мобильных приложений](https://reader033.fdocuments.net/reader033/viewer/2022051414/55a290841a28ab21588b484a/html5/thumbnails/15.jpg)
![Page 16: 2014.12.07 09 Елена Гальцина — Прототипирование интерфейсов мобильных приложений](https://reader033.fdocuments.net/reader033/viewer/2022051414/55a290841a28ab21588b484a/html5/thumbnails/16.jpg)
Invisioninvisionapp.com
![Page 17: 2014.12.07 09 Елена Гальцина — Прототипирование интерфейсов мобильных приложений](https://reader033.fdocuments.net/reader033/viewer/2022051414/55a290841a28ab21588b484a/html5/thumbnails/17.jpg)
• Быстрый
• Доступный
• Можно править макет в реальном времени вместе с другими людьми
• Синхронизация с Sketch, дропбокс
• Поддержка жестов и анимации
переходов
• Хороший набор форматов (web)
• Избыточен • 1 проект потом плати! • Прототип на телефоне долго
грузится
+ –
![Page 18: 2014.12.07 09 Елена Гальцина — Прототипирование интерфейсов мобильных приложений](https://reader033.fdocuments.net/reader033/viewer/2022051414/55a290841a28ab21588b484a/html5/thumbnails/18.jpg)
![Page 19: 2014.12.07 09 Елена Гальцина — Прототипирование интерфейсов мобильных приложений](https://reader033.fdocuments.net/reader033/viewer/2022051414/55a290841a28ab21588b484a/html5/thumbnails/19.jpg)
![Page 20: 2014.12.07 09 Елена Гальцина — Прототипирование интерфейсов мобильных приложений](https://reader033.fdocuments.net/reader033/viewer/2022051414/55a290841a28ab21588b484a/html5/thumbnails/20.jpg)
![Page 21: 2014.12.07 09 Елена Гальцина — Прототипирование интерфейсов мобильных приложений](https://reader033.fdocuments.net/reader033/viewer/2022051414/55a290841a28ab21588b484a/html5/thumbnails/21.jpg)
![Page 22: 2014.12.07 09 Елена Гальцина — Прототипирование интерфейсов мобильных приложений](https://reader033.fdocuments.net/reader033/viewer/2022051414/55a290841a28ab21588b484a/html5/thumbnails/22.jpg)
Sketch Новый графический редактор.
Инструмент и дизайна и прототипирования
bohemiancoding.com/sketch/
![Page 23: 2014.12.07 09 Елена Гальцина — Прототипирование интерфейсов мобильных приложений](https://reader033.fdocuments.net/reader033/viewer/2022051414/55a290841a28ab21588b484a/html5/thumbnails/23.jpg)
+ Очень много!
– Доступен только на iOS (пока)
Сыроват (хотя активно обновляется)
![Page 24: 2014.12.07 09 Елена Гальцина — Прототипирование интерфейсов мобильных приложений](https://reader033.fdocuments.net/reader033/viewer/2022051414/55a290841a28ab21588b484a/html5/thumbnails/24.jpg)
![Page 25: 2014.12.07 09 Елена Гальцина — Прототипирование интерфейсов мобильных приложений](https://reader033.fdocuments.net/reader033/viewer/2022051414/55a290841a28ab21588b484a/html5/thumbnails/25.jpg)
Marvel
marvelapp.com
![Page 26: 2014.12.07 09 Елена Гальцина — Прототипирование интерфейсов мобильных приложений](https://reader033.fdocuments.net/reader033/viewer/2022051414/55a290841a28ab21588b484a/html5/thumbnails/26.jpg)
• Быстрый
• Доступный
• Синхронизация с дропбокс
• Поддержка жестов и анимации
переходов
• Хороший набор форматов (web)
+
![Page 27: 2014.12.07 09 Елена Гальцина — Прототипирование интерфейсов мобильных приложений](https://reader033.fdocuments.net/reader033/viewer/2022051414/55a290841a28ab21588b484a/html5/thumbnails/27.jpg)
![Page 28: 2014.12.07 09 Елена Гальцина — Прототипирование интерфейсов мобильных приложений](https://reader033.fdocuments.net/reader033/viewer/2022051414/55a290841a28ab21588b484a/html5/thumbnails/28.jpg)
![Page 29: 2014.12.07 09 Елена Гальцина — Прототипирование интерфейсов мобильных приложений](https://reader033.fdocuments.net/reader033/viewer/2022051414/55a290841a28ab21588b484a/html5/thumbnails/29.jpg)
Flinto
Flinto.com
![Page 30: 2014.12.07 09 Елена Гальцина — Прототипирование интерфейсов мобильных приложений](https://reader033.fdocuments.net/reader033/viewer/2022051414/55a290841a28ab21588b484a/html5/thumbnails/30.jpg)
• Быстрый
• Доступный
• Синхронизация с дропбокс
• Анимации переходов
• Все видно!!!
• Очень быстро попадает в телефон
• Нет поддержки жестов • Платный
+ –
![Page 31: 2014.12.07 09 Елена Гальцина — Прототипирование интерфейсов мобильных приложений](https://reader033.fdocuments.net/reader033/viewer/2022051414/55a290841a28ab21588b484a/html5/thumbnails/31.jpg)
![Page 32: 2014.12.07 09 Елена Гальцина — Прототипирование интерфейсов мобильных приложений](https://reader033.fdocuments.net/reader033/viewer/2022051414/55a290841a28ab21588b484a/html5/thumbnails/32.jpg)
![Page 33: 2014.12.07 09 Елена Гальцина — Прототипирование интерфейсов мобильных приложений](https://reader033.fdocuments.net/reader033/viewer/2022051414/55a290841a28ab21588b484a/html5/thumbnails/33.jpg)
Приложения для прототипирования анимаций
в приложении
![Page 34: 2014.12.07 09 Елена Гальцина — Прототипирование интерфейсов мобильных приложений](https://reader033.fdocuments.net/reader033/viewer/2022051414/55a290841a28ab21588b484a/html5/thumbnails/34.jpg)
Pixate
Perform
![Page 35: 2014.12.07 09 Елена Гальцина — Прототипирование интерфейсов мобильных приложений](https://reader033.fdocuments.net/reader033/viewer/2022051414/55a290841a28ab21588b484a/html5/thumbnails/35.jpg)
Смотреть как все выглядит в телефоне пока делаешь на компе.
![Page 36: 2014.12.07 09 Елена Гальцина — Прототипирование интерфейсов мобильных приложений](https://reader033.fdocuments.net/reader033/viewer/2022051414/55a290841a28ab21588b484a/html5/thumbnails/36.jpg)
Skala View
Sketch Mirror
![Page 37: 2014.12.07 09 Елена Гальцина — Прототипирование интерфейсов мобильных приложений](https://reader033.fdocuments.net/reader033/viewer/2022051414/55a290841a28ab21588b484a/html5/thumbnails/37.jpg)
Итоговый итог:
Делать прототипы просто и очень полезно. Спасибо )