Sketch/ Wireframe/ Mock ups/ Prototypes are used to bring the client vision or scope into reality. All these 4 steps are used to bring in more clarity in the scope, look and feel, usability, functionality, animations and much more before the development is started. This will provide a clear vision for all the stake holders in the project and also the client will be aware of the end goal and how his product will look like. Let’s check in detail on all these 4 points and it’s differences.

Sketch

  • It’s a freehand drawing in a paper which gives us the low fidelity representation of the application.
  • This is the fastest way to convert the client vision/ project scope into something which will be used for further brainstorming sessions.
  • Whenever we draw in paper, we will get more ideas, more innovations and also it will help us to visualise better.
  • This will be very helpful before we step on to the Wireframe stage.

Tool which I used: Pencil and lot of papers.

Wireframe

  • It is an upgraded version of sketch where we can show a skeleton of the application and it is a medium fidelity representation of an application.
  • It contains all the functionality in each and every screen of an application. Also, it contains where the contents will come and what kind of features we are going to use.
  • Wireframe should be created quickly and mostly it will be in black/ white colors.
  • A well-created wireframe communicates design in a crystal clear way and sets a path for the whole team.

Tool which I used: UXPIN
You can try: Balsamiq, Justinmind

Mock Ups

  • Mock ups are an upgraded version of wireframe where we will be adding colors, fonts, text, images, logos and any real time data which will look perfect.
  • This will look like a static screens of the application.

Prototype

  • Prototype is an high fidelity representation of an application where we will be adding UX, animations, interactions in the Mock Ups and make it as a rich experienced application.
  • This will provide a real feeling of using an application without any functionality been build.
  • Prototype we mainly build to get the user feedback.
  • Based on the user feedback, prototypes will be edited and the requirements (Both functional and non functional) will be freeze before the development is kick started.

Tool which I used: UXPIN
You can try: Justinmind