Live data from Hacker News

What Is the Difference Between Wireframe, Mockup and Prototype?

brainhub.eu

11–20 of 29 posts

Re: What Is the Difference Between Wireframe, Mockup and Prototype?

#11
post #9

why is this article at the top? this is like web dev 101 stuff

A lot of developers still don't do this often, don't do it properly, or don't know what to call what they're doing. To you it may be 101 stuff, and it is to me, but if you were educated in front of, say, a form designer, that's a hard habit to break.

Re: What Is the Difference Between Wireframe, Mockup and Prototype?

#12
post #7

It says functionality is represented in a wireframe. Doesn't wireframe simply shows structure? That is, which elements goes where. The functionality is shown in a prototype.

Mateusz Warcholinski mentioned Balsamiq [1] as an example of his definition for a "wireframe" tool. Therefore, instead of trying to parse his description of "wireframe", it may be better to just look at Balsamiq's capabilities: https://balsamiq.com/ To me, it looks like his idea of wireframe is something "clickable" ... such that it launches another fake page, but not functional . A Balsamiq/wireframe tool is somethi…

Tad snarky.

Re: What Is the Difference Between Wireframe, Mockup and Prototype?

#13
post #9

why is this article at the top? this is like web dev 101 stuff

Every article on Hacker News is 101 for some segment of HN'ers. Pick a piece of software and there's a non-trivial probablility that someone who wrote some or all of it has an HN account.

That's not to say it's a great article. But I can see why some people might find it intellectually interesting or useful because it cleared up confusion.

Hacker News is not uniquely immune to Endless September [0]. The expectation regarding dealing with it, using civility, is not unique either. But it is uncommon.

[0]: https://en.wikipedia.org/wiki/Eternal_September

Re: What Is the Difference Between Wireframe, Mockup and Prototype?

#14
Thanks for feedback guys. I agree that in various companies those terms might have a bit different definition.

I wrote this, because I couldn't find anything good enough describing this topic. We often got aks by our our customers or first-time-founders - What is the difference? And why and how they can do it?

Re: What Is the Difference Between Wireframe, Mockup and Prototype?

#15
post #12
post #7

Earlier quoted context omitted.

Mateusz Warcholinski mentioned Balsamiq [1] as an example of his definition for a "wireframe" tool. Therefore, instead of trying to parse his description of "wireframe", it may be better to just look at Balsamiq's capabilities: https://balsamiq.com/ To me, it looks like his idea of wireframe is something "clickable" ... such that it launches another fake page, but not functional . A Balsamiq/wireframe tool is somethi…

Tad snarky.

I didn't intend it to be. I advised the questioner to simply do what I did myself : ignore the definition that Mateusz Warcholinski wrote which is open to misinterpretation (as this HN thread shows and Mateusz has acknowledged) and simply go to balsamiq.com.

After studying Balsamiq, work backwards from that to get an idea of what he meant by "wireframe" and whether or not it has "functionality".

Re: What Is the Difference Between Wireframe, Mockup and Prototype?

#16
post #8
post #4

I really disagree with thinking about the interactions that late into the process. I think that, today, interactions are at the core of an application instead of just being eye-candy. Putting your wireframes in a prototyping tool allows you to quickly test and figure out if the interactions that will drive your flow are good or not. You really don't want to know this only when you're done choosing your fonts/colors a…

To me, a wireframe specs out the UX and shows all possible user interactions. A mockup is a static representation of a wire frame with design added. A prototype is a working representation of a wire frame with the design added. Though the functionality may be simulated or mocked.

These are good definitions.

Re: What Is the Difference Between Wireframe, Mockup and Prototype?

#17

It says functionality is represented in a wireframe. Doesn't wireframe simply shows structure? That is, which elements goes where. The functionality is shown in a prototype.

You cannot define a structure without it implicitly acknowledging what functionality archetype will be associated with it. For example, even in a most basic wireframe of a web app if a wireframe showed a left column about 20% wide and 100% height anyone with any experience in software will instantly assume a hierarchical menu of some design.

I would agree they aren't tightly coupled but there is definitely an association there that can't be completely separated.

Re: What Is the Difference Between Wireframe, Mockup and Prototype?

#18
Not about the op but I've always hated the name "mockup". Maybe it because it seems less technical than other terms used in the design process such as wireframe and prototype. I also dislike the way the word sounds. I often use alternatives like sketch or draft since they describe an output that is usually fairly short in the time frame of construction and open to future change. I hate the name mockup so much I think I may have opted to honestly not use the app Sketch if they had named themselves Mockup.

Re: What Is the Difference Between Wireframe, Mockup and Prototype?

#20
post #18

Not about the op but I've always hated the name "mockup". Maybe it because it seems less technical than other terms used in the design process such as wireframe and prototype. I also dislike the way the word sounds. I often use alternatives like sketch or draft since they describe an output that is usually fairly short in the time frame of construction and open to future change. I hate the name mockup so much I think…

"Comp" or "layout" would be the more technical terms for that, though I've found they're generally less understood.

https://en.wikipedia.org/wiki/Comprehensive_layout

Post reply on HN