What software are you using to create testable prototypes?

over 4 years ago from , Product Design Lead

In the past I've created static HTML pages and I've used a few basic tools but I want something quick and capable of creating elegant interactions. What are you using for this?


  • Visien VinesaVisien Vinesa, over 4 years ago (edited over 4 years ago )

    If you want a quick and capable, I will eliminate Framer, Origami or Flow because they require coding and new kind of logic (patches). I just happen to learn to use ProtoPie this week. It's still on beta phase so you can get it for free.

    Before using ProtoPie, I have tried Flinto and Principle.

    In flinto, it's hard to create animated transitions using its behavior designer or transition designer, but easy to create page transitions. In Principle, it's hard to make a prototype complete with all screens because it doesn't have simple core feature like page transition, but it's easy to make single interactions using Drive and Timeline. Therefore you have to use both in order to achieve page transition and animation.

    In ProtoPie, I can achieve both. IMO it has the most complete events or interactions needed to build a decent prototype, compared to Flinto and Principle. It has Timeline and Chain (chain is similar to Principle's Drive). Also other killer features like Send and Receive (you can send signal to other device and receive it from the other device). One thing that I really like is ProtoPie HAS an Android app to preview your prototype (most of prototyping tools don't have Android support). The cons of ProtoPie for now is you can only preview your prototype using devices (there is no on-screen preview) and its lack of documentation. But I'm sure you can learn it fast because it uses easy to understand language for its events. Little tweaks can make it look like a real app, can be useful for pitching too :D.

    At first I resisted to learn it because it lacks small details such as you can only move layer one by one, or you have to manually change number instead of pressing the up or down key just to increase or decrease the value. But I hope they will improve it in the future releases of ProtoPie. I'm really looking forward to its official release and would be very happy to purchase it!

    Hope this helps :)

    2 points
    • Tim Resudek, over 4 years ago

      Thanks for the full rundown. I've been using Principle and I like it a lot but I wish it were capable of exporting a prototype that can be used in a browser. I'm going to check out protopie this week.

      1 point
  • Jared CJared C, over 4 years ago

    If at the wireframe stage: Axure.

    If I'm testing later, from comps, I've been using Flinto unless things like actual text input and data are important, then I'll still use Axure.

    I don't think Axure is a perfect tool at all, or even close to it, but it does certain things I need out of a prototype that a lot of tools don't have.

    0 points
  • Trev MorrisTrev Morris, over 4 years ago

    Our UX designers swear by Marvel App. It's super quick and super easy to drop in PNGs, whether that's a low-fidelity WF you're testing or high-fi visual mockup. It'll give you a URL to chuck towards a desktop for remote testing and you can easily link dropbox to it - simply reupload screens (should you need to quickly redesign something) and it'll swap the new design out with the old screen so long as you maintain artboard/file names.

    0 points
  • Andu PotoracAndu Potorac, over 4 years ago

    To add to my comment, if you plan to create prototypes that animate elements between screens, your go to product should be Framer.

    These are some examples that can be achieved with Framer only: https://medium.com/octopus-library/animation-principles-in-ui-5f901b5edae0#.vdpe1ie49

    0 points
  • Andu PotoracAndu Potorac, over 4 years ago

    There's a few of them out there, and I think it's worth exploring just the top ones.

    Marvel and InVision are pretty solid and similar when it comes to simply creating a linkable interface by adding hot spot areas on images. I'd recommend Marvel because it's a better price and they seem to be doing quicker updates to their product. (https://marvelapp.com)

    Between Framer and Origami I suggest Framer as it's easier to install and has a visual editor + code editor (like Flash did with AS3 and the interface for simpler animations).

    And finally there's Principle and Flinto which are somewhere in the middle, between Marvel and Framer. It really depends how you need your prototype to be: simple or complex.

    0 points