Drag & Drop Mockups.

June 09, 2020

It's important to make your products feel real. Whether you're pitching an app to your client or trying to get users to download it from a store, professional graphics are key. That's what mockups are for: presenting your product in a realistic environment, stunning potential customers with sleek package designs or simply getting a certain feel across. And now, creating mockups just got even easier! SceneLab allows you to drag and drop your images directly onto customizable areas like smartphone and laptop screens.

This works for image files you drag into your browser or any assets you've already uploaded to SceneLab. Once you're hovering the mockup scene with an image, all element drop-areas will light up. Then simply let go above one of them, and you're done!

Drag and drop mockup workflow for iPhone X app user-interface mockup

Whether you're placing a user-interface, print or package design, it'll look realistically since SceneLab configures lighting and perspective transformations automatically for you.

You can find elements for drag & drop mockup customization by using the realtime search from the left-side bar. Type things like 'display', 'print' or 'mobile' and add anything you like to your scene by clicking on it. Here are a couple elements you might be looking for:

Drag & drop mockup elements collection
Drag & drop mockup elements collection

For things like phone or laptop screens you can just use images in the device's native ratio. SceneLab will scale and center them accordingly.

Try combining your mockups with elements that set the right mood while customizing their color to match your design like below. This makes everything fit together while giving you a unique look.

MacBook and iPhone X app user-interface mockup
MacBook and iPhone X app user-interface mockup

If you'd like to adjust your mockup, just select the corresponding element and open a customization from the selection settings. There you can find the image you just dropped on an element and are able to move it around.

You can also clear out a mockup replacement through the customization section in the selection settings of the element you're customizing.

Print and stationary mockup project with customization settings highlighted
Print and stationary mockup project with customization settings highlighted

After downloading your project via the 'Export' button in the header you're set up with a professional mockup for showcasing your product to clients and customers. Maybe inside a well-crafted presentation?

Nils Mehlhorn

Co-Founder of SceneLab & Software Engineer