A wireframe is similar in purpose to an architectural blueprint. Wireframes are deliberately stripped of any creative treatment like typography, colours and / or imagery to bring focus to usability and user journey. 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. Typically wireframes use simple grayscale graphic elements like lines, boxes, and other geometric shapes to communicate information architecture, content and layout considerations.

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. 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. 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. Nowadays there are lots of great tools in the market that can help with the creation of a high or low fidelity prototype. One emerging UI/UX workflow is to design in the browser as soon as possible, thus eliminating the mockup stage altogether.Īs 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. 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.

Each stage also allows you iterate your design with a select segment of your audience in preparation for a final public release. The goal of each step is to allow you to fix any usability issues while the cost of fixing them is still small. The general tendency is to implement three preliminary stages of wireframe, mockup, prototype in the interaction design process. Which one to use when?Ī 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.

Wireframe prototype mockup