High Fidelity UI Prototyping - Because JPG Attachments S*ck
20
High Fidely Prototyping Because JPG Attachments Suck Thomas Fogarasy - 2014 NOV. fogarasy.com [email protected]
-
Upload
thomas-fogarasy -
Category
Design
-
view
513 -
download
1
description
Tamás Fogarasy: 20 min talk at App! Mobile Conference about how to create horizontal and vertical, high fidelity User Interface ( UI ) prototypes of mobile apps using the latest tools. The presentation continued with a live demo session. Demo prototype links: Marvel prototype: http://marvl.in/7fb7de Pixate demo with UI animations: pixt.io/p256v8tv5o4 User Interface prototyping is a great tool for interaction design tests, elevator pitches and user testing. It enables the designer to present the overall User Experience to any client.
Transcript of High Fidelity UI Prototyping - Because JPG Attachments S*ck
High Fidelity Prototyping! Because JPG Attachments Suck
Thomas Fogarasy - 2014 NOV. fogarasy.com [email protected]
I. Hi-fi what? II. What is it for? III. Tools for mobile prototyping IV. DEMO
a quick definitonHi-fi what?
I.
• feels like a product • almost final look&feel • shows some or all features • minimal or no native code
Hi-fi
• lot of features / screens shown • fewer details • broad view of the system
horizontal
• fewer, key features • PoC focus • more detailed interactions
vertical
scenarios and benefitsWhat is it for?
II.
• IxD validation, testing
• UI fine-tuning, animation (yay!)
• user/client testing
• seeking partners
• market/crowdfunding demo(awesome for elevator pitches)
Tim
e -
days
(est
imat
e)
0
7,5
15
22,5
30
Sketches Wireframes Mockups Hi-Fi Prototypes Native Dev
it’s that cool
(mobile UI perspective)Tools?
II.
How do they compare?
Pixate
Proto.io
Marvel, Flinto
Starting with your mockup (.sketch, .psd, .ai…)
Framer.js
Functional Visual
After Effects
InVisionNothing in
between???
Diffi
culty
Medium High
Marvel & Pixate
DEMO
III.
UI concept for prototyping demonsration
Tools: Marvel & Pixate
conference networking app
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
Different build-up
InVision, Flinto… Pixate, Framer…
What we really need
( there’s no such tool yet)
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
Thomas Fogarasy @thomasfogarasy
fogarasy.com [email protected]
momeid.mome.hu
DESIGNER
UI PSD
Q &AThank you!
