What is the difference between wireframes and mockups?


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.

5/8/2014 10:23:00 PM

Accepted Answer

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:

Wireframe example

11/24/2017 8:05:00 PM

Licensed under: CC-BY-SA with attribution
Not affiliated with: Stack Overflow

Website under construction!!!