Human – Computer Interaction 2010

Wireframes 

Wireframe is a basic visual guide used in interface design to suggest the structure of a product and relationships between its components. Typically, wireframes are completed before any artwork is developed.

“ It's simply meant to illustrate the features, content and links that need to appear on a page so that your design team can mock up a visual interface and your programmers understand the page features and how they are supposed to work.” — usability.gov

Mockups 

A mockup is a scale or full-size model of a design or device, used for teaching, demonstration, evaluating a design, etc.

Prototypes 

A mockup is called a prototype if it provides at least part of the functionality of a system and enables testing of a design.

Paper-based prototype for Daum's web mail service, Hanmail.net made by Ajax:

Tools & resources  

Tools

The most used programs for wireframing are Visio, Balsamiq, InDesign, Illustrator, Photoshop, and OmniGraffle.

Pencil Project is an opensource Firefox addon tool for making diagrams and GUI prototyping

Inkscape is an vector graphics editor application, distributed under a free software license

Examples 

XWiki's XWatch Proposal Mockups

XWiki's Annotations Proposal Mockups

Mozilla's Design Challenge Spring 2009 Proposal Prototype