How To Place UI Design In A Mockup (YouTube tutorial)

You are currently viewing How To Place UI Design In A Mockup (YouTube tutorial)

I frequently get questions about how to place UI design in a mockup. These mockups are of phones, tablets, and computers. In this article, you’ll find a YouTube tutorial video and a how-to guide in text. It’s really super easy to do.

Placing designs in mockups makes it look like the apps and products are real, even though they’re just UI design concepts. I think they’re a great way to showcase your work. I included a section of free UI mockup resources, where you can download mockup files for free.

You may also be interested in: The 6 Best UX/UI Design Tools for 2021

Tutorial Video on How to Place UI Design in a Mockup (Photoshop)

Step-by-step guide

  1. Google “Free Mockup” + [the device]
    For example: “Free Mockup iPhone X” or “Free Mockup Macbook Pro”
  2. I usually go to Mockupworld (free mockup resources) and just download one I think looks nice.
  3. Open up the file in your program (E.g. Photoshop or Sketch)
  4. In the mockup file, you’ll find a layer called “Edit me” or “Change me”.
  5. Open the layer and change the content to your UI design.
  6. Save the “Edit me”/”Change me” layer.
    Note! You have to save the edited layer! I forget this sometimes and nothing will happen.
  7. Return to the main file (move out of the layer you edited).
  8. Save and export the file in the format you want. (JPEG, JPG, or PNG works well for displaying UI design on the web or on social media).
How to place ui design in a mockup
Example of my blog UI design in a mockup

The Best Free UI mockup resources

You can get mockups to use for free from many sites. Here are some of the ones I use:

Hope you guys liked it and that it was helpful!

Support me on YouTube!
I’m new to making YouTube videos and I would be so thankful for any support. So subscribe and like my video (if you want to)! I will be sharing more UI design tutorials as well as other design videos.

Want to see more?

Here are a few of my other related articles about UI design and YouTube tutorials.

This Post Has 4 Comments

Leave a Reply