Mobile app prototyping
-
Upload
petr-dvorak -
Category
Technology
-
view
1.015 -
download
0
Transcript of Mobile app prototyping
![Page 1: Mobile app prototyping](https://reader033.fdocuments.us/reader033/viewer/2022052412/557d369cd8b42a447f8b4884/html5/thumbnails/1.jpg)
Mobile app prototyping
Petr Dvorak, iOS Development Lead
![Page 2: Mobile app prototyping](https://reader033.fdocuments.us/reader033/viewer/2022052412/557d369cd8b42a447f8b4884/html5/thumbnails/2.jpg)
Petr Dvorak, iOS Development Lead
![Page 3: Mobile app prototyping](https://reader033.fdocuments.us/reader033/viewer/2022052412/557d369cd8b42a447f8b4884/html5/thumbnails/3.jpg)
Outline
• Motivation for an app prototyping
• Tools and techniques for prototyping
• Design and design testing
![Page 4: Mobile app prototyping](https://reader033.fdocuments.us/reader033/viewer/2022052412/557d369cd8b42a447f8b4884/html5/thumbnails/4.jpg)
Motivation
![Page 5: Mobile app prototyping](https://reader033.fdocuments.us/reader033/viewer/2022052412/557d369cd8b42a447f8b4884/html5/thumbnails/5.jpg)
How to have an app without making an app
![Page 6: Mobile app prototyping](https://reader033.fdocuments.us/reader033/viewer/2022052412/557d369cd8b42a447f8b4884/html5/thumbnails/6.jpg)
Why prototyping?
• Discover issues before the product is done
• The resulting product is better
• Create design more efficiently
• Have more insightful team
![Page 7: Mobile app prototyping](https://reader033.fdocuments.us/reader033/viewer/2022052412/557d369cd8b42a447f8b4884/html5/thumbnails/7.jpg)
ČT24 verze 1.0.0
![Page 8: Mobile app prototyping](https://reader033.fdocuments.us/reader033/viewer/2022052412/557d369cd8b42a447f8b4884/html5/thumbnails/8.jpg)
ČT24 verze 3.0.0
![Page 9: Mobile app prototyping](https://reader033.fdocuments.us/reader033/viewer/2022052412/557d369cd8b42a447f8b4884/html5/thumbnails/9.jpg)
Lessons Learned
• Invest more time in initial product design
• Never stop improving your product
• Communicate and iterate with client
• Let professionals review the design
![Page 10: Mobile app prototyping](https://reader033.fdocuments.us/reader033/viewer/2022052412/557d369cd8b42a447f8b4884/html5/thumbnails/10.jpg)
Tools
![Page 11: Mobile app prototyping](https://reader033.fdocuments.us/reader033/viewer/2022052412/557d369cd8b42a447f8b4884/html5/thumbnails/11.jpg)
Paper, Pencil & Stencils
![Page 12: Mobile app prototyping](https://reader033.fdocuments.us/reader033/viewer/2022052412/557d369cd8b42a447f8b4884/html5/thumbnails/12.jpg)
Balsamiq Mockups
![Page 13: Mobile app prototyping](https://reader033.fdocuments.us/reader033/viewer/2022052412/557d369cd8b42a447f8b4884/html5/thumbnails/13.jpg)
Join.me
• Easy screen sharing
• Enables efficient collaboration
• Concept explaining
![Page 14: Mobile app prototyping](https://reader033.fdocuments.us/reader033/viewer/2022052412/557d369cd8b42a447f8b4884/html5/thumbnails/14.jpg)
• Order tracking
• Sign-in and sign-out needed
• Contact your sales person
Business case
![Page 15: Mobile app prototyping](https://reader033.fdocuments.us/reader033/viewer/2022052412/557d369cd8b42a447f8b4884/html5/thumbnails/15.jpg)
What we aim for...
![Page 16: Mobile app prototyping](https://reader033.fdocuments.us/reader033/viewer/2022052412/557d369cd8b42a447f8b4884/html5/thumbnails/16.jpg)
Balsamiq Mockups
![Page 17: Mobile app prototyping](https://reader033.fdocuments.us/reader033/viewer/2022052412/557d369cd8b42a447f8b4884/html5/thumbnails/17.jpg)
The first design is prototype too
![Page 18: Mobile app prototyping](https://reader033.fdocuments.us/reader033/viewer/2022052412/557d369cd8b42a447f8b4884/html5/thumbnails/18.jpg)
Photoshop / Fireworks
![Page 19: Mobile app prototyping](https://reader033.fdocuments.us/reader033/viewer/2022052412/557d369cd8b42a447f8b4884/html5/thumbnails/19.jpg)
Photoshop / Fireworks
![Page 20: Mobile app prototyping](https://reader033.fdocuments.us/reader033/viewer/2022052412/557d369cd8b42a447f8b4884/html5/thumbnails/20.jpg)
LiveView
• Screen-cast from desktop to iPhone/iPad
• Quick design verification by designer
• Design presentations
![Page 21: Mobile app prototyping](https://reader033.fdocuments.us/reader033/viewer/2022052412/557d369cd8b42a447f8b4884/html5/thumbnails/21.jpg)
Design implementation
![Page 22: Mobile app prototyping](https://reader033.fdocuments.us/reader033/viewer/2022052412/557d369cd8b42a447f8b4884/html5/thumbnails/22.jpg)
“No matter how good your design is
programmers will screw it up...”
-- Dvorak’s first law of physics, 2011
![Page 23: Mobile app prototyping](https://reader033.fdocuments.us/reader033/viewer/2022052412/557d369cd8b42a447f8b4884/html5/thumbnails/23.jpg)
Use tools
• Detect misaligned or scaled images
• Detect incorrect image blending
• Measure the font and gap sizes
![Page 24: Mobile app prototyping](https://reader033.fdocuments.us/reader033/viewer/2022052412/557d369cd8b42a447f8b4884/html5/thumbnails/24.jpg)
Use people too...
• Ask designer for review
• Verify design with customer
![Page 25: Mobile app prototyping](https://reader033.fdocuments.us/reader033/viewer/2022052412/557d369cd8b42a447f8b4884/html5/thumbnails/25.jpg)
How is app design born?
![Page 26: Mobile app prototyping](https://reader033.fdocuments.us/reader033/viewer/2022052412/557d369cd8b42a447f8b4884/html5/thumbnails/26.jpg)
•Someone does it for you
•You need to do it
![Page 27: Mobile app prototyping](https://reader033.fdocuments.us/reader033/viewer/2022052412/557d369cd8b42a447f8b4884/html5/thumbnails/27.jpg)
ArchetypesExtrovert
Introvert
IndividualAffiliative
Ares
Zeus
AppoloDemeter
Hera
Aphrodite
NeedScopeTM
![Page 28: Mobile app prototyping](https://reader033.fdocuments.us/reader033/viewer/2022052412/557d369cd8b42a447f8b4884/html5/thumbnails/28.jpg)
Does your product cause emotions?
![Page 29: Mobile app prototyping](https://reader033.fdocuments.us/reader033/viewer/2022052412/557d369cd8b42a447f8b4884/html5/thumbnails/29.jpg)
Thank you. Q&A?
Tuesday, October 11, 2011