App Wireframe/Prototype

1.2 Application Wireframe(Week 1 Task 2)

After thinking about our app idea,then second task for this week was to create a wireframe for it. But me being the one who always asks questions for everything,i asked myself why do i even need to create a wireframe,why can’t i just directly jump to the coding part and do all the good stuff there? So i did what a person always does when he has any kind of question,i googled it. :P

I found some really good insights about why it is really important to make wireframes/prototype before actually writing any code,and i am going to share with you the same today,i’ll try to keep everything brief.

What is a Wireframe?

A wireframe is a layout of a web page that demonstrates what interface elements will exist on key pages. It is a critical part of the interaction design process.

From a professional Standpoint, aim of a wireframe is to provide a visual understanding of a page early in a project to get stakeholder and project team approval before the creative phase gets under way. Wireframes can also be used to create the global and secondary navigation to ensure the terminology and structure used for the site meets user expectations.

A wireframe representing structure of website

Advantages of wireframing:

  1. It can save you a lot of precious time when you’re coding because you don’t have to think how the content and other components will be layed out because you already have a visual representation of it a as reference.
  2. They can also be used as an early feedback mechanism from users,to ensure the like the overall design and concept.
  3. Wireframes are easy to iterate upon rather than a full fledged design(with code),they can be easily changed according to user’s feedback.

I hope you learned something about wireframing from this article.


StillShare Application wireframe

You can take a look at my application wireframe here:

Application Homepage(Image feed):

User’s hompage after logging in

This page will show the latest images from the people that the user is following. A user will be able to like or comment on images shown in his Image feed.

Application Search Page:

Search results, for finding a user

A user can find any other user by his name or username.

Application Profile page:

User’s Profile Page

This page will show the images posted by user,his followers and follwings,from this page user can upload new images and change his profile pic as well.


In the next blog, I’ll be discussing how to setup ubuntu alongside windows.So stay tuned!!