The Difference Between Wireframes and Mock-ups

2:06:00 PM

Both wireframes and mock-ups are important in the design process.  A wireframe can be a mockup. A mockup can be considered a wireframe. At the beginning, they may start out as wireframes (purely layout and function) but over time become more and more detailed to the point where they could be considered a mockup.


A wireframe is a low fidelity representation of a design. It should clearly show:

  • The main groups of content (what?)
  • The structure of information (where?)
  • A description and basic visualization of the user – interface interaction (how?)

Consider them as the backbone of your design and remember that wireframes should contain a representation of every important piece of the final product.


  • A mockup is a middle-to-high fidelity, static, design representation. Very often, a mockup is a visual design draft
  • Represents the structure of information, visualizes the content and demonstrates the basic functionalities in a static way
  • Encourages people to actually review the visual side of the project.

These are just textbook definitions. These are needed for knowledge, but these are key tools for creating your final design. 

You Might Also Like



Subscribe to the Mailing List

Like me on Facebook

Recent Tweets