The terms Wireframes, Prototypes and Mockups are used interchangeably; however they are not the same. The beginning of any software project will get you introduced to terms like, wireframes, prototypes and mockups, which have substantially important differences.
Let us see the differences between the three:
A wireframe is actually a least detailed representation of the three. It basically is the foundation stone of the design. It puts together the most important pieces of the future software. The important thing is that it shows what content will be put on each screen, how would be structured, and how will the user navigate the application. The design representation of the wireframes is clear and convenient; it should not be underestimated due to its simplicity. A wireframe is like a visual guide that represents the skeletal framework of a website. It usually lacks typographic style, color, or graphics, since its main focus lies in functionality, behavior and priority of content. Wireframe can be a sketch or a pencil drawing or can be produced by means of broad array of free or commercial software applications.
With static representation of its functionality, it allows users to fully see and assess the design; a mockup is very close to the real visualization of an application. Mockups are highly useful as a part of documentation, being a good source of feedback. Mockups generally represent the way a real app looks and feels like, with all the colors, graphics and typography that the reason they are easy to perceive and evaluate. The common usage of mockups is for UI design using rich photo editing software like Photoshop and GIMP.
Software UI mockups range from simple hand drawn screen layouts, through realistic bitmaps to semi functional user interfaces developed in software developed tool.
Prototype is like dynamic version of wireframe; it digs deep into the interaction between the software and the user. Although, it takes longer time to create dynamic, clickable prototype than a static wireframe for obvious reasons. A prototype not only shows the content but also the general usability of an application. Prototypes are great at revealing and eliminating design flaws, planning further development and estimations. It can be easily perceived by everyone, like, developers, software owners, possible investors, etc., who may have no technical knowledge/background. Hence, it’s a great way of presenting the idea of the software in a detailed way.
These 3 tools for visualization have been shown to be distinct, giving life to particular aspects of web and software development.