CRAFTING  INCREDIBLE  DESIGNSPushing  the  Limits  of  Mockups  &  Prototypes

#BSW14

DAVE  PITMAN

@edavepitman

co-­‐founder

UX,  Data  Viz,  Product  Strategy

hGp://www.kytheram.com  

<  1  MILLION 34  MILLIONvsPLAYERS

Play  here:  hGp://saming.fr/p/2048/

Play  here:  hGp://gabrielecirulli.github.io/2048/  

Comparing  screenshots  (1)

Comparing  screenshots  (2)

Comparing  screenshots  (3)(hard  to  see  the  difference…)

Comparing  screenshots  (4)(screenshots  might  not  be  effec[ve…)

Video  of  gameplay  (elegant  anima8ons/transi8ons  

really  make  the  game  fun)

Video  of  gameplay  (hint:  it  looks  the  exact  same  as  the  screenshots)

Side-­‐by-­‐side  comparison  video

With  this  version,  can  effec8vely  follow  quick  gameplay

Video  examining  transi8ons  in  depth

<  1  MILLION 34  MILLIONvsPLAYERS

2048  PROVES  WHY  THE  DESIGN  BETWEEN  MOCKUPS  MATTERS

HERE’S  MY  MOCKUP

(how  we  design  today)

HERE’S  MY  STORYBOARD

(how  we  design  today)

HERE’S  MY  STORYBOARD

NAILED IT!

(this  process  of  sta[c  mockups  and  storyboards  isn’t  cueng  it  anymore)

PHOTOSHOP

Why  are  we  using  tools  that  were  never  designed  for  this?

OMNIGRAFFLE

Why  are  we  using  tools  that  were  never  designed  for  this?

UX  WORKFLOW  I  DID  RECENTLY

…FOR  JUST  THE  SIGNUP  PROCESS

Got  me  thinking-­‐  I  need  to  find  a  beGer  way

A  DESIGNER’S  NEW  WISH  LIST

Easily  create  pixel-­‐perfect  mockups

Prototype  &  demonstrate  anima[on  (change)

“Advanced”  visuals  (blur,  noise,  gradients,  etc)

Test  &  tune  gestures  (flicking,  pinching,  etc)

An  extremely  high  level  of  fidelity  in  all  tools

<EPIC  TRAINING  MONTAGE>

TOOLS  I’VE  TRIED  RECENTLY

SKETCH

…  STILL  STATIC  MOCKUPS

PROS

Pixel-­‐perfect  mockups

Easy  to  do  gradients,  blur,  etc

Expor[ng  tools

Vector-­‐based

Symbols

CONS

Styles  func[onality  is  a  mess

Was  unstable,  now  just  buggy

CSS  export  misses  poten[al

MACAW

PROS CONS

Is  actual  HTML/CSS

Fluid  vs  Sta[c  Layouts

Creates  decent  code

Capabili[es  match  reality

Is  actual  HTML/CSS

Great-­‐looking  awful  UI

Spend  a  lot  of  [me  figh[ng  it

Limited  toolkit

FRAMER  JS

PHOTOSHOP

SKETCH

FRAMER  JS BROWSER

Video  showing  Framer  JS  exampleExample  here:  

hGp://examples.framerjs.com/#Google%20Now%20-­‐%20Overview.framer

PROS CONS

Easy  to  implement

Full  control  over  details

Awesome  toolchain

Fantas[c  prototyping

Documenta[on  /  Examples

Requires  basic  JS  know-­‐how

Future  not  certain?

Sketch  -­‐>  Framer  😢

ORIGAMI

Video  showing  Origami  example

Example  here:  hGp://facebook.github.io/origami/examples/

What  it  looks  like  at  first

Actual  amount  of  work  involved

PROS CONS

Visual  layout

Supported  by  Facebook

Creates  great  prototypes

Like  building  a  machine

Developer  Mac-­‐only  (really)

No  middle-­‐ground

Steep  learning  curve

No  in-­‐app  design

HYPE

Video  showing  Hype  example

Example  here:  hGp://tumult.com/hype/gallery/Linkility/Linkility.html

PROS CONS

Anima[on  [meline

HTML/CSS/JS  back-­‐end

Gesture  support

Capabili[es  match  reality

No  ability  to  create  design

Timeline  UIs  can  be  limi[ng

Not  designed  for  “apps”

Anima[ons,  not  manipula[ons

Other  tools  I’ve  tried  &  didn’t  like,  or  are  not  appropriate  for  crea[ng  advanced  interac[ons

CRAFTING  INCREDIBLE  DESIGNSPushing  the  Limits  of  Mockups  &  Prototypes

#BSW14

@edavepitman