They look different and are intended for different purposes. Sometimes a project will only need a wireframe, while at other times it will call for a prototype.

Start With a Wireframe

According to Usability.gov “a wireframe is a visual illustration of a web page… to show you where each item should be placed on a page.” It is a basic visual layout of gray boxes representing the main elements and identifies the site’s hierarchy.

Wireframing in a team usually develops quickly since iterations can readily integrate new ideas, input and usability needs. Wireframes do not show much detail, but create a simple design that guides the project and its team members.

• Wireframes visualize the basic elements of a web page
• They are developed and refined quickly
• They are not interactive

Once a wireframe starts becoming interactive, it becomes a prototype.

How is a Prototype Different?

A prototype is an interactive representation of the final product and by definition more detailed than a wireframe (e.g. graphics and text). Clickable prototypes enable users to experience and test their journey through the user interface (UI).

A prototype should be similar to the final product. Well-researched and orchestrated interactions need to closely model the user experience (UX). The interdependence between the front end interface and the back end programming tends to get ignored at this stage to keep costs down and accelerate agile development iterations.

• Prototypes are interactive
• They model the user experience
• They enable extensive user testing

Prototyping allows stakeholders to review a solution and put it to the test with users before spending time or money on coding. Wireframes can naturally evolve into more advanced, complex prototypes as the solution ripens in consecutive team sessions, agile user tests, and iterations.

A mockup is different from both the wireframe and the prototype. It is static like the wireframe, but more visual, conveying the brand without the interactivity of a prototype.

Do We Need a Mockup?

A mockup is a static design representation in which the corporate identity is applied through color, typography and visual style. Mockups can be drafts that turn into the final look of the solution. They show stakeholders a dimension of the product that can be important for customer acceptance packaging being a contributing factor of a product’s market success.

• Mockups apply the corporate identity
• They can be close to the solution’s final look-and-feel
• They are useful for user testing and acceptance

Mockups are particularly useful for obtaining early buy-in from stakeholders since they are more easily understood than abstract wireframes while being quicker to create than prototypes.

Wireframe, Prototype & Mockup Differentiation

• Wireframe
  • Key Aspects: Basic representation of design elements.
  • What to use for: Communication, documentation.
• Prototype
  • Key Aspects: Interactivity.
  • What to use for: Interactive user testing, UI design.
• Mockup
  • Key Aspects: Static visualization, branding.
  • What to use for: Stakeholder design buy-in.

The industry has not helped to keep the terms wireframe, mockup and prototype clearly defined, and readily available content uses the terms interchangeably. These three visualization tools have clearly been shown to be distinct, giving life to particular aspects of web and software development.

If you’re not sure how each fits into your process, just leave a comment so I can help. Tools like Omnigraffle, Sketch.app, or even Adobe Fireworks can help in creating wireframes, mockups or prototypes.

The post Wireframing, Prototyping, Mockuping – What’s the Difference? appeared first on Speckyboy Design Magazine.