Wireframe, Mock-up, Prototype - getting your ideas shared

Published Mar 21 2019 05:09 AM 2,848 Views
First published on MSDN on May 19, 2017

At present we are working with the Imagine Cup UK teams to ensure that have suitable prototypes and code ready to present at the World Wide Finals in July.

As part of this I wanted to share some of the most popular tools and resources the teams are using to develop wireframe, mock-ups and prototype. The key goal of these is to ensure there project resonate with the judges and really help showcase their ideas and intentions.

Wireframe, prototype and mock-up are a key aspect to software projects. Here a quick overview of the each of the items.


Basically it's the foundation of your design. The Wireframe includes the most important pieces of your software design. What's important is that it shows what content will be on each screen, how it will be structured, and how the user will navigate the application. Wireframe should be have the most important aspects showcased and designed to share, discuss and agree. Having a wireframe of your future product is good for visualizing objectives for developers. A wireframe helps avoid misunderstandings between the client and the developers.


A prototype dives deeper into the interaction between the user and the software, it's like a dynamic version of a wireframe. It takes much more time to create a dynamic, clickable prototype than a static wireframe. A prototype shows not only the content, but the general usability of an application. This simulation of interactions looks close to the final design, and can be user-tested to make sure that the software has high usability. In most cases prototypes are perfect for demos and presentations to engage potential stakeholders into the software project.


A mock-up is very close to the real visualization of an application, with static representation of its functionality, it allows users to fully see and assess the design. Mock-ups are a good source of feedback, mock-ups are highly useful as a part of documentation and testing of services and infrastructure. Mock-ups should show the way a real app looks and feels like they should contain all UX/UI elements including colours, graphics, typography.

All three are very different and depending on the project and the problems you need to solve, you may have to create  all of them.

So if your interested in developing Wireframes, Prototypes or Mock-ups the following resource is a great starting point for evaluating the existing tools and services which are available


1 Comment
Version history
Last update:
‎Mar 21 2019 05:09 AM
Updated by: