App for wireframe sketches and prototyping

Mobile application which will aid in wireframe sketching

Posted on August 31, 2016

While working on a new project at Razorpay, I've got this idea about wireframe sketches and how a designer's life can be made simple. I quickly got working on the spec sheet for this application and this is what I came up with:

Paper wireframing and Prototyping

This is an Android/iOS app which utilizes the camera to aid the user in wireframing using pen and paper and also prototyping the wireframed sketches using simple screen transitions (something like InVision)

Wireframing

Many designers, including me and my team, prefer wireframing using a pen and paper. And we often sketch rough ideas quickly and iterate on them till we reach a desired stage. The wireframing part of this app will help in sketching the layouts.

Consider you’re designing a product for an android device in the portrait mode. Fire up our app, select the device (android, in this case) and device style (portrait). This fires up the camera with a translucent box in the aspect ratio of 360x640 (which is the standard android phone layout). Take an empty sheet, place the mobile at a desired height (height changes the size of the layout, obviously) and draw the outlines on the sheet using the translucent lines as a guideline.

A quick prototype

The translucent guides help you to make an exact layout on your dot grid sheet or a plain sheet. Major UI elements like buttons (floating action button for example), Menus, bottom navigation, toolbars, standard input forms etc (same for iOS UI components) can be added to the basic translucent layout.

Prototyping

Once you’re done sketching the basic elements and other UI components on your paper, fire up the app and match the outlines of the translucent screen guide with the paper sketch and take a picture. All these pictures can go to our web app (or can be done on mobile too, I prefer a web app for prototyping) and add hotspots on the UI components and connect two screens with basic transitions like fade, slide left-right, slide up-down, scale down or up etc. The web app will be similar to InVision. Nothing special. So, the prototyping can be done on invision too. Best scene would be to link the app to InVision somehow and prototype there. Invision syncs well with dropbox, so, maybe all the pictures can be stored in that dropbox folder for prototyp

Why this app?

Why an app for guiding the wireframe sketching? Well, many times I face a situation where my high fidelity screens don’t match the wifreframes I sketched. Which in turn creates a bad experience most of the times. I want a situation where what I am sketching will be in sync with what I make. This app will help in deciding what all can I fit into one screen without cluttering, what all elements will go in one screen above the fold etc. All I want to say is sketching on a paper < Sketching on a dot grid paper < sketching on a paper (dot grid or not) with the aid of this app.