Wireframing and Prototyping:
What Are The Differences?

What is Wireframing About?

When we talk about a wireframe we refer to a static, and mostly, low-fidelity representation of a product. It also works as a basic guideline of an app or site, allowing developers and designers to follow a base structure.

Developers would use a wireframe to understand the core function of an app or site, while a designer would probably use it to demonstrate the navigation flow between screens.

I suppose we could resume a wireframe as a mockup that:

• Represents the information that will be shown on the website or app
• Show the structure and layout of an app or site
• Convey the overall direction and description of the user’s interface

The simpler the wireframe, the better. Which, of course, could also be a problem because of its static nature.

I choose wireframing when the project is merely starting, so I can explain to my clients and other designers how I believe the structure should be.

The result is usually a bunch of lines and boxes that aim to represent the hierarchy of each site’s or app’s content.

---

What Is Prototyping About?

On the other hand, prototyping refers to a  mid-to-high-fidelity design model of the UI. It contains a more detailed look of the visual features of the site or app and usually includes the first user interaction.

Since they are usually the next step in the product design process after wireframing, prototypes are more entertaining because they contain color, animations, real texts, pictures, and other features that bring your site to life.

And as you may be thinking, this is perfect to test interactions and the general interface’s usability. Since they are close enough to the final design, they provide great insights if studied and tested properly.

I say it’s a mid-to-high-fidelity design because, depending on how much time you have, you will be able to deliver a high-quality prototype or a very simple one.

The way I see it, they are both useful because independently of the level of interaction you can design at this point, a mid or high fidelity prototype will provide the bases for the first user’s test.

---

Wireframing and Prototyping: Which One Should You Use?

Some designers choose to skip wireframing and jump directly to prototyping, I don’t.

Basically because while wireframing a design is when many ideas burst into your mind, and you get the chance to spot mistakes that can be avoided during prototyping.

My opinion is that the time you think you are saving by ignoring wireframing processes will be completely wasted during prototyping because you would basically walk that alley in the dark.

Wireframes are your project’s skeleton, and prototypes slowly become the muscles, the skin, and the face of it.

Wireframing and Prototyping Best Practices and Tools

Now I will tell you the best practices I have followed during my career as a UX/UI designer when it’s time to wireframe and prototype.

Wireframing best practices

• Always brainstorm first. If you have a team of designers and developers, or only a client, please consider brainstorming ideas before wireframing anything
• If it’s available, use real content. The main reason designers and developers prototype before wireframing is that they have real content and want to do everything at once. In both processes should be present the real info if possible, but don’t try to skip steps since it will become troublesome later
• Set realistic goals and expectations
• Be selective and try to keep it simple, to get into details you will have the prototyping process

Prototyping best practices

• Do not underestimate the power of drawing on paper. This is how I start, making drawings of boxes on paper
• Roleplaying is, the way I see it, a fundamental step to prototyping. Put yourself in the place of the site’s or app’s audience, and design with those insights in mind
• Fake it ‘till you make it. I mean it, create fake functions to test interactivity, it allows you to be more creative and possibly discover new approaches or features the audience could enjoy
• I do not like to ditch details, but I do prioritize features. Maybe I don’t have much information about the text that will welcome the user, but I make sure I know the core intention of the site and prioritize features according to it

Now here I leave you some wireframing and prototyping tools I have used in my career.

Wireframing Tools

• Miro: available for macOS and Windows, Miro is very affordable and allows you to create a hub for remote teamwork. It has an infinite whiteboard that is incredibly useful for sketches, it also has prebuilt templates, widgets, and a very complete toolkit for wireframing.
• UXPin: this is a little more expensive, but also a very useful wireframing tool. Put together wireframes by dragging and dropping them, and use updated libraries for Bootstrap, Android, and more to build high-fidelity mockups that later can become fully interactive.

Prototyping Tools

• InVision: we all know this one, and it’s definitely one of my favorites. Upload the design files you created previously and add animations, transitions, gestures, and pretty much any interactive feature.
• Figma: I mentioned this tool in one of my previous posts, and I have to mention it here as well because it’s a great tool for collaboration and accessibility. It has flexible styles and provides an easy control feature over the appearance of texts, grids, and many other elements.

---

Final Thoughts

When starting out with a design project, besides basic inputs like budget and time, it is very important to use wireframing and prototyping according to the needs and guidelines of the project.

Here I explained to you the main differences between wireframing and prototyping, and despite many of my colleagues believe that we could start prototyping without wireframing, I think the opposite.

Brainstorming in a wireframe stage allows me to understand more easily what the client wants and how it matches the audience’s expectations or demands.

Don’t underestimate the power of low-fidelity wireframes, it’s the rock where your project will begin, and it’s better to see possible mistakes in the early stages than in the end, don’t you think?

As for the tools, there are many wireframing and prototyping tools for you to choose from, these are just the ones that I use regularly and give me great results. Then again, the best first tool for this kind of job is a pencil and white sheets, trust me on this one.