When talking about the wireframe and prototype, people are always confused. Why? You probably know why or else you wouldn’t have been reading this post. Simply take, they both have a similar meaning in a dictionary as the “original type”.
However, for a web designer, wireframe and prototype are quite different. They refer to different concepts. I will introduce the whole difference about them in the following parts.
But first, let’s ask a series of Y/N questions.
From the flow above, you can see the basic difference between wireframe and prototype.
But that probably isn’t enough. So let’s dive in deep.
Wireframe is a low fidelity illustration of a design. People use a wireframe to be a guideline for the web and mobile app design. It is the skeleton for designers and developers to follow. Actually, even the purpose of using the wireframe between designers and developers are also different. For developers, the wireframe could help them better understand the main function then they can implement those functions on the app while for designers, the wireframe could be the blueprint to help them design the navigation flow on the screens.
The wireframe should be very simple. It doesn’t include so many contents in detail but shows the visual design of your apps. It doesn’t have visual effective elements on the screen but only uses lines and squares in its design styles. Besides, it mainly focuses on the function and how to use on the screen. Therefore, it can be designed on different materials like paper, software or even blackboard. It is static, can’t interactive or clickable. It also doesn’t have animations. So you should always focus on how to demonstrate your core function and value when you design the wireframe.
The benefits of Wireframe
The Shortages of Wireframe
The main limitation of the wireframe is it doesn’thave a real content, that means you could just check the static layout on the screen. In this situation, some functions based on data transfer can not be checked on screen.
When to use the Wireframe
According to the features, wireframes are usually used as a document of guideline for designing and developing. In addition, as they as static, you may also need to write some notes on it to explain the functions of a specific layout.
Another way to use wireframe is applying it as a sketch for communication. It can be quickly created so that when having a group meeting to discuss a certain web page, the wireframe will be an effective way to work with on what the final web page would be represented.
A prototype has a mid-to-high fidelity visual presentation of design. It usually tends to be the final version of your app demonstrated on the screen. The difference between prototype and wireframe is the prototype focus on the interaction. The prototype has clickable web pages, which users can click them to check some functions like page jumping or data transferring on the front-end. Through web page, you could know what your app’s final functions are and appearances on the screen. It should be as close to the final products as possible. In a word, the prototype is the interactive app before it official online.
For the image above, if all the squares like search or menu could be clickable and give you some results, it could be a prototype otherwise it is a wireframe. If you have no idea on how to work with prototype, these 3 tips will definitely come handy.
The benefits of Prototype
The limitation of Prototype
Prototypes are usually more difficult to be modified because it requires more time and cost to create than wireframe. It may contain some contents like HTML and CSS. So it may not be done by everyone.But create a prototype is meaningful otherwise you will revise a lot of contents at the coding phase.
When to use Prototype
After the wireframe has been approved, the designers could create a prototype through software. The prototype could contain the interactive functions as many as possible. Then users can test the interface and then give feedbacks in order to start the development step.
In addition, web designers should pay attention to both function and layout of the prototype. As it may be the final user interface of your app, how to design it to be user-friendly should also be considered.
For the whole design and development procedure, both wireframes and prototypes are necessary. Wireframes offers the original presentation of your app on the screen then can be easily and fast to improve. Then prototypes are created based on the improved wireframe for testers to evaluate the app’s potential performance. Then prototypes can be evolved by improving the functions and layouts to have a better user-friendly interface. Finally the developer could program to make the prototype become the real app and publish it for users to experience.