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!