Prototyping Tools

We are in a day and age of design where there are tons of prototyping tools to aid you in the communication of user experience and interaction design. Emailing comps frozen in time and space was never and isn’t enough anymore.

I spent the last couple of weeks doing some research and trying out prototyping tools that cater to interaction design and I stumbled upon Pixate and FramerJS. I’m going to go through my overall experiences of these tools and weigh in on my opinion of them.

Invision

Before Invision the team wasn’t dabbling into interactive prototyping at all. We would just email static comps back and forth for feedback and also present designs in a linear flow.

For us the benefits Invision provided were huge. I’ve used this tool to receive stakeholder and team feedback, specs and specific flows for developers to reference. Invision is great because it is easy to get started, it takes no code and has great sharing features. One issue I do have with Invision is that when it comes to motion and interactions there’s nothing that can be done (for now). So when I go to explain to a team member that “this element will fade and this element will slide from the top of the screen” they look at me like the madman I must be.

Pros
– Ease of use
– Sharing

Cons
– Lack of transitions

Pixate

Pixate was the first interactive prototyping platform I tried outside of the familiar world of Invision. I’d caught wind of it while watching a prototyping talk Lyft was having. The learning curve for it was mild and they give you a decent amount of help with their visual tutorials. For someone who has no background of development they will have an easy time with Pixate It just requires dragging + dropping and editing parameters.

Pros
– Ease of use
– Video exporting from application

Cons
– No asset import feature
– Low Quality video exports from mobile application

FramerJS

I have seen FramerJS around for a while but I just recently took it for a spin. Their desktop application is easy to use once you get familiar with their JS-like syntax. Their amazing exporting features won me over, just name your layers in PS or Sketch and go to town!

Pros
– Familiar to those who write Javascript
– Super easy asset importing
– Sharable project files

Cons
– Learning curve for people who don’t write code on a daily basis
– Code Redundancy (Unfortunately there’s no selector chaining in Framer which would drastically increase productivity and how much code you have to write. It would be cool if there were variables)

Conclusion

Based on some of the quirks and benefits I listed above I would consider InvisionApp or FramerJS to be a winner. Based on what level of detail you need to present in your prototype to stakeholders, your team and developers. I think Pixate would’ve been the strongest candidate if they had a solid asset import feature.