Sketch, Wireframe, Prototype, Mockup
parhumm
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
@parhumm
parhum.kh@gmail.com
parhum.net
be.net/parhum
Made with Slides.com