Thursday, June 2, 2016

terminology - 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.



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


No comments:

Post a Comment

technique - How credible is wikipedia?

I understand that this question relates more to wikipedia than it does writing but... If I was going to use wikipedia for a source for a res...