Download as PDF, PPTX
Uploaded byVojtech Outulny
Wireframe vs. Mock-up. Why and When?
The document discusses the differences between wireframes, mock-ups, sketches, and prototypes, providing definitions and purposes for each. Wireframes focus on functionality and layout, while mock-ups emphasize look and feel, building upon the wireframe design. The document also highlights the importance of low-fidelity and high-fidelity wireframes in the design process, noting that initial drafts can influence feedback and necessary iterations.
More Related Content
Similar to Wireframe vs. Mock-up. Why and When?
Wireframe vs. Mock-up. Why and When?
- 1. Wireframe vs. Mock-up Why and When? or Connect the Dots Vojtech Outulny
- 2. Agenda • What are the dots? • Connect the dots • Low-Fi vs. Hi-Fi Wireframes • Dots Practically Vojtech Outulny 2 28.5.2011
- 3. What are thedots? • What is Wireframe? • What is Mock-up? • What is Sketch? • What is Prototype? Vojtech Outulny 3 28.5.2011
- 4. Wireframe One forbeginning... Vojtech Outulny 4 28.5.2011
- 5. Wireframe... It isabout... • functionality and layout. • functional specs. • notes about the intended functionality • navigational systems • how interface elements work together • Lack of typographic style, color or graphics This leaves room for the design to be created based on the wireframe. Vojtech Outulny 5 28.5.2011
- 6. Mock-up One forbeginning... Vojtech Outulny 6 28.5.2011
- 7. Mock-up... It isabout... • look and feel • build on the wireframe with color, graphics and polish • may adjust layout slightly but stays within the general guide of the wireframe. Vojtech Outulny 7 28.5.2011
- 8. Sketch One forbeginning... Vojtech Outulny 8 28.5.2011
- 9. Sketch It isabout... • freehand drawing • not intended as a finished work • quick way to record an idea for later • try out different ideas • establish a composition Vojtech Outulny 9 28.5.2011
- 10. Prototype It isabout... • simulate the final design, aesthetics, materials and functionality of the intended design • may be reduced in size or functionality • functions working together • final check for design flaws Vojtech Outulny 10 28.5.2011
- 11. Connect the dots VojtechOutulny 11 28.5.2011
- 12. Connect the dots VojtechOutulny 12 28.5.2011
- 13. Low-Fi vs. Hi-FiWireframes or it Mock-up already? Vojtech Outulny 13 28.5.2011
- 14. Dots Practically Vojtech Outulny 14 28.5.2011
- 15. Dots Practically... High-FiWireframe • Wrong feedback for first draft and early iterations • Errors are found later => more iterations • Cannot you use place holders • You must search for beautiful icons • You are not Graphic Designer … Vojtech Outulny 15 28.5.2011
- 16. Dots Practically... 2 • First Draft Wireframe • Low-Fi – 0.5 – 1 days • High-Fi – 1 – 2 days • Next Iteration Wireframe • Low-Fi – 0.5 – 1 days • High-Fi – 1 – 1.5 days • Limited means of expression promote creativity • Content holds context, use real data Vojtech Outulny 16 28.5.2011
- 17. Q&A Vojtech Outulny Web: insidemyideas.wordpress.com E-mail: v.outulny@gmail.com LinkedIn: linkedin.com/in/vojtechoutulny
- 18. iPhone Visio Stencil– Yahoo 1.1 http://insidemyideas.wordpress.com/2011/05/19/iphone-visio-stencil-yahoo-1-1-updated/ Vojtech Outulny 18 28.5.2011