9

Strong prototyping tool

over 5 years ago from , Product designer

Hi guys.

Right now I am finding difficult (time-consuming) to create a complex prototype for one of my projects.

The question is what tools do you find the best and the workflow you use, right now I have to make multiple duplicates of some screens in order to change a few things depending on the previous screen. (I use sketch and invision)

Thanks

18 comments

  • Jason Spidle, over 5 years ago

    Honestly, it's best to just try them all. I've read all kinds of different answers to questions like this when I had the same problem but ultimately I settled on a tool that best fit my mental model (Flinto, in my case [also because the Flinto YouTube is such a huge help]). There is a ton of overlap in these tools so it becomes a matter of personal preference rather than one tool be clearly better than the others. This tool comparison chart should help in prioritizing the tools to try. Also, this list has a few more tools that aren't in the comparison chart.

    But based on your stated desires in a tool, I would suspect that something like Origami or Framer would work well (if you don't mind a bit of code). It seems like those tools offer the greatest ability create highly interactive prototypes without needing to create a million screens.

    6 points
    • , over 5 years ago

      Yes I don`t mind coding, I was thinking about complex prototypes would mean some coding

      I may try Framer, Thank you!

      0 points
      • Michael Ahokas, over 5 years ago

        Now days I use Zing Studio for prototyping. We've been beta testing where I work for quite a while and it's a really powerful prototyping tool that combines visual editing and coding. The language is called Zing script and it's very clear and expressive so it's pretty easy to pick up. The way you create reusable elements in Zing is awesome and we've now built a full design system in it so prototyping new stuff is really quick. We've prototyped some very complex apps in it (mobile apps and TV apps), even pulling in real data (not that you need to, but it's great to try out the prototype with it if you can).

        The thing I like most about it is, you can do simple things really quickly but if you want you can build out fully fledged prototypes.

        0 points
  • Marc EdwardsMarc Edwards, over 5 years ago

    I’ve found that no single prototyping tool can do it all. And, that’s okay!

    For broader overviews and more common interactions, you’re likely best off with Flinto or Principle. If your design tool of choice has prototyping, I’d use that as the first option, until you need to do something out of scope for what it can handle.

    For more inventive and less common interactions, you may have to write code. In that case, I’d recommend Framer or Processing. Yes, Processing is actually amazing for this use! HTML/JS/CSS can also be good, if that’s something you’re familiar with.

    This may just be my opinion, but I like to keep prototypes pretty limited in scope — they’re either to demonstrate a high level overview of the app, or they’re to demonstrate a single, complex interaction. If you find yourself building the entire app with all kinds of animation and interactions for every screen, I think you’re misusing prototyping and likely redoing a lot of work that will be built easier and faster as final code by a developer.

    I’d also add that it’s okay for prototypes to be messy. Their job is to serve as a proxy that is just good enough, so the team can learn, and so decisions can be made. If you find yourself spending a lot of time building a perfect prototype, you may just be wasting time. A lot of the smaller details can be fixed later with the production code. Also, please take this advice with a grain of salt — I realise different scenarios and organisations have different constraints, and if you’re prototyping something that you will not be involved in building, then you may need to take the prototype a lot further.

    5 points
  • GOOD LUCKGOOD LUCK, over 5 years ago

    I would say there are two major apps for multiple screen prototypes: - proto I have used this for a few full projects, it's ok. - axure another big app, more bovine ;)

    Anything else (Flinto, Principle, etc.) is good for the short screen transitions mostly.

    Peace!

    4 points
  • Mariusz OstrowskiMariusz Ostrowski, over 5 years ago

    Try Kite https://kiteapp.co

    2 points
  • Zach JohnstonZach Johnston, over 5 years ago

    I struggled with this question for a couple years. My teammates always pushed me to try Framer but it felt like overkill and InVision was good enough. I've since changed my mind and can't recommend Framer enough for high-fidelity prototyping.

    DM me on Twitter if you have questions.

    2 points
  • Crispo Colombo, over 5 years ago

    I've found Axure to be the most versatile overall. I've tried every other tool and keep going back to it. The ux of the app overall could use some work and there's a bit of a learning curve but I haven't found anything else like it. Especially for web apps.

    2 points
    • Account deleted over 5 years ago

      Yeah Axure gets no love because it doesnt look amazing, but it's seriously one of the best tools out there, and you can some insanely in depth stuff with it.

      0 points
  • Or Arbel, over 5 years ago

    If you want to prototype interactions, we just launched a Sketch plugin for interaction design - Timeline for Sketch

    1 point
  • Louis CoyleLouis Coyle, over 5 years ago

    Try figma, import your sketch file and just hook up the prototype interactions. Easy.

    1 point
  • Matt C, over 5 years ago

    If I need to convey a complex interaction, I use Axure. It's the best. It's a bit overkill for most work, but when you need it, it kills.

    1 point
  • Fredo Tan, over 5 years ago

    Try out https://protopie.io

    • Unique conceptual model: Interaction = Object + Trigger + Response → Most gradual learning curve`

    • Interaction-focused, not animation-focused

    • Use sensors (e.g., tilt, proximity and sound) in interactions, all code-free

    • Create highly interactive prototypes that can communicate with each other on the same network, meaning on various devices (desktop and mobile)

    • Create interactions across software and hardware (e.g., Arduino and littleBits)

    Of course, this goes way beyond the scope of Sketch Prototyping and InVision.

    1 point
  • Jim Owens, over 5 years ago

    There seem to be too many and all have some problems. Currently I am using Adobe XD because it is very quick, easy and integrates well with the other Adobe stuff, and is intuitive for people who are familiar with Adobe. But it doesn't have adequate prototyping capability yet. They release more every month but still aren't there yet. Then I copy things from XD to Sketch which is surprisingly easy, and then use Principle which is nicely integrated with Sketch. Principle can do very sophisticated animations and so forth, but also can become wildly complicated in terms of the ability to control so many animations. I've had trouble moving back and forth between Principle and Sketch once a lot of interactions have been built in Principle. I do want to give Protopie more of a try. I did import an XD file to Protopie and it came out a little weird; so I didn't continue trying it. I've been wondering if anyone has used Squarespace or Wix for prototyping and how that turned out?

    0 points
  • Shahraz Khan, over 5 years ago

    The best options around are UXPin, Webflow and Marvel. The design world is now filled with prototyping tools. The best prototyping tools help you iterate quickly while preserving design consistency. They become more than just a tool, in fact, but rather a platform for full creativity and experimentation with the entire product team. I'm working in a leading IT Company in Dubai as a web developer & designer. I mostly use these tools for my work in web design company Dubai. Thanks

    0 points
  • Diego Maia Evangelista, over 5 years ago

    I have been using Atomic (https://atomic.io) this past year and I can't think about anything better. Just like Invision you can create click-based flows and set transactions and animations but the biggest difference with Atomic is that you can use javascript to do more advanced stuff.

    For example, you could create a form, capture what users had typed in a text field and send them to different screens based on that.

    Atomic also has "components" that can be reused in different parts of the prototype, making my life way easier.

    0 points
  • Ray SensebachRay Sensebach, over 5 years ago

    +1 for Axure. They seem to be worse at Marketing than all these new fancy tools, but everything else is still catching up to Axure in terms of features!

    0 points