information Architect to interaction Design Experience

Information Architecture ←→ Wire frame → Prototyping

Paper and pen/pencil

paper prototyping

Paper and pencil are the best tool to pull out all my ideas and creativity in the initial time for me.
I just draw whatever ideas with me with the information I gathered from the brainstorming. 
After I get some conclusion, about interaction on the single page, site map, workflow, I will change it into wire frame with any tool.

Balsamiq

iPhone wire frame — balsamiq

When I started My Wire framing and prototyping, I just did an analysis about Multiple tools. 
For my Initial Projects, I did wire frame using Balsamiq tool. It was awesome tool. I just dragged and drop icons, Device components. The search option to get the drawing the objects is so good. It is a low fidelity wire frame. I used this for design hydrating and to take the best design decision through brainstorming with clients’ requirements.

mockingbot

Prototyping — Mockingbot

My guide suggested to use mockingbot tool. I was able to make High fidelity wire frame and then I converted it into the clickable prototyping (without pixel perfection) with mockingbot.

It has very good features with transition, animation. I was able to collaborate easily with other designers, PMs, developers.

In Design Perspective, It has layer panel to work easily with objects.
MockingBot makes prototype creation simple by giving you the ability to create objects and combo templates, built-in widgets, and more with its templates, built-in widgets, and more with its convenient drag-and-drop functionality. It is equipped with an icon library, consisting of more than 100 icons.

With this tool, I created animations with state transition of the same screen.

we can use a Mac Book or Windows to create prototypes offline by using the MockingBot platform. I used web view mockingbot in my Linux system.
It allowed me to switch between screens as well as sharing and preview mode.
Webview, PNG, Android apk, is an iPod and can generate QR codes which enables to scan the code using iOS or Android device’s camera to test the prototype.

Like what you read? Give Amalashanthini a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.