DEV Community

George 301 Summerson
George 301 Summerson

Posted on • Originally published at

Creating iPhone Mockup

Creating iPhone Mockup with Customers in Mind

When you use the iPhone mockup, you don't just pick a favorite. You have to use the appropriate one for the digital product and for your target audience.

A mockup is an important design tool for everything. All designers use it. Airplane makers present a mockup before investors decide they are willing to pay for its actual creation. Mockups are also used in military when they test ammunition and other warfare materials, they use a mockup. In the case of technology, the mockup is used to show the audience how the actual digital product will look like when it is actually done. It will give the audience a chance to be able to critique the product without the designer actually creating the product.

In the digital world, one of the most famous kinds of mockup is the iPhone mockup. It makes sense that it is popular because you can do almost anything with an iPhone. It is no longer just a device for texting and calling. You can also send or read e-mails through an iPhone, listen to music, watch movies, read a book and play games. You can also create digital products and even make a full-length film using the awesome iPhone.

iPhone mockup

If you want great quality free mockups, you can head on to UX Planet for an exciting lineup. The website presents at least 20 frames of different mockups in both free PSD and Sketch format. With the dozens of different designs, there is surely one or two that will be perfect for your digital presentation.

Showcasing your app design through the iPhone mockup is just perfect because people use most of the applications on their phones. They swipe right and left via Tinder or any other dating apps on their phones. People are updated on the lives of other people through social media, which they check every so often on their phones. They order food on their phones and even shop through that awesome mobile device.

So if you are creating an app, or at least designing one, demonstrate it through the iPhone mockup. It is extremely easy to create:

  1. Browse through hundreds of mockups on the internet. Choose reputable websites in order to make sure that your mockup is of high quality and resolution. A bad mockup could cost you a commissioned job. You have to really think about the product and its implications and target market in order to choose the best mockup for the presentation.
  2. Download the PSD mockup of your choice.
  3. Open the mockup in either Adobe Photoshop or Sketch.
  4. Know the layers you will be working with so you will know which part of the layer you can insert your content.
  5. Drag and drop your content to the Smart layer.
  6. Save the mockup in PSD file and you are done!

Know your target market

This is very important because this will determine the kind of mockup you will need for the presentation. For example, you want to showcase a proposed mobile game, the iPhone X clay mockup seems like the right choice. The clay mockup is a minimalist. There are not a lot of effects that could compete with your design. Using the clay mockup will really highlight your creativity rather than the creativity of the mockup. You have to let the audience focus on your design because it is important in games. Stunning still images are important in captivating the audience with your game plan.

You may also use frames in order to really showcase the real world. Find a mockup that utilizes real people holding an iPhone with the screen visible to the public. You place your content or game still on the screen of the iPhone, of course. You have to choose the right frame in order to tell the right story. In the case of a gaming app, you should find a mockup where the person is holding the iPhone XS horizontally and with both hands. That is the usual stance for a person playing a game on their mobile phone.

For a fitness app, you might want to use a frame of a person in fitness gear holding the iPhone as if checking their health stats. Most of the mockup frames don’t use the whole body of a person, since that is not the highlight of the mockup—the screen that showcases the design is. So don’t worry about using mockups that use people as accessories because the screen is still the highlight.

This is why it is important to know your target market. It will help you conceive an idea better and it will help you find the most appropriate iPhone mockup at the earliest time possible.

Flat designs

For photo-heavy digital products like a proposed e-commerce website, flat designs would work better. Like the clay mockup, a flat design is minimalist. There is minimal use of stylistic elements or none at all. Photo-based products are already heavy materials and styles would render it more so. Doing away with styles would also allow people or the audience to just focus on the photos, which are the main properties of this kind of digital product.

You may also use mockups with tableaus for e-commerce. You can use a frame of a person on their couch browsing on an iPhone. This type of mockup is also referred to as photorealistic iPhone because it puts the iPhone in a real-world setting. The significance of a person on a couch is that it tells people that your digital output allows people to just relax on their couches. So they can shop for things while relaxing, or they can order food without standing up.

That is how you elevate your digital product! You put a story in it that people will relate to. People love to be able to do things while just relaxing. So the mockup will definitely resonate with them.


The iPhone is also vital in branding. When you are showcasing a branding campaign, one of your showcase materials has to be the stationery mockup. This kind of mockup features most office stationeries like the official paper with letterhead, notepad, notebook, envelope, among others. There are also calling cards and sometimes a mug. All the stuff will carry the logo of the brand. In some cases, the iPhone is included in the frame. The iPhone will have the logo as its wallpaper.

The iPhone’s inclusion is important because people do most of their work on their iPhone anyway—from communication through call, text and e-mail to actually creating products through the amazing features of this Apple device.

Top comments (0)