Skip to main content
/Documentation

Mobile Mockup

Put your app screenshots on the screen of a 3D phone. Visitors scroll each screenshot inside the display and move between screens with the dock or the arrow keys.

Create a Mobile Mockup
Open the interactive version

What is a Mobile Mockup?

A Mobile Mockup project shows your screenshots on a 3D phone. One image is one screen. Tall screenshots are not shrunk to fit: the visitor scrolls them inside the display, the same way they would scroll the real app. Upload five screenshots and you get five screens the visitor pages through one at a time.

  • One tall screenshot per screen, scrolled inside the phone display
  • Wheel, trackpad, or a vertical drag on the device to scroll the current screen
  • The dock and the arrow keys to move between screens
  • Drag the backdrop to turn the phone, and switch on the dock zoom buttons to read small text
  • Hotspots anywhere on a screenshot, including the parts a visitor has to scroll to reach
  • A live screen: paste a link and the real page loads inside the display
  • A screen counter that also shows the screen title, plus a links dock

Best for

App demos

Show a mobile app screen by screen without sending anyone to an app store

Onboarding flows

One step per screen, in the order a new user would meet them

Prototype reviews

Share design exports with a client and let them scroll each screen in full

Client presentations

Present the mobile build inside a proposal or a case study

Mobile design portfolios

Collect the apps and mobile sites you have designed, one screen each

Responsive views

Show the phone version of a site, next to the desktop one or on its own

Files and limits

  • Images or PDFs. One image is one screen, and each page of a PDF becomes one screen.
  • A PDF can have up to 200 pages and weigh up to 50 MB. Links inside it become hotspots on the screens they were on: a web link opens the page, a link inside the document goes to that screen.
  • Screenshots are fitted to the display width. A very large capture is scaled down in proportion and never cropped, so a full-length capture keeps its whole length.
  • Upload several files at once, or use Import from URL to bring in an image from a web address.
  • Add a live screen to load a real web page in the display instead of a picture of it. The page has to allow being embedded; the editor checks when you add it.
  • Uploads count toward your workspace storage: 50 MB on Free, 10 GB on Pro, 25 GB on Business.

Create a Mobile Mockup

  1. 1. Upload your screenshots

    Open the Content tab and add one full-length capture per screen, in portrait.

    • Let each image be as tall as the screen really is: the width is fitted to the display and the height is what the visitor scrolls
    • Or add a live screen with the link to a page

  2. 2. Order and name the screens

    Drag a screen to move it. Give each one a title: titles show in the screen counter, so keep the counter on if you want them seen.

  3. 3. Add hotspots

    In the Hotspots tab, place clickable spots on a screenshot to open a link, jump to another screen, show a tooltip or open a pop-up. A hotspot is pinned to the whole image, so it scrolls with the part of the screen it belongs to.

  4. 4. Set the device and the screen

    In Settings, under General, pick the phone's colour, tune the screen, and adjust the scrolling.

  5. 5. Share it

    Save, then copy the link or the embed code from the Share tab.

Settings

Everything below is in the editor's Settings tab, listed under the sub-tab where you find it: General, Scene or Camera.

General

Basic info (the project title and description) sits at the top for every type. Below it come the settings for the object itself.

Device

Device color: white keeps the phone's own finish, and any other colour replaces the colour of the body, never the screen.

Screen

Screen background fills the display behind your screenshot, and the bands above and below a short one. Brightness (0.2 to 1.6), contrast (0.5 to 2) and saturation (0 to 2) all start at 1, which is the image exactly as uploaded; saturation 0 shows it in greyscale. Show screen counter, on by default, shows the title and the position, like Pricing · 2 / 5.

Scrolling

Scroll speed (0.25 to 3, 1 by default) is how far one turn of the wheel moves the screenshot. Scroll smoothing (0.02 to 0.5, 0.12 by default) is how quickly it catches up: higher follows the wheel closely, lower glides to a stop.

Scene

What surrounds the object, and the Realism finish over the whole frame.

Background

A solid colour, a gradient or an image of your own (with an optional blur), plus an optional pattern on top.

Realism

Film grain over the frame (0 to 100, 15 by default) and how much of it lands on the screen, still or animated grain, a vignette, the shadow the phone leaves on its surface (with its darkness and softness), and Screen reflection, how much the glass reflects (0 is matte, 40 by default).

Camera

Where the view starts and how much visitors can move it.

Camera

Initial zoom, from 0.5 to 2, though the view never opens so close that the device leaves the frame. Min zoom (0.3 to 1) and Max zoom (1 to 3) limit the dock's zoom buttons, so they appear only while those buttons are on. Horizontal rotation (up to 75 degrees each way) and Vertical tilt (up to 40) aim the camera. Drag to rotate, on by default, lets visitors turn the phone by dragging the backdrop. Reset to default puts the zoom, its limits and both angles back, and leaves Drag to rotate as it is.

Hotspots, menu and sounds

Next to Files, the Content tab has three more sub-tabs: Hotspots, Menu and Sounds.

Hotspots

Hotspots go anywhere on a screenshot. They are pinned to the whole image, so they scroll with the screen, and they stay tappable on a phone, which is how a flow gets walked.

A hotspot can go to another page, open a link, show a tooltip or open a pop-up. How hotspots work

Sounds

Every project type can have background music. Add tracks as MP3, M4A, WAV, OGG or FLAC, up to 20 minutes each. They are compressed to about 1 MB per minute and count toward your workspace storage. You can loop the playlist, set the volume and show a small player next to the dock. Autoplay starts with the visitor's first tap or key press, because browsers block sound until then.

Film it in Studio

Every project type can be filmed in Studio. Open the project's Studio tab, pick camera moves made for this type, and turn the project into a video, a GIF, a still image or a page of its own to share. Studio reads this project's files and settings, so what you set here carries over. Read the Studio docs · See the camera moves for each type

Current limits

  • A PDF page rarely scrolls on a phone: fitted to this display's width, it is still shorter than the display, so it sits centred with bands above and below. Full-length captures are what scroll here.
  • Scrolling to the bottom of a screen does not move to the next one. Changing screen is always a deliberate action.
  • There is one phone model. For a laptop, create a Desktop Mockup instead. There is no tablet.
  • On a live screen, visitors scroll the real page inside the display, and hotspots stay where you put them instead of scrolling with the page.
  • In Studio, a live screen shows as a plain screen background, because the real page can't be recorded.

Tips

  • Export one full-length capture per screen instead of stitching sections together.
  • Capture in portrait: the display is far taller than it is wide, and a landscape image leaves bands above and below.
  • Keep every screenshot at the same width so the content does not change size between screens.
  • Match the screen background to your app background, so a short screenshot does not sit on a white band.
  • Put hotspots where a user would tap in the real app.
  • Lower the scroll speed when a screen is very long.