Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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

11 Answers 11

up vote 34 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. You can think of it as a bluprint for a website.

A mockup is a realistic representation of what the product will look like, in this case a website. The final result can look exactly like the mockup, or be a variation of it after version revisions. While some people prefer to draw the mockups using graphic software, others do it straight in HTML/CSS.

I use Balsamiq for wireframes, andeither Photoshop / Illustrator or HTML + CSS (depending on complexity) for mockups.

An example of a wireframe:

More on wireframes and mockups

share|improve this answer
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 '14 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 '14 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

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

share|improve this answer
I like the visual answer but does the size of the balls represent anything? I would think that prototype is larger scope than wireframe and mockup – sivi Aug 16 '15 at 8:14

Here is a short summary of an article by Marcin Treder:


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.


  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 :-)


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

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

Wireframes are used to define the framework, the information hierarchy, demonstrate workflow, provide details on what is on the screen, and a description on how a component works (annotation). Depending on the complexity of the application or site, wireframes should be built upon another requirement deliverable; process models. Wireframes can be used to elicit requirements from a client, and eventually confirm requirements with a client. Wireframes are a visual model of the structure of a site or application. They do not define the font that will be used, the padding, the color, the style etc. They are not to scale, and they have no tones or gradients. All of this needs to be communicated with the client so they understand the process and the context of the wireframe deliverable, in conjunction with other requirement deliverables.

A mock-up is typically created in Photoshop and while it is based on the structure, or framework of the confirmed wireframe deliverable, it is a distinct deliverable, with a distinct schedule and approval process. Mock-ups or comps, define the visual style, or tone of the interface. Once accepted, mock-ups translate into a number of additional requirements or work products, such as CSS code, style guides, graphical assets, etc.

Wireframes are never to be mock-ups. Mock-ups could be used as wireframes but this would have implications for any revisions that may be required and impact your budget significantly.

Source: 15 years as Communications Designer, UX Lead, Business Analyst in a corporate environment developing websites and applications. And the beloved BABOK

share|improve this answer
Hello and welcome to GD.SE! If you have any questions about how the site works, have a look at the help center or feel free to ping one of us in Graphic Design Chat once your reputation reaches 20. Keep contributing and enjoy the site! – Vicki Oct 15 '15 at 2:14

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

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

wireframe : frameing of the house Mockup : drywalling of the house

share|improve this answer

We're looking for long answers that provide some explanation and context. Don't just give a one-line answer; explain why your answer is right, ideally with citations. Answers that don't include explanations may be removed.

Your Answer


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.