Mockups vs. Wireframes vs. Prototype. Which one to use when?

 In Interactive Design
A

working prototype is an essential step in the launch of any successful product or website but it is not the only stage in a proper UI / UX design workflow. The general tendency is to implement three preliminary stages of wireframe, mockup, prototype in the interaction design process. The goal of each step is to allow you to fix any usability issues while the cost of fixing them is still small. Each stage also allows you iterate your design with a select segment of your audience in preparation for a final public release. There are various methods and levels of fidelity in the design of prototypes and to some extent, there seems to be confusion about what exactly a prototype is. One emerging UI/UX workflow is to design in the browser as soon as possible, thus eliminating the mockup stage altogether.

As important as wireframes and mockups are in getting you closer to a finished product, it is a prototype brings you the closest to a finished product and lets you test out an interactive design before it goes public.

Nowadays there are lots of great tools in the market that can help with the creation of a high or low fidelity prototype. In this article I want to talk about a few of the leading tools in the market, what each one is good at, and my recommendations on each. Before we get too deep into tools I think it’s a good idea to clarify the definitions of some commonly used terms, since I often see them confused with each other. Here’s my attempt of outlining the differences between the three stages but for a deeper read, please check Marcin Treder, CEO of UXPIN series of articles on the differences between the three stages of wireframes, mockups, and prototype.

Wireframes, low-fidelity design

Typically wireframes use simple grayscale graphic elements like lines, boxes, and other geometric shapes to communicate information architecture, content and layout considerations.

The purpose of wireframes is to answer three basic questions of how the content is grouped, how information is structured and a basic visualisation of the user interface.

Wireframes are deliberately stripped of any creative treatment like typography, colours and / or imagery to bring focus to usability and user journey. A wireframe is similar in purpose to an architectural blueprint.  You can see how each room relates to each other or how a given space is allocated, but you don’t see the finished product. You don’t really get a realistic feel of what being in that space is like.

Wireframes are great in the initial phases of the project. You can quickly test your overall creative strategy and you can quickly test usability hypothesis without getting bogged down in the details of creative design. A well thought-out wireframe can give the client an overview of how the navigation and user journey could work. Developers get a visual overview of what sort of functionality is desired and designers and copywriters get a sense of how much content and space they have to deal with. Wireframes are a great starting point for any interactive design process. At this level, it is also  much more efficient to make big changes. You can move content around or group items together, add or remove elements as you start to get feedback with relative ease compared to the later phases of design.  

The purpose of wireframes is to answer three basic questions of how the content is grouped, how information is structured and a basic visualisation of the user interface

Mockups: mid-fidelity design

Mock-ups are the next level up from wireframes. They really act as a bridge between wireframes and prototypes. This is where designers can use creative license and apply art direction and creativity to the visually bland wires. Gray boxes and lines give way to graphic elements, typographic designs, colours and refined layouts. Mock-ups use wireframes and bring them more in line with a brand’s identity.

A mockup is much more than just a coloured version of the wireframes. It is the reinterpretation of the wires in the visual language of the brand.

Mock-ups get very close to the final version as far as the aesthetics and the look of a digital product but they lack in functionality. The strength of a mockup is that in their visual richness mockups can create excitement with clients and investors but as much as mock-ups address the graphic design and creative questions with regards to a website or app, they cannot, however, be  a reference for how the website or app will interact with a user.

Mockups cannot be used as a reference for how the website or app will interact with a user or how a design will behave in a browser or smart device.

Designers go to painstaking measures creating numerous artboards for various breakpoints, hover states, and screens and even when doing so, there is always a lot of back and forth and many times the end result is a deviation from the design. The mock-up process is also extremely time-consuming for designing interactions or behavior patterns due to the nature of it being a static medium.

A mockup is much more than just a coloured version of the wireframes. It is the reinterpretation of the wires in the visual language of the brand.

Prototypes, low or high fidelity

