Courses Projects

Human Computer Interaction 2010


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.” —

Jack Dorsey's original sketch for Twitter

Profile page idea for Vimeo by Sockyung Sox Hong


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


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, made by Ajax:

Tools & resources  


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

evalica 2010