Design process – How do you get your prototype done?

August 4, 2017   Ohsik Park

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

Although InVision covers a lot on rapid prototyping, there are still some things that are easier to do on actual HTML pages especially when you work on prototypes for web apps or websites. Little bit of knowledge on HTML, CSS, and Javascript will allow you to create a quick prototype on an actual HTML page.

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.

 

How do you get your prototype done and what’s the process? What’s your favorite tools?

Leave a Reply

Your email address will not be published. Required fields are marked *