Wireframing / Prototype

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 :


When to use a prototype :