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
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
- A Wireframe can be easy and fast to be created. Therefore, you can quickly design it then provide it to clients for approving. Moreover, as the static features, you can design it on paper, which is low cost and low time-consuming way to create your wireframe. After it has been created and approved, you can design it on the software then check the final visual presentation on the screen.
- A wireframe is easy to maintenance. As it could be drawn on papers, you can modify it time to time in order to meet the need of customers. You also could add or delete functions of your app at the wireframe stage and before the final version on the screen with no extra cost and little energy.
- It is easy understanding for stakeholders to visualize. You can deliver your framework to the stakeholders to check. They can see the core values of the app intuitively then give feedbacks to you. Then you can improve it based on the feedbacks then create a successful wireframe for designers and developers to implement without plenty of time used as all this step are finished on paper.
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.
Prototype
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
- Users can test the whole content of your apps through the prototype. Before developers start to code the app, it is essential that the design task eliminates all negative feedbacks of the functions and layout. Prototype’s responsibility is designed for that purpose. It is created as the real apps for testers to gather information to evaluate the app.
- The prototype gives the real experience of the final product. Through wireframes, users may just know how the app looks like, but clicking on the prototype users can experience what the result of each page or modules.
- The prototype also enables team collaboration. When a prototype designed, it can be shared with team members and then others can use and modify it, which makes the prototype better and being coding as the real app finally.
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.
Wrapping Up
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.