39
http://ux.handson.co

Hands-On Prototyping Without Code

  • Upload
    itnig

  • View
    106

  • Download
    3

Embed Size (px)

DESCRIPTION

 

Citation preview

Page 1: Hands-On Prototyping Without Code

http://ux.handson.co

Page 2: Hands-On Prototyping Without Code

Hands-on Prototyping

Without Code

@andreehuk

Page 3: Hands-On Prototyping Without Code

@andreehuk

Rookie Mistake #1No white space

Page 4: Hands-On Prototyping Without Code

@andreehuk

Page 5: Hands-On Prototyping Without Code

@andreehuk

Rookie Mistake #2Huge monitors

Page 6: Hands-On Prototyping Without Code

@andreehuk

Page 7: Hands-On Prototyping Without Code

@andreehuk

Page 8: Hands-On Prototyping Without Code

@andreehuk

Page 9: Hands-On Prototyping Without Code

@andreehuk

Wrong perspective

Correct perspective

Page 10: Hands-On Prototyping Without Code

@andreehuk

Expert HeuristicWhen it looks toooo big,

it’s about right

Page 11: Hands-On Prototyping Without Code

@andreehuk

Getting our hands dirty

Page 12: Hands-On Prototyping Without Code

@andreehukFake

Real

Keynote

Bootstrap (no DB)

proto.io

omnigraffle

flinto invisionapp

Framer

Page 13: Hands-On Prototyping Without Code

powerpoint

@andreehuk

Page 14: Hands-On Prototyping Without Code

@andreehuk

powerpoint

Page 15: Hands-On Prototyping Without Code

powerpoint

@andreehuk

Page 16: Hands-On Prototyping Without Code

@andreehuk

powerpoint

Page 17: Hands-On Prototyping Without Code

flinto.com

@andreehuk$20 / month

Page 18: Hands-On Prototyping Without Code

@andreehuk

screenshots in flinto.com

Page 19: Hands-On Prototyping Without Code

@andreehuk

screenshots in flinto.com

Page 20: Hands-On Prototyping Without Code

Flinto

@andreehuk

• Good for real interactions • Very simple and fluid • Web connection needed for

testing

Page 21: Hands-On Prototyping Without Code

omnigraffle

@andreehuk$99 or $199 once

Page 22: Hands-On Prototyping Without Code

@andreehuk

omnigraffle

Page 23: Hands-On Prototyping Without Code

@andreehuk

omnigraffle

Page 24: Hands-On Prototyping Without Code

@andreehuk

omnigraffle

then key b+click to jump between slides

Page 25: Hands-On Prototyping Without Code

@andreehuk

or omnigraffle wf’s into keynote

Page 26: Hands-On Prototyping Without Code

@andreehuk

export as PDF, open in… to test

Page 27: Hands-On Prototyping Without Code

omnigraffle

@andreehuk

• Boatloads of stencils available • Very smooth workflow between

WF’ing and testing IX’s • Not good for creating rich

interactions

Page 28: Hands-On Prototyping Without Code

keynote

@andreehukFree with every new Mac

Page 29: Hands-On Prototyping Without Code

@andreehuk

keynote

biggest issue: “slide follows slide” concept Hardly any rich IX’s doable

in non-linear prototypes

Page 30: Hands-On Prototyping Without Code

@andreehuk

keynote

Page 31: Hands-On Prototyping Without Code

@andreehuk

keynote

Page 32: Hands-On Prototyping Without Code

@andreehuk

keynote

On “Play” you then click (“jump”)

chronologically from slide to slide

Page 33: Hands-On Prototyping Without Code

Keynote

@andreehuk

• Very good for effects • Very good for click interactions • Not good for creating rich

interactions across many screens

Page 34: Hands-On Prototyping Without Code

proto.io

@andreehuk$24 - $160 / month

Page 35: Hands-On Prototyping Without Code

@andreehuk

proto.io

Page 36: Hands-On Prototyping Without Code

@andreehuk

proto.io

Page 37: Hands-On Prototyping Without Code

@andreehuk

proto.io

Rich interactions in the browser or

on mobile

Page 38: Hands-On Prototyping Without Code

proto.io

@andreehuk

• Very good for rich interactions • Steeper learning curve • Web connection needed for

testing

Page 39: Hands-On Prototyping Without Code

Get in touch [email protected]