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.
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 blueprint 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 graphics software, others do it straight in HTML/CSS.
I use Balsamiq for wireframes, and either Photoshop / Illustrator or HTML + CSS (depending on complexity) for mockups.
An example of a wireframe:
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.
I support detailed reply of @Yisela, also to add this vision exposed in following presentation
Here is a short summary of an article by Marcin Treder:
Wireframe
A wireframe is a low fidelity representation of a design. It should clearly show:
• The structure of information (where?)
• A description and basic visualization of the user – interface interaction (how?)
Mockup
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
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;
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
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.
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!
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
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.
Wireframes
When you intend to design a mobile application or a web application, you will first need a sketch of how each page is going to look like. Only based on business concepts, a designer can define the application flow and a first draft of design, that has a sketch of how it will look like, what buttons will be there, what fields will be there, etc. That is what wireframe is meant for.
Mockups
Mockups are more alive pictures. They are visually more appealing, has colors, fonts, themes, buttons, logo, etc. At this stage labels of the fields, notes, font types, navigation menu, etc. are specified in the design. It is an exact representation of the how the mobile app will look like or web pages will look like.
You can find detailed comparison between Wireframes and Mockups in this informative article: The Difference Between Wireframe, Mockup and Prototype
