1.2 Prototyping/Wireframes

Ankur Srivastava
Jun 19, 2017 · 3 min read

Sometimes it is easy to think upon an idea loosely, but when you really sit and pay attention to the details, you find yourself stuck at the finest of the facets.

Being a programmer and a developer, I have faced this a lot many times. Then the best solution is to have a rough skeleton prepared, so that you can always quickly brush through what you are up to.

Thus, Prototyping or making Wireframes for your to-be app basically gives you a rough sketch of how your application will finally be working. This Prototype has minimalist of the features in comparision to the real application that you will build.

Therefore, Hasura also gave us the task of making prototypes /wireframes of our app idea. For this purpose, they provided us with a powerful tool known as Proto.io, which is a popular online application to create dynamic and highly interactive prototypes. Besides this, Hasura also arranged a webinar, delivered by Alexis Piperides, CEO of Proto.io.

So basically, a prototype is “a product that is designed and built to test a new design. The prototype is used to correct mistakes and make [the design] more user friendly” (wiki.answers.com). It is a “fully functional working model of a final product” (onlineschools.org).

Whereas, a wireframe is a visual illustration of one Web page. It’s simply meant to illustrate the features, content and links that need to appear on a page so that your design team can mock up a visual interface and your programmers understand the page features and how they are supposed to work. One of the main purposes of a wireframe is to show you where each item should be placed on a page. (Usability.org)

So now, highly charged with these events, I proceeded to prepare a 3 screen prototype of my idea using that very tool. According to this model, my app will have 3 screens purely for describing the app features, and 1 screen for SignIn/SignUp process.

Description of the Prototype:

Screen 1 : DashBoard

Image for post
Image for post
Screen 1 : Dashboard

Screen 2: Create Board

Image for post
Image for post
Screen 2 : Create Board

Screen 3 : Manage Board

Image for post
Image for post
Screen 3 : Manage Board

Signin/Signup Screen:

Image for post
Image for post
SignIn/SignUp Screen

Well, after making the prototype for my app, it dawned upon me that creating a model is also a tough job to do. I really felt like coding these features, while making the real app, might be a lot easier job to do than this :D.

But then it also gave me a better picture to my idea, and now I know what is that basic block that connects a vague idea into a real product.
And also using Proto.io made this task go easy. It was a good experience.

Here is the video of the interactive prototype that I built.

Interactive Prototype of Kanbancart

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store