This document discusses high-fidelity prototyping and the tools used for mobile prototyping. It defines high-fidelity prototyping as creating prototypes that feel like close to the final product and show features and functionality with minimal code. The purposes of high-fidelity prototyping include testing interaction design, fine-tuning the UI, enabling user and client testing, and creating demonstrations. The document reviews tools for prototyping like Marvel, Flinto, Pixate, Framer.js, and InVision. It notes that different tools are better for horizontal prototypes focused on functionality versus vertical prototypes focused more on visual design. The document demonstrates prototypes created in Marvel and Pixate and concludes that the ideal tool

1. High
Fidelity
Prototyping
Because JPG Attachments Suck
Thomas Fogarasy - 2014 NOV.
fogarasy.com
fogarasy@brandlift.eu

2. I. Hi-fi what?
II. What is it for?
III. Tools for mobile prototyping
IV. DEMO

3. a quick definiton
Hi-fi what?
I.

4. • feels like a product
• almost final look&feel
• shows some or all features
• minimal or no native code
Hi-fi

5. • lotoffeatures/screensshown
• fewer details
• broad view of the system
horizontal

6. • fewer, key features
• PoC focus
• more detailed interactions
vertical

8. scenarios and benefits
What is it for?
II.

9. • IxD validation, testing
• UI fine-tuning, animation (yay!)
• user/client testing
• seeking partners
• market/crowdfunding demo
(awesome for elevator pitches)

10. Time-days(estimate)
0
7,5
15
22,5
30
Sketches Wireframes Mockups Hi-Fi Prototypes Native Dev
it’s that cool

11. (mobile UI perspective)
Tools?
II.

12. How do they compare?

13. Pixate
Proto.io
Marvel, Flinto
Starting with your mockup
(.sketch, .psd, .ai…)
Framer.js
Functional Visual
After Effects
InVision
Nothing in
between???
Difficulty
Medium High

14. Marvel & Pixate
DEMO
III.

15. UI concept
for prototyping
demonsration
Tools: Marvel & Pixate
conference networking app

16. DEMO Links
http://marvl.in/7fb7de pixt.io/p256v8tv5o4
Functional Prototype for IA
testing, navigation, user testing
Interaction design prototype for
look & feel demo, concept demo,
user testing

17. Different build-up
InVision, Flinto… Pixate, Framer…

18. What we really need
( there’s no such tool yet)

19. 1. Horizontal and Vertical prototypes:
different goal
2. Holy grail not found yet: apps are struggling
between functional and visual focus
3. Keep an eye on Pixate and Framer.js!
Takeaways

20. Thomas Fogarasy
@thomasfogarasy
fogarasy.com
fogarasy@brandlift.eu
momeid.mome.hu
DESIGNER
UI PSD
Q &A
Thank you!