For a person from a non- digital design background, the various forms of design documentation such as Wireframe, Prototype and Mockup might mean the same. Many people use these words in an identical context. It is wrongly assumed that these words mean the same kind of sketch that is full of boxes, representing an innovative idea.

  Wireframe, Prototype, and Mockup differ from each other, communicate different things, and they serve different purposes. They are the various forms of representing the final product.

Wireframe

The wireframe form of representing a design is less accurate than mockups and prototypes. It is a low fidelity representation of a product. It should answer the questions of what, where and how. This method depicts:

• The broad content of the idea in groups
• The structure of flow of information
• A short description and a basic opinion of the user

 Wireframes serve as the prominent backbone of your design, and they represent an important part of the final product. Wireframes should be conceived quickly. Its creation requires constant communication with the fellow team members. The creational process should not take long.

  The most commonly used colours on a Wireframe are black, grey and, white, and blue for links. The use of icons and images can be simplified by substituting them with placeholders.

  When created carefully, a Wireframe perfectly conveys the correct design.

The Usage of Wireframes

 Wireframes are mostly used in the documentation of a given project. They should be accompanied by a written note explaining the interactions when needed and other technical documentations.

  They can also be used in an informal atmosphere like communication within a team, as they are simple in form. They are not used as a testing material.

Prototype

   A Prototype is a high accuracy representation of the product. It provokes user-interface interaction. When a user uses prototype, he should:

• Be able to interact with the interface and experience content
• Interact and test the representation in a way similar to the final product

  A Prototype will not resemble the final product to the last detail, but it will have a significant percentage of similarities. The interactions are the most important part of Prototype, and they should be modelled with accuracy. 

Prototype Usage

Prototype finds their maximum usage in user testing. This is an accurate method to check the usability of the interface before the development process begins.

  Though the documentation with Prototype takes the effort to understand, it is the most impressive form of design documentation. It is also expensive and consumes time. It is adequate for simple projects.

Mockup

 The Mockup is a middle path to a high accuracy design representation. Mockup, as the name suggests, is a visual draft of the webpage. It can also be an actual layout. 

  A Mockup method of documentation:

• Represents the flow of information
• Helps gain vision into the content
• Help demonstrate the functionalities
• Projects the visual content of the project

The Usage of Mockup

Mockups are used for gathering feedback and when an early buy from a stakeholder is essential. They are high in accuracy, and they are quicker to create than the other forms.

  The right method of design documentation can be chosen based on the problem at hand, the target group, and requirements of the product.

LSI Keywords:

Forms of design documentation, Wireframes, The Usage of Wireframes, Prototype, user-interface interaction, Prototype Usage, user testing, Mockup method of documentation, Mockup, The Usage of Mockup