Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Prototyping Tools IxDA Bloomington

Fdb7765260d24f873d0210ebd2eb417d?s=47 Jason Fu
April 21, 2015

Prototyping Tools IxDA Bloomington

Presented at IxDA Bloomington. “Fake it till you make it.” As an indispensable part of design, prototyping is gaining more importance as various new tools are made available for designers at different experience levels. In this session Jason led the discussion of some of the most popular prototyping tools and share experience of learning and using them.

Fdb7765260d24f873d0210ebd2eb417d?s=128

Jason Fu

April 21, 2015
Tweet

Transcript

  1. Fake it you till make it. Let’s talk about prototyping

    (tools) Jason Yihe FU
  2. Why should I do prototyping? Overview: current prototyping tools Close-up:

    my experience of prototyping tools
  3. Why should I do prototyping? Overview: current prototyping tools Close-up:

    my experience of prototyping tools
  4. http://thumbnails-visually.netdna-ssl.com/ux-process_538ff5086b79f_w1500.jpg

  5. Designers communicate the rationales of their design decisions through prototypes.

    Prototypes stimulate reflections, and designers use them to frame, refine, and discover possibilities in a design space. “ ” Lim, Y. K., Stolterman, E., & Tenenberg, J. (2008). The anatomy of prototypes: Prototypes as filters, prototypes as manifestations of design ideas. ACM Transactions on Computer-Human Interaction (TOCHI), 15(2), 7.
  6. Communication Thinking Evaluation

  7. Why should I do prototyping? Overview: current prototyping tools Close-up:

    my experience of prototyping tools
  8. Paper prototypes: always awesome.

  9. Code your prototype: even better. http://fc02.deviantart.net/fs71/f/2011/293/a/9/coding_my_life_away_by_izzuthug-d4dgn1d.png

  10. Tools Prototype For Design Animation Interactivity Code Export Learning Curve

    Pricing Axure RP Any Medium Medium High Yes Steep From $289 Balsalmiq Any Low None None No Short From $89 Sketch Any High None None No Medium $99 InVision Any None Low High No Short From $0/mo. Marvel Any None Low High No Short Free After Effects Any Low High None No Steep $50/mo. (CC) Origami Android, iOS None High High Yes Steep Free Form iOS None High High Yes Steep Free Keynote Any Medium Medium Low No Medium Free Framer Any None High High Yes Steep $79.99 InDesign DPS iOS High Low High No Medium $50/mo. (CC) http://prototypingtools.co
  11. One For All Animation Ninja Best Comeback Quick ’n’ Dirty

    Axure RP Keynote InDesign DPS Origami After Effects After Effects Origami Form Framer InVision Marvel Balsalmiq
  12. Why should I do prototyping? Overview: current prototyping tools Close-up:

    my experience of prototyping tools
  13. Sketch • Best at creating assets • Light-weight, iWork style

    GUI • Lots of extensions • More support from other tools http://bohemiancoding.com/sketch/ http://sketchtoolbox.com http://mobileblog.invisionapp.com/11-tips-for-prototyping-with-sketch/
  14. InVision/Marvel • Import assets, create interactions and get feedback •

    Hot spot guided through • Team collaboration https://marvelapp.com http://www.invisionapp.com
  15. Axure RP • Powerful tool creating prototypes in different level

    of fidelity • Third-party library support • Rich community resources • HTML file/Online link export http://www.axure.com http://www.axure.com/c/forum.php http://axureland.com
  16. After Effects • Perfect for experience prototype • Freedom to

    explore any way of animation. • Video as output, very visualized http://www.adobe.com/products/aftereffects.html https://www.youtube.com/user/mtmograph http://uxinmotion.net
  17. Keynote • Use “magic move” to create animation, video export

    • Make your document and presentation at the same time • Basic visual editing https://www.apple.com/mac/keynote/ https://developer.apple.com/videos/wwdc/2014/#223 https://robots.thoughtbot.com/animating-with-keynote
  18. Origami/Form • Use patch as unique way to visualize the

    logics • Live preview on any devices • Very realistic animation • Code export support https://facebook.github.io/origami/ http://www.relativewave.com/form/ http://7glyphs.com/graphic-design/getting-started-quartz-composer/
  19. Framer • Use code-like way to create animations and interactions

    http://framerjs.com http://framerjs.com/examples/
  20. Instead of learning it, playing with it.

  21. Thanks :) Jason Yihe FU jasonfu.ux@gmail.com www.fuyihe.com