Working at FabFitFun on different projects got me thinking of getting prototype done in the most efficient way and I found this interesting how I used different tools to get different prototypes.
Here are the 3 different ways I use to get prototypes done.
1. Using prototyping tool
InVision is probably the first tool I would consider to get a quick prototype done. I found that InVision is very good at presenting user flow and simple UI interaction. It is easy to use and offers a lot of features that make collaboration easier. Using InVision with Sketch and Craft offers a very smooth work flow for me to get a prototype done from the design mockups and communicating with front-end developer with an Inspect mode. I also love features like sharing link for desktop and mobile and real time commenting.
There are many more prototype tools you can check out such as Marvel app, Origami, and more.
2. HTML prototype
HTML page built with 3 – 4 images from design mockups
The HTML page example above only contains 3 – 4 images(top navigation, content area, sidebar area, and sticky navigation) that will show how the main UI will work on actual web browsers. Such as a top navigation that sticks on scroll or a side bar sticks when it reaches the bottom of the content area are hard to replicate in InVision but not so hard if you know little bit of coding.
3. Video prototype with After Effect
After effect allows you to get very detailed UI interaction and animation on your design. When your design requires complex UI interaction or animation, you might find it hard to replicate them with prototype tools out there. With After effect, there’s literally no limitations to your UI interaction and animation.
Don’t want to learn After Effect? There are other tools like Principle that you can use to animate your UI.
Video prototype can be time consuming depends on how much detail you want to present but will eventually safe your time and money.