I am a freshman in UX design and find it difficult to understand the difference between mock-up, wireframe and prototype. Are they referring to the same thing?

up vote 6 down vote accepted

Wireframes are schematics that display basic elements without going into details.

enter image description here

Prototype is a detailed simulation of the future design, often to a point where it's mimicking the interaction. It can be created on paper, with a specific program or by coding up the dummy data and/or services. enter image description here

Mock-up is a class of designs that include both wireframes, hi-fidelity designs, prototypes. I.e., when you are asked to do a mock-up, there is a need to check the detail level, unless it's already understood.

  • 1
    It pretty makes sense, thank you very much! I guess I must have a clearer understanding of these three words. – Jay Lee Aug 14 '15 at 12:58

A wireframe is a outline sketch of layout. It doesn't look anything like the real finished product. It just shows where the various elements will be.

wireframe

A prototype and a mock-up....there we don't have exact definitions and ways of differentiating them.

I would say that "mock-up" to me sounds like something that is still in fairly early stages whilst a "prototype" is almost complete, a beta version almost. However this is just a feeling and generally the two words are fairly interchangeable.

  • Thanks a lot! It sounds like that a prototype may include a wireframe. Wireframe is the sketch outline of an idea or blueprint, describing the layout of pages, buttons, forms, tables etc.. It is static with low fidelity. While, prototype is much more likely a process including the wireframe, the interaction as well as the output to users. – Jay Lee Aug 14 '15 at 9:23
  • yes, pretty much, a wireframe is a very low-fi prototype/mockup/sketch/design/many other words – the other one Aug 14 '15 at 10:28

In my 8 years of experience I have never found that this is used consistently, you cannot rely on meaning the same thing if someone talk about a wireframe or a mockup. Especially about Mockups: Some visual designer call a high fidelty visual design a mockup, some UX people call a very low fidelity thing a mockup. I recommend to show examples if you want to agree on what is expected.

On Prototypes there is a also a huge variety. But generally a prototype simulates different states and a minimum of interactivity. I like the take of Todd Zaki Warfel on prototypes:

A prototype, regardless of its fidelity, functionality, or how it is made, captures the intent of a design and simulates multiple states of that design. Wireframes and storyboards are static representations of a design that on their own merit do not simulate multiple states of a design. It’s the simulation and multiple states part that creates the distinction.

Prototyping - A Practitioner's Guide. By Todd Zaki Warfel

  • Highly appreciate your elaborate explanation! ^^ – Jay Lee Aug 14 '15 at 13:10

Totally agree with Rolland. I'll suggest you to think about usage of each one of this thing.

Mockup : is often referring to "zoning", I always start with this one. Using it to place elements and informations on page templates.

Wireframes : looks really often like what the other one answers, I'll add a little precision, you're supposed to use real content (real texts, real pictures).

Prototypes : are supposed to simulate user interactions, different states etc. You can have some low-fi protoypes based on mockups, wireframes or some hi-fi prototypes based on graphic design or even more (conditions, real data-bases) etc. I would say the prototype is meant to be used not just "shown".

  • I wouldn't say a wireframe is supposed to use real content (real texts, real pictures). If you think about what a wireframe looks like, it doesn't really include much of anything, much less rich/real content. Barely any images at all, in fact. At least that's how it is in my mind. Think about "wireframe graphics". They barely have color! – Victor Zamanian Nov 14 at 8:20

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.