Difference between Wireframe, Mockup and Prototype - example

What is the difference between wireframing and prototyping ? It looks quite similar. Is it the same ?

What is the difference between wireframe, prototype and mockup ?

Hi,

Wireframe, mockup and protoype are images or set of images, which displays the functional elements of a software, website or application. They are used for planning of software's structure and functionality.

Wireframe

• Simple and quick sketch used to prepare the high-level concept of new product or functionality
• Uses a basic elements (frames) and contain a general text
• Usually is black and white
• Created as the 1st graphics
• Low design fidelity
• Doesn't require much time
• Doesn't require a graphical skills
• The purpose of wireframe is to draw a basic layout (structure), define what elements will be used and where will be these elements positioned
• Can be used to gain consensus and general feedback

Mockup

• Graphical design showing how will a product look like

containing a real graphical elements and real text content [/li]
• Uses a graphical elements, sample images and contain a real text
• Colourful
• Created as the 2nd graphics
• Medium design fidelity
• Requires more time
• Requires at least some graphical skills
• The purpose of mockup is to show how will the layout look with real graphical elements
• Can be used to gain a feedback on used visual elements

Prototype

• Interactive graphical design showing how will a product look like
• User can make an interactions with elements (for example write a text into textbox, open the menu etc.)
• Uses a real personalized graphical elements, images and contain a real personalized text
• Colourful
• Created as the 3rd graphics
• High design fidelity
• Requires more time
• Requires advanced graphical skills
• The purpose of prototype is to get a real user experience based on interactive simulation
• Can be used to gain a feedback on final user experience

Example of wireframe, mockup and prototype: