Wireframes vs Prototypes


In this support module learn about the difference between Wireframes and Prototypes and the benefits of both in the product development process.

Video Presentation: Wireframes vs Prototypes

Wireframes vs Prototypes

Hi, I'm Mike Smith, founder and former founder of 360 hired and recurred, and also Limitless Combat Sports. So today we're going to be talking about prototypes and wire frames and some of the differences between the two, because they are quite fundamentally different.

What is a Wireframe?

A wire frame is really the structure and layout of your page. Whereas a prototype is that end design. So it really has a lot of the elements we want to use in our final design. It's a lot more interactive and a lot more usable. The wire frame tends to just look at the solo sort of functions of each page, or how your idea would work.

When we're looking at wire frames, we've got three simple objectives of it.

  1. Main groups of information
  2. Layout or Structure of that information
  3. Core visualization.

So what we're looking at in a descriptive term of the interface. We're not having design elements, such as imagery, text types and font types and that sort of thing. We're more looking at structure and layout, to determine whether or not that's going to work for our end result.

Some of the benefits of wireframing is it's really quick and it's basically free to do other than your time. You can use things like UX pin, or Adobe XD is probably one of the best ones around at the moment, which allows you to almost take your wire frames and prototypes and mold them really close together. So that differentiation is really starting to get so close together that there's not a lot of difference there.

It allows you to then go and talk to people about your idea. So you can really talk about here's my wire frame. Here's how I see this working. You can clearly and concisely speak to somebody about that and then get feedback based on that before spending time on images, photos, videos, and that sort of more in depth sort of end result type design.

It's a really key piece to get your wire framing, correct early, and then moving your wire frame to a prototype.

What is a Prototype?

Your prototype is really that end visual interface, that your customers or clients would see.

So we really want to take a lot of the aesthetics and layout from our wire frame, and then convert that. So we're basically going to end with a product that's very, very usable, almost looks like a finished product, but it's prior to getting testing, and getting it into the hands of a lot of users.

So technically it doesn't have the nuts and bolts, but it looks like a final product. So that's where the Adobe XD’s of the world come in, where I can produce something that looks fundamentally like it works. It may have some really minor functionality, but it's really just a pretty layout of a wire frame.

So that's why sort of how we would do it.

Why spend time building wire frames and prototypes?

Why are we building prototypes? Why are we spending time on wire frames? It’s really a low cost. It's quick to get our ideas out into the world, and get some real world feedback. So you can use wire frames or prototypes, across your social media. You can use it in marketing material. You can start to build things out that you maybe haven't thought of yet. It also gives room for design changes and improvements, prior to having a full-scale production environment that you have to deal with, so you can quickly move blocks and chunks in and out.

You will notice a lot of those design tools for your prototype will allow you to move imagery in and out really quickly. There's no coding or next to no coding. Adobe XD certainly has no coding really needed, there's color pickers and shape wheels and all that kind of stuff that you can build from, and you can import video and button types and styles and all those kinds of things.

It makes it really quick and easy. No coding for your prototype and some of the best wire framing tools that I’ve found:

  • In vision
  • Adobe XD
  • Proto.io

Most of them are free. So certainly Adobe provides a really great tool for free, which then can allow you to use and bring in elements from the rest of their suite of products as well.

So while it sounds like I'm really plugging it it's because I really liked that product. It's allowed me to build maybe 15 to 20 websites for people now, across different businesses, including my own, from an initial concept meeting and almost while I’m sitting and talking to a client in previous lives and businesses. I could sit and talk to you and start to build that out so that by the end of that meeting I've got a really good, clear understanding. And we can go back and circle around and have a look at whether or not what I'm hearing from you would match, would match the design that you had in mind in this case.

So that's a really, really quick run around of why and how we would build wire frames and prototypes. So remember, start with your wire frame, get the nuts and bolts of your layout in, and then move into a prototype, which looks much more closely at design elements, colors, imagery, video, text types, fonts, so that you can produce something quickly and easily that really resembles your finished product.

Listen to the Podcast

Weekly Business Updates

Direct to your Inbox