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

Prototyping Tools IxDA Bloomington

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.

Jason Fu

April 21, 2015
Tweet

Other Decks in Design

Transcript

  1. 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.
  2. 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
  3. 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
  4. 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/
  5. InVision/Marvel • Import assets, create interactions and get feedback •

    Hot spot guided through • Team collaboration https://marvelapp.com http://www.invisionapp.com
  6. 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
  7. 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
  8. 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
  9. 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/
  10. Framer • Use code-like way to create animations and interactions

    http://framerjs.com http://framerjs.com/examples/