Wireframes vs Prototypes. What is the best design deliverable?
Design process while working in fast paced projects
I have been working in design field for about half a decade now and constantly indulge into design discussions over social media platforms and professional or freelance networks. I realized, that most people(including designers) use the terms design, wireframe, prototype and mockup quite interchangeably. And rightly as we are thinking, it creates confusion among stakeholders representing different teams while expecting deliverable from design team.
Are they different phases of design process? Are all of them really the same? If not, what are the key differences? This article is my attempt to objectively answer what are wireframes and prototypes and when to use what.
Wireframes
A wireframe can be simply thought of as a state captured during the process of interaction between an interface and the user. It gives us a snapshot of a screen before or after an interaction.
To be objective, wireframe communicates 3 main points:
- Structure and layout of the page
- All blocks of content to be presented on the page
- Story and description of the represented interface
Advantages and Usage
Wireframes are very cheap in terms of time and cost and hence can be used to quickly communicate ideas internally. Since they are static snapshot of an interface at a given instant, they can be combined with some description and used as documentation for the product being designed.
Wireframes are low to medium in fidelity; so focus of the team is more on the concept and content blocks instead of aesthetics(color, font etc.) of UI elements on the page. It is because of this reason that wireframing forms core part of the design process. A well-drafted wireframe helps to communicate design in an extremely efficient way and sets a strong foundation for the entire team.
Tools
Pen and paper is the best tool to wireframe when you have to bring out ideas and iterate rapidly. There are numerous digital tools in market now for wireframing, like UXPin, Balsamiq, Sketch, Adobe XD and many more. I personally work using Axure and would recommend every designer to check the trial version out. It provides ready-made widgets and lot of features to create wireframes quickly.
Prototypes
As the word suggests, prototype is a working model of the application and comes into the design process next to wireframing phase. They typically have colors, interactions and content (actual content preferably) similar to the final envisioned product.
Objective of the prototypes is
- To enable user experience the application content as in the final product
- To test the interface and its interactions similar to the final product
Advantages and Usage
Prototypes are the most engaging form of design deliverable. Since they are medium to high fidelity and also contain interactivity between screen instances, they are a bit expensive in terms of time and money as compared to wireframes. They enable designers to gather feedback on minute details of the product (look and feel, content, interaction mechanisms etc.)
Consciously crafted and combined with usability testing, prototyping exercise can provide multi-fold ROI..
However, prototypes simulate the interactions of various components of the interface as per the final product and so prove extremely handy and strong tool for performing Usability Testing before the development actually begins. This saves lot of cost incurred by multiple iterations of development done to refine usability.
Consciously crafted and combined with usability testing, prototyping exercise can provide multi-fold ROI(return of investment) strengthening user adoption of the product to a great extent.
Tools
Sketch and AdobeXD are one of the best tools that I have come across to do prototyping for user interface. They help you to move from one state of a screen to another state of a screen via brilliantly crafted user friendly interface.
But for me, Axure is once again a winner. It gives a very strong control over not only on page level navigation but also with macro interactions and micro interactions. If used at full potential, Axure enables the design teams to exactly simulate the final product which provides an edge over all other tools.
Fun Fact : Due to more time and effort invested, a designer is more attached to his prototypes than the wireframes!
What now? Wireframes? Prototypes? Or both?
As we see, wireframes and prototypes have their own unique and distinct set of usages. One process cannot be considered as a replacement of another.
It is worth to note that both wireframes and prototypes should contain representation of every important piece of information presented in the final product.
If we consider building(real estate) as a product, blue prints and architectural plans can be considered as wireframes. Model flats that give us an experience of how would the building would actually look and feel can be considered as a prototype.
Having said that, even though each one of them is different, it is worth to note that both wireframes and prototypes should contain representation of every important piece of the information that will be presented in the final product.
Summing Up
Wireframes are used for concept creation and setting up design direction for the whole team. Hence, they form an indispensable part at initial design stage of any complex project.
Prototypes, being expensive should be carefully planned. If there is a need for product validation or usability testing, prototyping can pay off.
Tip : It is better practice to create wireframes and prototypes in a single tool. Helps save time. Keep iterating prototypes for better experience.
Hope you enjoyed this article and got something out of this reading. If you liked the story, claps to appreciate! Do check out my other stories on design.
Feel free to provide feedback and ask any questions. I would love to respond.
