Wireframe? Mockup? Wockup?

Tell me what the difference is.

I see Wireframe and Mockup used as swapable terms. I see Wireframe used to mean a full-on, high-fidelity image of a UI. I’ve seen Mockup used for a napkin drawn outline of a web site with the only text being, “Nav here?”

What is a Wireframe?

What is a Mockup?

I have thoughts on this, but would love to know what you think.

Tags:

6 Responses to “Wireframe? Mockup? Wockup?”

  1. pawel Says:

    For me Wireframe is about function, and Mockup about form. Both may be just six rectangles, but on Wireframe these rectangles mean “the login form will be on the left, below header photo and navigation bar” and on a Mockup “login form will be twice as high as navigation bar, and will occupy 1/3 window width”.

  2. Jon Says:

    I’d agree with what pawel said above. A wireframe is more about the physical layout, and the mock is the design. Personally this is the first time I’ve seen the word “wockup” so I can’t really give a response to that.

  3. JayZ Says:

    I’ve even heard “prototype” and “mockup” used interchangeably.

    I’ve rarely heard wireframe applied to desktop applications — it almost always occurs when speaking about web design. Why is that? (If the answer is, “You lead a sheltered life”, I can handle it.)

  4. James Says:

    I usually take the approach that wireframe is the boxed chunks indicating where the pieces will go on the page. Mockup in my experience is usually a full graphic comp that has used the afforementioned wireframe as a template for the Photoshop beautifying that has created the mockup.

    Whatever … as long as you and the client agree on the deliverables and what they mean.

  5. sean Says:

    Wireframes are about functional specs. should be greyscale functional UI layout with notes about the intended functionality of the interface to be designed/developed. This leaves room for the design to be created based on the wireframe.

    Mockups are about look and feel. They build on the wireframe with color, graphics, and polish, and may adjust layout slightly but stays within the general guide of the wireframe.

    Prototypes are somewhat functional, demonstrating form and function working together at a basic pre-alpha level.

    That’s my take anyway…

  6. mockuptiger Says:

    I agree that the terms are used interchangeably everywhere.

    MockupTiger