Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
CRAFTING  INCREDIBLE  DESIGNS
Pushing  the  Limits  of  Mockups  &  Prototypes
#BSW14
DAVE  PITMAN
@edavepitman
co-­‐founder
UX,  Data  Viz,  Product  Strategy
hGp://www.kytheram.com  
<  1  MILLION 34  MILLIONvs
PLAYERS
Play  here:  
hGp://saming.fr/p/2048/
Play  here:  
hGp://gabrielecirulli.github.io/
2...
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  MILLIONvs
PLAYERS
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)
“Adv...
<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  fun...
MACAW
PROS CONS
Is  actual  HTML/CSS
Fluid  vs  Sta[c  Layouts
Creates  decent  code
Capabili[es  match  reality
Is  actual  HTM...
FRAMER  JS
PHOTOSHOP
SKETCH
FRAMER  JS BROWSER
Video  showing  Framer  
JS  example
Example  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  /  Examp...
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-­‐on...
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  ...
Other  tools  I’ve  tried  &  didn’t  like,  or  are  not  
appropriate  for  crea[ng  advanced  interac[ons
CRAFTING  INCREDIBLE  DESIGNS
Pushing  the  Limits  of  Mockups  &  Prototypes
#BSW14
@edavepitman  
Crafting Awesome Designs - #BSW14
Crafting Awesome Designs - #BSW14
Crafting Awesome Designs - #BSW14
Crafting Awesome Designs - #BSW14
Crafting Awesome Designs - #BSW14
Upcoming SlideShare
Loading in …5
×

Crafting Awesome Designs - #BSW14

Talk for Boulder Startup Week 2014

  • Be the first to comment

  • Be the first to like this

Crafting Awesome Designs - #BSW14

  1. 1. CRAFTING  INCREDIBLE  DESIGNS Pushing  the  Limits  of  Mockups  &  Prototypes #BSW14
  2. 2. DAVE  PITMAN @edavepitman co-­‐founder UX,  Data  Viz,  Product  Strategy hGp://www.kytheram.com  
  3. 3. <  1  MILLION 34  MILLIONvs PLAYERS Play  here:   hGp://saming.fr/p/2048/ Play  here:   hGp://gabrielecirulli.github.io/ 2048/  
  4. 4. Comparing  screenshots  (1)
  5. 5. Comparing  screenshots  (2)
  6. 6. Comparing  screenshots  (3) (hard  to  see  the  difference…)
  7. 7. Comparing  screenshots  (4) (screenshots  might  not  be  effec[ve…)
  8. 8. Video  of  gameplay   (elegant  anima8ons/transi8ons   really  make  the  game  fun)
  9. 9. Video  of  gameplay   (hint:  it  looks  the  exact   same  as  the  screenshots)
  10. 10. Side-­‐by-­‐side  comparison  video
  11. 11. With  this  version,  can  effec8vely   follow  quick  gameplay
  12. 12. Video  examining   transi8ons  in  depth
  13. 13. <  1  MILLION 34  MILLIONvs PLAYERS
  14. 14. 2048  PROVES  WHY  THE  DESIGN   BETWEEN  MOCKUPS  MATTERS
  15. 15. HERE’S  MY  MOCKUP (how  we  design  today)
  16. 16. HERE’S  MY  STORYBOARD (how  we  design  today)
  17. 17. HERE’S  MY  STORYBOARD NAILED IT! (this  process  of  sta[c  mockups  and   storyboards  isn’t  cueng  it  anymore)
  18. 18. PHOTOSHOP Why  are  we  using  tools  that   were  never  designed  for  this?
  19. 19. OMNIGRAFFLE Why  are  we  using  tools  that   were  never  designed  for  this?
  20. 20. UX  WORKFLOW  I  DID  RECENTLY …FOR  JUST  THE  SIGNUP  PROCESS Got  me  thinking-­‐   I  need  to  find  a   beGer  way
  21. 21. 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
  22. 22. <EPIC  TRAINING  MONTAGE>
  23. 23. TOOLS  I’VE  TRIED  RECENTLY
  24. 24. SKETCH
  25. 25. …  STILL  STATIC  MOCKUPS
  26. 26. 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
  27. 27. MACAW
  28. 28. 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
  29. 29. FRAMER  JS
  30. 30. PHOTOSHOP SKETCH FRAMER  JS BROWSER
  31. 31. Video  showing  Framer   JS  example Example  here:   hGp://examples.framerjs.com/#Google%20Now%20-­‐%20Overview.framer
  32. 32. 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  😢
  33. 33. ORIGAMI
  34. 34. Video  showing   Origami  example Example  here:   hGp://facebook.github.io/origami/examples/
  35. 35. What  it  looks  like  at  first
  36. 36. Actual  amount  of  work  involved
  37. 37. 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
  38. 38. HYPE
  39. 39. Video  showing   Hype  example Example  here:   hGp://tumult.com/hype/gallery/Linkility/Linkility.html
  40. 40. 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
  41. 41. Other  tools  I’ve  tried  &  didn’t  like,  or  are  not   appropriate  for  crea[ng  advanced  interac[ons
  42. 42. CRAFTING  INCREDIBLE  DESIGNS Pushing  the  Limits  of  Mockups  &  Prototypes #BSW14 @edavepitman  

×