What is a mockup

A mockup is a visualization option of the later real product or in the digital area of a website, shop or app. Such mock-up demonstration models are shown at trade fairs or in presentations that already have some functions or can be properly operated, but it is only a model or prototype not the original product. For larger products like mockups are also correspondingly smaller e used scale for illustrative purposes.

In the field of online marketing one uses mockups a possibility for visualization of web s e th, to have shops and apps, which is the user experience empathize. For web designers, programming and also the customers it is a better variant than a pure sketch, because the graphic representation of the mock-up shows the targeted website impressively at a glance.

What do you use a mockup for?

According to SCIENCEDICT, this means that parameters and functions can be experienced that cannot be queried in a pure design on paper . How do colors, buttons, links and images work together? Is pos i tion of images and text in terms of the concept d it stores, the app or website also practical portable? What about the interaction of all design elements, menu structure and image-text relationship? How is the page displayed on a smartphone or tablet?

All these points and many more can be tested with a mockup and adjusted before the website has been completely implemented. A mockup is therefore also a good visualization option that saves time and programming effort in the process of collaboration .

Wireframe, mockup & prototype – what is actually what?

If you are in the conception phase for a website or online shop, wireframes, mockups and prototypes are used for visualization. But how do they differ? In the following table we show how the prototype and wireframe differ from the mockup:

Wireframe

Mockup

prototype

meaning Literally translated:” Wire frame “ Proper name, comes from “ moque ” or “mock”, originally “imitating mockingly” A representation that comes very close to the original with initial functions.
Visualization option Only shows schematically the position and quantity of images, text, operating elements Images, texts, menu structure, possibly the first functions, are presented optically in detail . Functions, images, texts, menus, colors, animations. Almost everything can be experienced and tested as in the later implementation.
function The structure and conception of a website is roughly presented. Usability, guidance of the user on the page, effect of the web design, etc. can be well represented Presentation and checking of the functionality and web design of all elements. Making a mockup testable.
mission Early development phase of a website.As a starting point for further steps Early implementation phase of a website.Gladly also as a representation of variants Final implementation phase of a website.
Gladly as a basis for detailed implementation, especially for initial tests with regard to usability.
variants 1.) Static (also low-fidelity wireframe) – for example as a sketch or rough draft2.) D ynamic elements are more detailed, but still shown optically. Comes close to a mockup. 1.) OpticalOnly visual representation of a website, app or shop for one or more pages of the domain.2.) Optical with some functions
Some but not all of the representations are interactive.
Depending on your own development process, the level of detail of prototypes can differ and can even go as far as a detailed replica that is almost indistinguishable.

When do you use wireframes, mockups and click dummy ?

Depending on the phase of the development of a website, for example, the different visualization variants of wireframe, mockup and click dummy (prototype) make sense. With an increasing level of detail, the entire team and also the customer can be shown how the targeted website can look and function. An impressive representation that a pure template or sketch cannot adopt.

Especially with websites and online shops, it is good to such a visual match , have to spend time and effort to save on all concerned sides. This is why this form of visualization is usually chosen in the various tools. At first, at the very beginning, it is sufficient to design a wireframe either in image processing software such as Photoshop or specific applications for creating wireframes such as Lucidchart, Adobe XD, Cacoo and Sketch, to name just a few.

Sequence of wireframe, mockup and click dummy (prototype) in the course of a website development.

1) Start of development, conception of a website> Wireframe
2) Advanced cooperation, first drafts should take place> Mockup
3) Finalization and detailed implementation is imminent> Prototype or click dummy

What are the most important functions in a mockup tool?

Since the mockup should also show individual functions depending on the desired visualization variant, a modular implementation of the concept is first necessary. If the customer is a pure visualization si he rich clothes, you can also create a mockup only in Photoshop or other graphics software. It is also important to pay attention to the different display sizes that are to be expected later. In particular, the reaction of the website to scaling, the so-called responsive design, must be taken into account.

In a mockup tool, you can usually place the various elements on a grid using a simple editor. What is important with a mockup tool is, in addition to the ease of use, also the possibility of creating and saving different variants so as to be able to present them to the development team and customers in an uncomplicated way.

How do I create a mockup?

After the structure and rough layout of the page has been determined in the wireframe, the mock- up can be created visually either in a mock- up tool or graphics software of your choice. Here are various display scenarios such as Mo bil, T ablet etc. observed. It is then advisable to define the various fixed elements in a mockup for a website, for example. What color are buttons? Font? The menu?

The size and placement of images and texts must now also be clearly assigned. The first prototypes can then be developed based on this mock-up concept.

Several mockups should therefore be created for coordination with the customer. So it is advisable to have variants for main and sub-pages as well as forms and pop-ups ready.
Even when creating the mock-up, possible sources of error in the area of ​​future implementation become visible. As soon as this is the case, any functions, size and positions should be adjusted accordingly.

What is a mockup