Strong prototyping tool

4 days 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

16 comments

  • Jason Spidle, 3 days 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
    • , 19 hours 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
  • Marc EdwardsMarc Edwards, 1 day 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
    • , 1 day ago

      I agree with your point of view about not taking them too seriously. Thanks for your answer

      0 points
  • I like carrot juiceI like carrot juice, 3 days 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
  • Crispo Colombo, 1 day 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
    • Todd CantleyTodd Cantley, 4 hours 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
  • Zach JohnstonZach Johnston, 1 day 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
  • Mariusz OstrowskiMariusz Ostrowski, 1 day ago

    Try Kite https://kiteapp.co

    1 point
  • Or Arbel, 2 minutes ago

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

    1 point
  • Fredo Tan, 2 days 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
  • Matt C, 1 day 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
  • Louis CoyleLouis Coyle, 1 day ago

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

    1 point
  • Ray SensebachRay Sensebach, 3 minutes 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
  • Diego Maia Evangelista, 10 hours 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
  • Shahraz Khan, 3 minutes 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