Booklet

author

Hack University

Development

Difference Between A Wireframe, Mockup, and Prototype

Difference Between A Wireframe, Mockup, and Prototype

Wireframe

A wireframe is a low-fidelity design used to communicate an interface's layout, structure, information hierarchy, and functional concepts.

Think of it as a blueprint for the future design of a website or app.

It's characterized by lines, boxes, and gray-scale colors.

Mockup

A mockup is a static, high-fidelity version of the Ul design.

It reflects the design choices of color, typography, iconography, visual navigation, and overall feel of the product.

Mockups help people visualize how the app will look and feel.

Prototype

A prototype is a full interactive design that shows how the app works. It's a simulation of the real product.

It answers questions visually like:

"What happens when I tap this button?"

"Where does this link take me?"

"Is this scrollable?"

It brings the wireframes and mockups together to communicate the overall experience of the app and how will function.

It's important to remember...

Wireframes, mockups, and prototypes are all just artifacts used to better communicate to others our ideas for how an app or website should work.

Join our tech and design community! @hackuniversity

More booklets by Hack University

More Development booklets

Your recently viewed booklets

  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
See all booklets