Wireframe & Prototype: Briefly Explained

Wireframe:
A wireframe is a static, low-fidelity representation of your product, and in the world of the web and mobile design, a basic guideline of your website or app?—?the skeletal framework?—?for designers and developers to follow. Wireframes are used early in the development process to establish the basic structure of a page before visual design and content is added.

Wireframes can be simply hand drawn, but are often put together using software like Microsoft’s Visio, to provide an on-screen delivery. However, if the wireframes are going to be used for a prototype usability test, it is best to create them in HTML. There is some good software that allows you to do this easily including Axure RP or Omnigraffle (Mac only).

Prototype
The prototype is a mid-to-high-fidelity design model of the final UI of your website or mobile product. Prototypes usually include the first user interaction with the added animations, events, advanced interactions. It lets you illustrate the complete functionality and validate it.

Prototyping is essential for resolving usability issues before launch. It can also reveal areas that need improvement. Once a draft of your product idea is in the hands of real users, you’ll finally see how they want to use the product. You can then go back and adjust your initial guesswork.