So if a prototype can be both low or high fidelity then where exactly does it fit in the design process then? The quick answer is anywhere during the process when you want to obtain proof of concept.  Typically though a prototype is usually at the final stages of design and acts as bridge to the actual product. A popular process is to quickly start with a low-fi prototype as practiced by Apple with design of many early prototypes, and then progressively iterating into more and more hi-fi versions. This is really the foundation methodology for any user-centric and customer-driven design as also recommended by notable entrepreneur Andrew Chen. On the flip side the methodology of using a hi-fi prototype is very common and well documented by SVPG partner Marty Cagan. Regardless of where in the process of whether it is low or high fidelity, a prototype includes functionality and in addition to having a more polished UI. A final prototype may not have every interaction and animation in place but it will have the key interactions that will give a clear understanding of how the end product will function. So in other words, a good working prototype will be interactive and will resemble the final product as close as possible.

A digital product  is an interactive dynamic entity and it is extremely difficult to describe a moving interactive thing using static images. The best way to show interactive concepts to clients is to show them a working version of those concepts. This is the gap that a prototype will fill.  

Interactive prototypes are also way better for user testing as they resemble the end design closely. So any feedback you get from user testing will be close to any feedback you would get for your final product. Obviously having that kind of user feedback for your product before you invest money into code is invaluable.

For ideas and strategies on conducting successful user testing, I highly recommend Stephen Krug’s “Rocket Surgery Made Easy: The Do-It-Yourself Guide to Finding and Fixing Usability Problems“. Basically, a good user testing does not need to be complicated but you do need to know your target audience well and understand their expectations and needs and test your prototype with those needs and expectations in mind. In other words set tasks and goals against those needs and expectations.

A digital product  is an interactive dynamic entity and it is extremely difficult to describe a moving interactive thing using static images. The best way to show interactive concepts to clients is to show them a working version of those concepts. This is the gap that a prototype will fill.  

Prototyping tools

The good news is that in 2016 there are lots of great tools that you can create High Fidelity interactive prototypes with without any coding knowledge or a steep learning curve. Here’s a list of a few that I’ve worked with that I think are pretty great.

Axure

This is the tool that I started out with and was my primary prototyping tool until last year. What I like about Axure is the variety of pattern libraries available both on Axure’s website and various other sites. Pattern libraries are a great way to quickly prototype an idea without needing to build complex behaviours from scratch. Axure works mostly as an application on your computer, so you can work with it offline if you need to. They have a fantastic support team and a very active forum.

Invision

I love Invision and was probably one the very early adopters of this platform but I don’t really consider Invision to be a prototyping tool.  At the moment it is not possible to create complex interaction designs with Invision. Invsion is great for quickly testing a design in a browser or smartphone, but you still need an application like Photoshop or Sketch to create mockups and then import them into Invision. I consider Invision to be mostly a presentation and collaboration tool. I use Invision to present my mock-ups to client or colleagues and to create some basic interactions with those mock ups. Invision is cloud based so you need an internet connection to work with it or to make presentations with. It’s really easy to use and by far much better than sharing JPEGS or PDFs with clients.

UXPIN

Right now this is my absolute favourite UX tool. It’s cloud based so you’re creating in the browser from the get go. You don’t really need to import or export anything to create your prototype even though they do have a pretty robust plugin for importing Photoshop CC layered files and also Sketch files. Most of the modern pattern libraries are available right from within the app so that you easily assemble various complex behavioural patterns and customize those patterns as you like. Adding animation and interactivity is also relatively easy to do. If you like to start with mock-ups their Photoshop and Sketch plugin does a really good job of importing your designs for a high-fidelity finish.  

Webflow

I just started using this tool very recently and thus far I am quite impressed by it. This is a unique tool and could actually alter my workflow as it could potentially eliminate the need to create mockups altogether.  Webflow is really an all-in-one web design platform that pumps out pretty decent and clean CSS and Javascript. The way the tool is designed it really guides you in designing clean front-end code with simple drag and drop behaviour. This tool really could be the future of front-end development and for designers who are not that good with code is a very handy in turning your designs into viable and usable code and hi-fi prototypes.

So there you have it. Let me know what process works for you or what tools you prefer to use?

Recommended Posts

Leave a Comment

Looking forward to connecting with you :)

I'd love to discuss your project needs. Shoot me an email and let's talk!

Not readable? Change text. captcha txt