[editor’s note] this article translator @ Xiao Bang classmate. The article introduces the block diagram (Wireframe), the prototype (Prototype) and the visual copy (Mockup), and the rigorous functional distinction between the three.

for many of the information technology friends (non designers) in the delivery of the design, the confusion of these words, that they represent the same thing: to express their own creative line hand-painted design draft. Well, if we want to express our ideas better in our work, we need to have a better understanding of the three.

confusing the concept of trouble: they can not distinguish the user experience designer works, often confused. "This button is a hell of a problem." "I don’t know where to press," something like this is a common occurrence in user experience. Mistaking the block diagram as a prototype is a bit like a blueprint for a building (instructions on how to build a building) and a demonstration hall. You can try to stay for a while in the demonstration hall (the beauty of it is intuitive to convey the beauty of the room), but you can’t lie comfortably in the blueprint – the blueprint is just a piece of paper.

in architecture, presentation halls and blueprints serve different audiences:

blueprint, the construction programme, describes in detail how to build buildings


demonstration hall provides opportunities for future residents to test and experience

The similarity between the

presentation hall and the blueprint is that they represent the final product, the building (house). The same is true of wireframe, prototyping, and visual drawings, which are different ways of displaying the end product.

believe it or not, the first thing I’ll teach the user experience is to tell them to distinguish between the three concepts. Because it’s really important.

next, let’s talk in detail about the differences between the three, and you’ll know what kind of words you’ll use in the future.



1 and what is the wireframe


line diagram (Wireframe) is a low fidelity design diagram, when explicitly articulated:

content outline (something)

information structure (where)

user’s interactive behavior description (how to operate)

line diagram is not just a collection of meaningless lines and frames; well, although it seems to be embarrassed. You can understand the wireframe as the backbone and core of the design, which carries all the important parts of the final product.


Leave a Comment

Your email address will not be published. Required fields are marked *