A wireframe is a simple representation of a digital product or website, its skeleton presenting elemental locations and interactions. It usually represents the minimum viable product. Low-fidelity wireframes are simple, minimal, and static; high-fidelity wireframes are more complex versions. After the wireframing phase, designers move on to prototyping. A prototype is a simulation of the final product, not a pixel-perfect version; they are used for testing with users to check the interface and functionality. It is not about prototype vs. wireframe. It is about prototype and wireframe.

What is a wireframe?

A wireframe is the skeleton of your product. It is often grayscale, and many designers even start the whole process only with pen and paper. This two-dimensional design is used to set a possible user journey, analyze different page structures and the general layout. In this part of the design process, versions come and go, as you want a broad spectrum of options before committing to a single idea. Many low-fidelity versions are created and discarded before the desired wireframe is chosen.

 

Wireframes allow you to visualize your product barebones and are essential in user experience (UX) design. With enough brainstorming and iterations, you can get closer and closer to the best alternative for your client. This step is easy to explain and does not require you to have a powerful machine or high drawing skills. You probably have an idea or two in your head, that web project that never gets enough time to start. Well, setting up a wireframe is jumping right into the creative process and winning against that initial friction.

 

From this first step, you will go back and forth with your team: discussing your ideas with developers, designers and even asking the unassuming copywriter like myself their opinion—just make us feel included, you can silently discard our opinion afterward. When you have made enough decisions and are ready to advance, you know the wireframing phase is over. Your wireframe is done. It is time to build a prototype.

What is a prototype?

A prototype is a sample version of the final product. Both designers and developers use it to test ideas before development. The objective of making a prototype is to put your different versions under scrutiny without spending too much time on a polished solution. It lets you check the level of effectiveness and what your product can do.

 

Prototypes are usually confused with wireframes or mockups because they share being part of the ideation and development process. But there is a difference in the level of fidelity and reactiveness to them. Prototypes are much closer to reality than wireframes. It is not about prototype vs. wireframe. It is not one or the other, but actually prototyping based on an existing wireframe.

 

Producing a prototype lets you validate your ideas by testing them on users before moving to the development stage. With them, you can test positive and negative reactions before greenlighting your project. This process usually implies the involvement of UX and UI designers, where the latter build upon the wireframes and mockups of the first.

 

Prototypes are not only meant for users. They are also presented to investors and stakeholders. This requires more polishing and higher fidelity to what will be the final product. The people in charge will want to see what the product will ultimately look like.

UX: Law of proximity

While setting up a wireframe, designers consider some laws of UX. One of them is the Law of Proximity which states that objects that are close to each other tend to be grouped together. In this way, you can establish a relationship within nearby objects only with their positioning, which helps users understand the information more efficiently. This step must be straightforward since a confusing wireframing can harm the prototype built on top.

 

When moving through the design process, remember to articulate the user experience with the interface correctly. The transfer of information from wireframe to prototype is key. A product is as good as its core. Even after embellishment, if you haven't applied the Law of Proximity, it will be hard to regain a clear layout.

Mobile-first approach

You may think that wireframes and prototypes have a single version. But nowadays, designers have to consider a range of devices while designing. That is why the mobile-first approach in design was born. Eric Schmidt, Google’s former CEO, stated in 2010 that designers should follow the mobile-first approach rule in product design. Why is that? Since 2016 mobile internet usage surpassed desktop usage. Designers cannot look away from the fact that mobile is the new norm.

 

Each year more and more people get internet access, and more people enter the market through mobile devices. Smartphone sales have long eclipsed PC sales, and this trend will not reverse any time soon. Wireframing and prototyping for mobile is no longer an option. It is a must-have step for any digital product out there on the internet. 

 

At Awkbit, we strive to work with the latest technology, but sometimes we have to take a moment and define the terms we are working with. Only with a clear understanding of concepts and procedures, we achieve our goals. Do you still have doubts about what is what in design? We can help you, get in touch!