Wireframing, Prototyping, Mockuping – The Difference

Assuming wireframe, prototype and mockup as the exact same thing is not new. Everyone who never try to understand the difference always call them by random terms. Even if a wireframe, prototype, and mockup look somewhat related to each other, they are entirely different by their intention.

Wireframe

Wireframing is the first ever step in a design process. You shall compare it to the backbone of your body. They are not simply plain drawings of lines, but they will be visually expressing all the layouts and their views in the simplest way.

When you have a plan to design a mobile app or a web application, the first thing you need to create is an overall sketch, which should tell something about how the app should look, and how each page or layout is going to be. It’s like a basic chart of application flow. Such a drawing is called wireframe. You can draw a wireframe by hand.

When you need to provide more clear passage to it, you shall draw it in a PC digitally using wireframing tools or using applications like paint. To make the process much simpler, there are a lot of online wireframing tools available on the web. The one I usually use to make quick wireframes is moqups.

Mockups

Mockups are the more improved version of Wireframes. They look like a completed app design with visually perfect colors, fonts, themes, and everything a final app requires. It showcases the final product appearance. Simply it is the User Interface (UI) of an App.

The intention of creating a mockup is to take a look over on the final design before the app is put to development. Therefore it is important that a designer should prepare mockups. This also helps the designers to let their clients know the final design of the app. The only difference of Mockup from a Wireframe is that Mockup delivers a rich look to the design. All other features are exactly the same as a wireframe.

Mockups should be designed from the scratch on the basis of the wireframe. Mockups can also be download for free from websites like freebiesbug for a faster look up. Mockups are generally PSD files, and they can be edited easily if you have the required editing tools like Adobe installed on your Pc. A mockup may be also an .AE file or may be a .FLA file, something that is layered and is editable. Here’s a mockup sample of Google Allo App which I found from freebiesbug,

Prototype

When both Wireframes and Mockups are static, Prototypes are clickable. When User Interface (UI) shifts to User Experience (UX), it is called Prototyping.

A prototype is interactive and it simulates the app layout UI workflow. It helps understand the working, and you can experience the operational flow of the application. It serves as a working model to the clients, and promotes changes if any is required before the app is put into development. So the application designing process begins with wireframing, and then mockups and finally prototypes, depending on the complexities of the app.

Prototypes can be a Hi-fi prototype or a Lo-fi prototype, based on the requirement of design stages. When mockups are turned into a prototype of multiple clickable pages, it is a high-fidelity prototype. When wireframes are turned into a prototype of multiple clickable pages, it is a low-fidelity prototype.

The one online Prototyping tool I usually use to make quick prototypes is marvelapp. There are many other popular prototyping tools like proto.io which was used by many trusted companies like Disney, BBC, Samsung, PayPal, etc,. In their website, You can test how a prototype really looks like. Here’s a live prototype sample of Instagram,

https://share.proto.io/UKOBWU/