A website mockup is one of the prime examples of how a website will look like. Website mockups merge the structure and logic of a wireframe with the images, graphics and UI elements which is final product.

Mockup is a scale or full-size model of a design or device, used for demonstrating various options the product offers, assists in design evaluation, and it serves mainly designers and front-end developers to make the look and feel of a website.

In layman’s terms it is a rough draft, it is a simple layout or prototype of the website, and usually built by a graphic designer. It is used to help the customer’s exact need. Once a client gives the design a green light, the developer will start the code.

What is behind it?

A mockup is a visual way of representing a product either on paper or using online tools to build it. Without writing a single line of code. Period.

It is just there to ensure not to lose our time on coding before getting approval.

Best mockups are:

  • Pen and paper
  • Low fidelity mockup (Mockups, Balsamiq)
  • Hight fidelity mockup (Photoshop, Illustrator, Sketch, Figma, Affinity designer)

The first step is a Wireframe, it reflects only the elements that you need to have on your site and their places on a page. The Wireframe can be easily made by hand.

The second step is a web page Mockup and while a wireframe mostly represents a product’s structure, a mockup shows how the product is going to look like. Here you have to choose the style, color pallet, shape and design of all the components. It gives you the perspective to check how ergonomic the design is, as well as to analyze the overall view of a page.

A prototype is a clickable working product, which you can test. In plain English, it is a ready-made product but with a minimal functionality set. It is needed as proof of the concept, so if you want to persuade anyone that your idea is really brilliant, show them a prototype.