Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

I would like to know the difference between Wireframes and Mockups. I'm hoping to gain a simple understanding of the difference or to definitively know that both are the same.

I googled it but I couldn't understand what exactly the difference is, I would appreciate it if someone could explain it to me concisely.

share|improve this question

9 Answers 9

up vote 17 down vote accepted

A wireframe is about functionality. It can be a really simple sketch that demonstrates what sort of things you can do in your design. For example, a wireframe of a website will show the navigation, the main buttons, the columns, the placing of different elements.

A mockup is a preview of what the website (in this case) will look like. It's a realistic representation of what the product will look like.

For example, I use Balsamiq for wireframes, and Photoshop / Illustrator (lately HTML + CSS straight) for mockups.

An example of a wireframe:

share|improve this answer
3  
For comparison, here's an example of an early mockup for the design of this very site e.g. here, after discussion, most things stayed the same but for the logo and shade of green. –  user568458 May 8 at 10:48
    
Interesting. I never heard of a wireframe before I stumbled upon this question. I was tought a mockup is what you desribe as a wireframe. Either my professors where wrong or this is a localization problem (I'm from Germany). –  André Stannek May 9 at 12:26

Wireframes are rudimentary shapes or lines used to designate position and/or size only. The goal of any wireframe is to "fit" the elements into a layout, not indicate how elements may actually appear in a final design, only where they will be located.

Mockups are built on top of wireframes and go further to show overall appearance aspects of a design including type choices, color choices, etc. The goal of a mock up is to show, as close as possible, how all final appearances will be rendered.

share|improve this answer

Got, some more information by reading User ExperienceGuide ebook

Wireframe

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

  1. • The main groups of content (what?)
  2. • The structure of information (where?)

  3. • A description and basic visualization of the user – interface interaction (how?)

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

Mockup

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

I haven't got the reputation yet to comment to on Dave Kaye's response so I've had to respond directly. It is very much worth noting his reply in comparison with Rachuru's brilliant answer.

In an interpretation of modern phrases, the layman's explanation could/should be;

  1. Wireframes are "the design"
  2. Mockups are "rendered demos"

The actual terminology originates from the 80's. Back then, you didn't have the computing power to produce real-time imagery but you could watch "wireframes" of graphics floating around on screen in real-time. A proper "demo" needed overnight rendering etc.

In these times, a "wireframe" represents a skeleton "design" and, with a good iterative design process, people should be generating mockups from the wireframe, getting feedback and passing that back to improve the wireframe design.

Unfortunately, nowadays, there's lots of software available to customers that allow them to design mockups that aren't using anything that is directly usable by programmers. Frequently, their designs are built upon by others so the mockup gets augmented privately rather than being brought back to programmers to factor into grand designs.

I think that's effectively what Dave was being a little more polite about mentioning :-)

Keith

share|improve this answer
    
+1 for good explanation.....worth –  Rachuru May 9 at 5:25

Have to add one point people haven't made...these answers all give decent technical descriptions but in a work environment the differences are not always so clear. Some companies might add functionality to a mockup and some might put high-level design requirements in a wireframe. I'd be careful about getting too locked into an answer of what things "should" be as the very first company you go to might do something that isn't either of these!

share|improve this answer

As per my knowledge mockup screens are the final represenation of the UI, look and feel. What will be the normal flow and what will be the alternate flow. I think that can be kind of web prototype mostly created in HTML and CSS. We make then mostly during HLD phase to show and have acceptance from client.

Wireframes as compare concentrate more like flow diagram where a general description is there. If doesn't represent few details descriptions like what happens on clicking of event, change event and similar things. They are mostly done by SA/ BA and mock up are done by designer / developers. More over some people attach technical specifications with wireframes like DB involved with that particular UI.

But again it depends upon project to project. In our case wireframes stand the source of truth.

This is what I understand as a difference in them

share|improve this answer

I support detailed reply of @Yisela, also to add this vision exposed in following presentation stages of product design

share|improve this answer

A wireframe can be a mockup. A mockup an be considered a wireframe. While they are sometimes separate things (as others have stated) they are just as often not separate things.

At one time, one might consider wireframes what Visio would create. And Mockups would be what PhotoShop would create.

But today, with the range of tools we have, they are often the same actual document. 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. And if using an interactive tool such as Axure, at a certain point one could consider it the prototype.

So it's a spectrum with a lot of overlap.

share|improve this answer

To put it simple:

Wireframes: skeleton/structure

Mockups: skin/visual aspect

As some people have noted, nowadays wireframes are getting more importance while mockups are fusing into prototypes.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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