A Beginner’s Guide To Designing Website And Mobile App Mockups

Posted on - Last Modified on

The final product in graphic design will most likely depend on what the client wants, and how they envision it to be, whether it’s a website design, logo, or mobile app. Therefore, to seal a deal with the client, you have to present a strong idea of what your end-product design is going to look like.

Clients expect you to have understood what they want the end product to be. A visual presentation is a necessity. Some designers use presentations in the form of JPG, PDF, and even screenshots. Such formats do not add context to the design, and using them is not a great idea. A secret to professional designing is the use of mockups.

What is a mockup? In simple terms, a mockup is an image of the end project you are going to design. It is a visual representation of the final product, and at times its functionality. A mockup serves as a means to achieve the final design; are sometimes confused with wireframes and prototypes, which are two very different things. Wireframes are the blueprints or skeletons of the end product. They show the structure and layout of the product. A prototype shows how the design will work. Prototypes are normally made to show the usability of the product, and to assure the product functions.

Visit freelancer.com, and view hundreds of projects where clients use wireframes to guide freelancers on how to work.

Mockups are used to communicate your design ideas with your client throughout the designing process. It is easy to incorporate changes in the design to fit into what the client wants done, which saves you a lot of time. With a mockup, you can clearly project the vision for the final product, something a screenshot fails to deliver.

Mockups help to contextualize your design. Whether designing a website or a mobile app, they always showcase your skills. As a designer, they help you flesh out the ideas you have, and let you change any visual elements you don’t like.

Mockups not only help in communicating ideas to the client but also offer a variety of fonts, colors, and layout ideas that prove useful in the designing process. Adding mockups to your designing toolkit is a great asset to your designing career.

Below is a guide to using mockups in design:

Step 1: Download mockup

You can opt to design a mockup by yourself, or download one from the internet. Creating your own mockup might be time-consuming and rather tedious. It is easier to just download one that fits your preferences. One of the easiest ways to create a mockup for yourself is to drag your designs at Placelt by Breezi. They create a mockup for you, and it is ready to download in a few seconds.

If you do not have designs to use for creating mockups, you can get wonderful templates from mockupeverything. Time consuming or not, it is advisable to create your own mockups because as a designer, you do not want to have designs similar to anyone else.

Some of the other software that will help you create your own mockups include Impresso screens, Proto.io, Just proto, Invision, HotGloo, MockFloo, Mocking Builder, mockingbird, and Balsamiq mockups.

Open your web browser of choice, type in Photoshop mockups, or simply go to Mockup world and search.  Pick one or more, then click on the download option.

You can choose to get a free or paid mockup file. Creative market provides for the paid mockup files. If you are looking for something more unique, you can download mockups from this site. You can also download the mockup guide that will give additional information on the types available.

A Photoshop document mockup is normally downloaded as a zip file. It should contain 3 things: a Photoshop document of the mockup - which you are going to edit - a JPG file that gives a preview on how the template works, and a PDF file that shows what the mockup is about and its licensing policy.

Step 2: Edit

There are three types of mockups, namely a JPG, a PNG and a PSD with Smart Object. Before you start the editing process, open the JPG file that shows you how the template works. You can open it using Adobe Photoshop. You have to study and understand how the layers in the mockup work, because this is what you will be editing to arrive at the final result. Mockups have layers with different editing features, depending on the type you have downloaded. If you are experiencing difficulty seeing some of the layers in the mockup, just click on the eye icon.

You can opt to change some of the mockups you downloaded into 3D versions, thus making them more beautiful for presentation. You can download some Photoshop actions from sites like Psd covers, which have inbuilt actions to change the flat designs into 3D with the click of a button.

PSD mockups with smart object

For the PSD mockups with smart objects, you have to locate the smart objects, which are usually found next to the layers. The Smart Objects help you edit the layers, and save the contents of the image.

The next thing to do is replace the content present in the layers with your own content. Click on the smart object on the layer. This will open a Photoshop window of the layer you are going to replace. Drag the artwork you want to replace into the window you have just opened. Edit the image to your satisfaction, using the tools provided. Once done, click on the save button. When you go back to the original file, you will see the changes have been saved.

JPG mockups

Open the mockup you either created yourself or purchased. Select the layer you want to edit; it will then lead to the Photoshop window. Open the content you would like to add on the mockup, and drag towards it. Edit it, and save.

Head over to freelancer.com to find and hire the best graphic and web designers using mockups.

Some General Guidelines

When presenting a mockup, try to present it with different designs, color textures, fonts, and layouts. This will give the clients a wide range to choose from, and help them determine the changes they would like to make. However, refrain from citing too many examples. It is also imperative that as a designer, you explain clearly what constitutes your design and what constitutes your mockup.

If you are not creating your own mockups but downloading them, make sure you read the terms of the contract, even when you are downloading for free.

Mockups are important to use in the design process as they help in visualizing the final design, and often give you a platform to change how the things look before the coding process. Using a digital mockup in design is the trend. Change your portfolio and presentations for the better by using mockups in all your designing projects.

Do you have any tips for designing mockups? Be sure to leave them in the comments section below, and don’t forget to share.


Posted 12 September, 2017


Designer // Writer // Creative

Tom is a Design Correspondent for Freelancer.com. He is currently based in Melbourne and spends most of his non-work moments trying to find the best coffee.

Next Article

Device Mock-ups In Website Headers: Design Tips & Examples