The Importance of Mockups

Alexey Hermann
2018 March 217:17 AM


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 colours, 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 it is.

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

How long?

Wowowow, hold your horses. Before we answer that question I’m going to ask you once again WHAT IS IT THAT YOU WANT? Of course you want it to “look nice”. Well I’ve got bad news for you it doesn't work like that.

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

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

3) What functionality needs to be decorated?

4) 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 it can 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 colours, 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 mockup is important.

  1. 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!

  2. 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!

  3. 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 this/When can I avoid this step?

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. BAM! 50$ - 4800$ per month saved!

< Previous
Next >