The terms "wireframe" and "prototype" are often used interchangeably - possibly due to convenience or misunderstanding - but it's important to know what sets these two terms apart and how you benefit from each because sometimes your project will only need a wireframe, and sometimes it will require a prototype.

About Wireframing

A wireframe is a visual illustration of one Web page. 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. One of the main purposes of a wireframe is to show you where each item should be placed on a page.

The role of wireframes is to create a foundation for designers to start from and to flesh out requirements early in the interactive development process. Some projects are simple and straightforward enough that they can go directly to design and development once wireframes are approved. Other projects, however, involve complex functionality and interactions that require the need of fully functional prototypes. In addition to helping both the team and stakeholders visually understand proposed interactions, prototypes can be utilized for usability testing, thereby reducing rework after time and money are sunk into development.

About Prototype

A prototype is "a product that is designed and built to test a new design. The prototype is used to correct mistakes and make [the design] more user friendly". It is a "fully functional working model of a final product".

Wireframes & prototypes facilitate communication

Wireframes and prototypes primarily differ in terms of functionality, but both serve as useful communication tools for digital teams to create better, more user-centered products, and produce better results than just having the developers jump right into building after goals are set.

In Nine Solutions Wireframes and prototypes are used in way to help different clients to visualize the project specifications - based on research, goals, and assumed requirements - giving them enough information to provide early, useful feedback and get a product to market faster.

When to use wireframes :

• Wireframes are typically used as the documentation of the project. Since they are static and fix interaction with an interface at a specific point in time, they should be accompanied by the written word.
• However they might be also used in a less formal way. Since they are quick and simple in form, they serve well as clear sketches for inner communication in the team. If developers ask how something should be done - the answer can be provided as a rapidly created wireframe.
• We use wireframes to quickly visualise tasks (even small ones!). It eliminates misunderstandings and is really cheap.
• Wireframes are hardly used as a testing material, although they may help to gather feedback in initial, guerrilla-style, research, in which you don't care about methodological purity, but rather try to get some quick insights.

When to use a prototype :

• Prototypes are used to their full potential in user testing. Such a simulation of the final interactions forms great material to check the usability of the interface, before the development actually begins.
• Prototypes usually aren't the best documentation you can imagine, since they force the reader to take some effort to understand the interface. On the other hand, a prototype is the most engaging form of design documentation as the interface is tangible and straightforward.
• Beware that prototyping is rather an expensive and time-consuming form of design communication. I'd suggest rather creating prototypes that can be reused in development (yep, it means that you need to code some HTML, CSS and probably IS on your own). It's especially effective in relatively simple projects.
• Done right and combined with user testing, prototyping can pay for itself.