warning Briefbox requires an up-to-date browser. Upgrade now to get started.
Sign In to Save

How to present mobile designs

Part of the presenting your design series

Learn how to make your mobile designs standout
How to present mobile designs

Creating a design is only one part of the process, presenting it in the right way is essential for people to understand how your ideas work, especially when designing for mobile. Giving continuation to our series of ‘How to present..’, this time we decided to talk about mobile designs. We see a lot of submissions here on Briefbox making some simple mistakes that really affect the overall quality of a shot or design case study.

Designing for mobile is becoming more and more key nowadays – most people access websites and use apps a lot more on their phones than anywhere else. That’s why presenting the design for a mobile version of a website, or an app, in the correct way, is very important.

More than making your presentation look nice, you have to make sure people can visualise how the design would work live and to get a feel for how the business or brand is represented in the mobile view, especially when working on several different screens. To show you the do’s and don’ts, I’m going to use my mobile design for the Screen layouts for a homeware and gifts online shop brief:

As you can see here, I created a minimal but full of character design for this homeware and gift shop called Yum Goods. To present my design, I used an iPhone mockup and added an extra touch to the background by using the shapes that are also present on the layout. This is a mockup focused more on the look & feel rather than showing the layout functions and details. For that, I created a simpler mockup that focus more on the design itself:

Now, let’s take a look at some things that we should try to avoid:

1. Poor use of space and proportion

One thing that happens a lot when people present mobile designs is to just insert the screen image on its on. Because we’re used to seeing apps and websites inside the delimitations of our phone screen, the design feels a bit lost when it has no borders or is too big on the computer screen. Think about this: you’re used to seeing a mobile layout in certain proportions, if it suddenly is full screen on your desktop, it becomes a bit hard to know where to look first. If you want to make sure people see a specific detail of your design, use a magnifying glass effect to show that instead. Or if you have more than one screen to present, you can have two or even three side by side on a landscape image – make good use of your space!

2. Lack of aesthetics

You can make the background work to your favor to help your design pop up more. Instead of going with a basic gray, black or white, use a coluor that creates contrast with your design and comes from the colour palette you used on your design. This will keep things on brand and enhance your work. Add an extra touch by using shapes or illustrations from your layout faded in the background.

You can use a mobile phone mockup, a simple outline or just round the screen corners to resemble a phone screen – this will help to give context whereas using just the rectangle shape might not make it 100% clear your showcasing a mobile design and not a card or some sort of item of stationery.

3. Poor use of mockups

Last but not least, if you want to use a mockup, choose the right one. There are plenty of good free ones in places like Mockupworld – so much so it was hard to find a bad example! You can use either a mockup in situ (phone on a table or someone holding it) or a more stylized one on a neutral background (that you can then tweak to match your layout). Either way, make sure they look real and are not over complicated, with too much perspective or special effects (as the example above) – or it will end up taking the focus away from your design. Also take into consideration what you want to show the viewer with this mockup: is it more for them to get a few of your overall design? If yes than you can go with more style and not worry too much about every single detail being visible. But if it’s more to show your thinking behind the layout, go with something simple, no perspective, straight to the point.

Following these tips and dedicating time to create a good presentation of your project will help to take your design to the next level! What else do you think are good practices when presenting a mobile design? Let us know in the comments below!