< Back to blog
Oksana PletenOksana PletenUI/UX Designer

What Is a Mockup and Why Do We Need It

Mobile app mockup

Up to 50% of your budget will be spent on application design. The most basic app that takes 160 hours to code can easily take as much time to prepare a custom design. Please be aware that we are talking about custom design, not just 3 USD theme bought on market-place. That’s the case for another article.

Why Do I Need to Know that?

Many potential clients I talk to assume or hope that a frontend developer is a person who will take care of the “feel” and “look” of the app. Which is true, but he will take care of the engineering part not actual choice of colors, shapes, fonts and other humanitarian stuff. Most developers frown upon such requests. So when you write “Frontend developer with good UI/UX skills” in your job post you are missing the point, out of 20 frontend developers I can think of from the top of my head - only one can create a great custom design.

What Is It?

It’s a static picture created in some Graphic Design Software such as Sketch or Photoshop.

How Long Does It Take?

Before we estimate the time needed to create a mockup, we should understand the following:

  • Can you tell how many pages or screens will the UI designer need to draw?

  • Is there a style guide the designer should follow or should he/she come up with one?

  • What functionality needs to be decorated?

  • Is it a responsive design?

The answer to each of these questions will define how long it will take.

Here are some estimates from our in-house designer:

You should talk to the UX designer first, he/she’s the one who will prepare the wire-frames of the application/website/landing page and only then these wire-frames can be turned into a nice looking mockups.

What Can It Be Confused With?

1. Design

An abstract notion “design”. When I hear “design” first of all I think of the process where a designer sits down with a concept from the client and tries to present client’s vision through the right choice of colors, shapes and all that, so the Mockup is the end product of the design.

2. Prototype 

A Prototype and a Mockup are different because Mockup is static, and prototype means clickable image or even a rough production version of an app.

3. Wireframe

A wireframe does not look good because it is not a design. It’s purpose is to plan the structure and the user flow scenarios.

Why Is It Important?

  • Front-end developer will use it to estimate how long it will take him to implement. For example if that page has some sort of sliders then it will take more time to code rather than if it was just a static picture. NO MOCKUP - NO MARKUP (the visual part) ESTIMATE!

  • Front-end developer will be using it like a painter who looks at a landscape and pictures it with his/her hands and tools. NO MOCKUP - NO HTML (the visual part) CODING!

  • Your app needs to be appealing to the eye of a user. Examples: a fashion app, photography app or a beauty blog - something that needs to look good. NO MOCKUP - NO CLIENTS.

How to Save on It or When Can It Be Avoided?

Yes, I did say earlier that no mockup - no coding. There is an exception if you have approved wire-frames then developers can implement them without making your app beautiful.

Example 1: you can buy a theme and front-end developer can customize it. But unfortunately it customization can take more time than designer creates a mockup from scratch.

Example 2: Let’s say your app’s purpose is to locate a Bluetooth device, it’s not the kind of app a user will be staring at for long, it can be as simple as possible.

Example 3: if you are building a prototype or an MVP and functionality matter much much much more than the looks, you can ask your developer to simply use the material UI kit, it will look rather generic, but clean and accurate. 50\$ - 4800\$ per month saved!

Develop a mockup with us!

Our UI/UX designers will gladly assist you with developing a proficient mockup, which would greatly facilitate the development process.