Mobile mockups: how to make one that sells your app

A mobile mockup is a realistic, static picture of how an app's screens will look: real layout, colors, type, icons and content, often shown inside a phone frame. It's what you show investors, put in a pitch deck or App Store listing, and hand to developers as the target. This guide covers what makes a good mockup and the fastest ways to make one.

Mockup, wireframe or prototype?

The three words get mixed up, but they're different steps:

You don't always need all three. For a small app, going straight from a sentence to a mockup and then to a prototype is common, especially with AI design tools.

Two kinds of mobile mockup

People mean two things by "mobile mockup":

• The screen design itself: the app's screens at device size, like 390 by 844 points for a common iPhone. This is what designers and developers work from.
• A device mockup: those screens placed inside a picture of a phone, for presentations, landing pages and app store images.

Make the first one well and the second is just framing.

What makes a mockup look real

Most mockups look fake for the same few reasons. Fix these and yours will stand out:

1. Real content. Real names, real prices, real dates and realistic photos. "Lorem ipsum" and "John Doe" make any design look like a template.
2. Real device details. The status bar, the safe areas at the top and bottom, and system-sized controls. A tab bar sitting under the home indicator gives it away.
3. One design system. The same buttons, cards, spacing and colors on every screen.
4. A clear focal point on each screen: the balance, the next workout, the order status.
5. Readable text. Body text of 16 points or more and enough contrast, even if the mockup is only for show; people zoom in.

How to make a mobile mockup

Option 1: Design it in Figma

Create a frame at a phone size, set up a layout grid, build components and design each screen. It gives you full control and takes the longest. Our guide to Figma mobile app design walks through the setup.

Option 2: Generate it with AI

Describe the app and let an AI app designer create every screen. With Outclass, one sentence gives you all the main screens in one consistent style, with real content and icons, at the right device size. You can show them inside an iPhone, iPad or MacBook frame on the canvas, edit any detail visually, then copy the screens to Figma or export them as PNG. See how to design an app with AI.

Option 3: Recreate one from a screenshot

If you have a screenshot or a sketch of what you want, AI tools can rebuild it as an editable design. Outclass can also rebuild screens from a screen recording.

Putting screens in a device frame

For presentations and marketing, place the finished screens inside a phone:

• Keep the frame current. An old phone with a home button dates your product.
• Show the screens at real proportions. Never stretch a screenshot to fit a frame.
• Use a few screens, not all of them. Three key screens tell a clearer story than ten.
• Mind the background. A plain or softly colored background keeps attention on the app.

Figma has many free device mockup files in its community, and most presentation tools can place an image inside a phone frame. Export your screens as PNG at 2x or 3x so they stay sharp.

Common questions

Is a mockup the same as a design?

A mockup is a design shown realistically. In practice "app mockup" usually means the finished-looking screens before any code is written.

What size should a mobile mockup be?

Design at the device's point size, such as 390 by 844 for many iPhones, and export at 2x or 3x for sharp images.

Can I turn a mockup into a working app?

A mockup is a blueprint. Developers, or AI app builders, build the app from it. Having the mockup first makes the build faster because the visual decisions are already made.