Expand your prototyping knowledge

Difference between a mockup and a wireframe. Still in doubt?

Justinmind homepageWireframe of our homepage now

The first one is a mockup. It has the design, color, images, etc. The second is the wireframe.

This is the homepage of our site, fyi. The wireframe was made with Prototyper, of course.

Victor Conesa

About the Author

Victor is the Product Manager at Justinmind. His specialties include business analysis, usability, requirements management and prototyping. When not busy doing that he is known to eat or sleep.


  1. Ernesto

    June 24, 2010 at 8:53 pm

    You are wrong.
    The first is a template, the second is a mockup. The wireframe are a model of the website/webapp where you can see main links and where they link to. The wireframe is used to show the navigation scheme of the site.

  2. admin


    June 25, 2010 at 8:44 am

    Well, at least that’s what we have seen in many UX discussions. The only thing it’s clear is that terms (mockup, wireframe and template) are not very clear on the industry. We have seen many people using the term mockup when they talk about wireframes and so on. What we think is the term “wireframe” is mostly used by UX designers when they talk about drawing the information structure of a screen an, as they don’t usually have design skills they tend to draw them like the second example on that blog. However, graphical designers (the ones who love photoshop) talk about mockups when they have to build a design purpose for a screen. That’s what we made that difference.