Sketch, Wireframe, Prototype, Mockup
by
When you , you are trying to get a basic concept of how the app will work in user interface form.
Sketch
Sketch Mission
-
Brainstorm Ideas with Clients
-
Think and Work Faster
-
Makes Wireframes more Detailed
-
Look Bad and Still Work Wonderfully
Sketching Always Comes Before
Wireframing
Wireframe
“a wireframe is a visual illustration of a web page… to show you where each item should be placed on a page.”
Usability.gov
Wireframe Mission
-
Visualize the basic elements of a web page
-
They are developed and refined quickly
-
They are not interactive
Prototype
Once a wireframe starts becoming interactive, it becomes a prototype.
Prototype Mission
A prototype should be similar to the final product.
Prototypes are interactive
They model the user experience
They enable extensive user testing
Mockup
It is static like the wireframe, but more visual, conveying the brand without the interactivity of a prototype.
Mockup Mission
-
Visualisation the content and demonstrates the basic functionalities in a static way
-
Encourages people to actually review the visual side of the project
Sketch, Wireframe, Prototype & Mockup Differentiation
These visualisation tools have clearly been shown to be distinct, giving life to particular aspects of web and software development.
Thanks!
Created in by Pahrum Khoshbakht
parhum.kh@gmail.com
Sketch, Wirefram, Prototyp, Mockup – What’s the Difference?
By Parhum Khoshbakht
