Do you know what a Wireframe and Mock-up are? What is their purpose? When and why should you use them? And how it all fits together? What is a High-Fi Wireframe and how it can bring you in problems? So these questions, I will try to answer and as a bonus I add my experience from using of Low-Fi wireframes.
5. Wireframe...
It is about...
• 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
7. Mock-up...
It is about...
• 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
9. Sketch
It is about...
• 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 is about...
• 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
15. Dots Practically...
High-Fi Wireframe
• 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