What is the difference between wireframes, mockups and prototypes? The short answer is, nothing. That’s not strictly true, but it is short, and some days they do all blend into each other in a anarchic mishmash of terms and usage. So let's attempt to unravel the confusion a little.

The long answer is that they are distinctly different things that all have their own purpose, tools and position in the app life-cycle.

Wireframes — Sketching & cementing ideas

Wireframes are quick sketches of an app that help the team design what the app does and how it does it. Sometimes you might hear wireframes called schematics, which may be a more descriptive term as wireframes can be like a set of plans.

For example a website wireframe would show the site navigation, the main layout, what each page contains and the placing of all the important elements of the website.

Wireframes are quick to build and easy to throw away, they give UX designers a chance to get things wrong on their way to the best solution, without wasting too much time on those discarded ideas.

The low fidelity high speed nature of wireframes makes them perfect for documenting the information architecture and design of an app and communicating those ideas with clients or stakeholders. They can be turned around and iterated on quickly.

Wireframes can be created in many ways, from simple hand-drawn concepts on paper to detailed digital designs using a variety of apps and services. Here at earthware we're fond of pen and paper, Sketch, Axure and Adobe XD.

Mockups — Defining the right look & feel

Mockups are hi-fidelity images that define the look and feel of an app. They are static and visual, and convey the final aesthetic design of the app.

Mockups consider how the aesthetics are a good fit for the user, colour palettes, font choices, and icon sets are all decisions that mockups help make. They are also perfect for capturing buy-in from stakeholders and can have a wow factor that gets people on board.

We use a variety of tools at earthware for mockups: Sketch, Photoshop, Illustrator and Adobe XD mainly. As you can see many tools can be used for different purposes, only further muddying the waters of UX terms.

Prototypes — Fake it till you make it

Functionality is where prototypes rule. They are low to medium fidelity, but unlike mockups and wireframes they are not static.

Prototypes have moving parts and they concentrate on functionality rather than looks, they simulate the interactions between the user and the interface.

Much of the time the interface, interactions, and underlying data, are faked just enough to allow the user to experience the application and give feedback.

Prototypes are great for user testing and allow quick iterations of ideas with clients, allowing you to nail all the core interactions and content before handing everything off to your developer team and their first sprint.

TLDR;