If you hold the copyright for one of the images in the presentation and you would not like to let it appear in an educational context, please contact me and I will remove it from the presentation.

1. Design Prototyping / Wireframing
Draw, Glue, Arrange

2. Wireframing? Prototyping?
• Sketch the structure • User Experience
• Layout of single pages
– Grid • Distribution of
– Elements Information
– Order/Hierarchy
• Color
• Information Architecture
 Fast and cheap
 Expandable
 Reversible
 Exchangeable

3. Why Wireframing?
http://orangegrovedesigns.co.uk/blog/wp-content/uploads/2011/07/Corp_hp_wireframe2.gif

4. Why Prototyping?
http://www.youtube.com/watch?v=c4-A-9hGn0U

5. Redesigning the VLC Startpage
Step 1:
Analyze the current design
Step 2:
Choose the elements required
Step 3:
Create your paper prototype

6. Use common elements
http://www.jankoatwarpspeed.com/file.axd?file=2009%2f12%2fJaws_Sketching_Kit.png

7. http://clients.mstoner.com/blogvisuals/pwireframe3.jpg