If you look up “mock-up” in a dictionary you will find several explanations. The one that fits best to a mock-up in the context of UI design is “It is a life-size model”. You could also say that a mock-up is an imitation, but one that comes before that actual product, not after.

While looking for articles related to this topic I found that there is no clear distinction between the terms “wireframe”, “mock-up” and “prototype”. Though “wireframe” is much more unambiguous, wireframes are sometimes called “mock-ups” and the terms “mock-up” and “prototype” are used more or less as synonyms. From my point of view they are three different stages in an iterative design process. So to clearly distinguish mock-ups from wireframes and prototypes, I will be talking about high-fidelity mock-ups in this article.

A UI mock-up consists of one or several static pictures that resemble the future UI of the application in as many aspects as possible. As opposed to a wireframe on a mock-up you take care of every little detail. For example you decide on the colors, font types and font sizes. You decide which user interface elements (entry fields, labels, buttons etc.) you want to use and you place them at their exact position. The latter also includes determining the spacing between user interface elements and aligning them. You decide on the wording and the terminology. If applicable you choose icons, charts and images.

Mock-ups are created in a digital form. There are various software tools for mock-up creation out there. You can either use dedicated mock-up tools, a standard image editing software or any other software that works for you.

So why would I create an imitation before I actually create a product? While defining the scope of your application in the team, several iterations of your mock-up are a reliable basis for discussion. Everyone can see exactly which functionality (represented by the UI elements) will be available, how the visual design is going to look like and which technical features will be needed.

In the end a user interface mock-up is like a contract for the project team. As soon as the team has agreed on it, it will serve as a blueprint for the development of the user interface.

In addition, the mock-up phase is the ideal point of time for a usability test. In an early stage of your project you can get quality feedback on suitability, design and layout and terminology. You will also find out if your user interface is self-explanatory.

Not logged in