During a recent project I began looking at ways to prototype the key interactive element of a website. This led me into the minefield of prototyping tools.
There are floods of tools out there, but I wanted to investigate platforms that move beyond a wireframe, where you can convey the overall journey of the site to create a micro-interaction that could be tested with users. This in turn can help inform the overall development of the site, highlighting any usability issues before the product reaches build stage. Here are some of the most interesting tools I found!
Proto.io is a browser-based platform to create interactive prototypes and wireframes. You can trigger an animation from an interaction without any code, then export an HTML prototype. This prototype can be viewed in a browser, or be easily sent to a mobile device by SMS. This means you can share your prototype quickly and smoothly with other team members, clients or users.
This platform also allows you to create interactive UI components and capture data. This combination means the sharable prototype can be created quickly while feeling like the real thing.
UXPin is a browser-based UX tool. When it comes to prototyping, you can create a realistic user experience with advanced interactions and animations as well as developing your UI elements in Adobe Sketch or Photoshop. This can help you convey the feel of your prototype when working with clients or users.
Moving beyond wireframing and prototyping, UXPin includes additional functionality to create a Persona or Business Model Canvas. This makes it a very valuable tool to the full design process, right from the start of a project.
UXPin also includes built-in user testing functionality, allowing your design team to set up remote testing sessions. I think this is one of the strongest all-round UX tools, with real potential to improve the workflow of you and your design team.
Framer is a native app on Mac that allows designers to create very intuitive prototypes that feel like the real thing using coffee script, a simple snippet based version of java script. You can import design elements – also working with Adobe Photoshop and Sketch – or create shapes using code then create fully interactive prototypes that can work with real values.
It’s a clear working environment where you can see any updates to your code live on your design. There is also a mobile app that allows you to play with the prototype straight to your handset.
By allowing yourself to fail quickly, regularly and relatively cheaply through these rapid methods, it will give you an end result that provides the ideal solution for your client by creating the best experience for their users.
Check out some of our other digital and mobile projects.