By admin 
Device mockups for landing pages are one of the most honest tools in product design. A screenshot of your interface inside a realistic iPhone or MacBook answers the visitor’s key question in three seconds: “what is this and what does it look like?” No abstractions — just the product in the real context of a device.
We’ve gathered 10 niche iOS and macOS apps whose landing pages are built entirely around device mockups. Each one has a specific visual technique you can take and apply. And we’ve included a direct link to the right ls.graphics category so you can do the same.
01 — Halide Mark II · halide.cam · Camera · iPhone · iPad
Dark background, the iPhone “flies” into frame with an animation on page load. Bright camera interface screenshots glow against the black — one device filling the entire first screen.
Halide is a professional iPhone camera with manual ISO, shutter, RAW and ProRAW shooting. The landing page is built around a single image: the iPhone’s entrance animation sets the tone for the entire page — you follow the device instead of reading text. Black background, one device, bright screenshots — not a single unnecessary element.
Why it works: the dark background makes the screens literally glow. The mockup’s entrance animation creates a “moment of entry” — the brain automatically locks onto a moving object and gives it focused attention.
Technique: use the mockup’s entrance animation like a theatre curtain — the product walks onto the stage.
? iPhone Mockups on ls.graphics → 686 mockups
02 — Flighty · flightyapp.com · Flight Tracker · iPhone · Watch
Dark landing page, large iPhone front and center. The screen shows a Live Activity with a real-time flight: route, status, time. Next to it, an Apple Watch with the same information on the watch face.
Flighty is a flight tracker Apple called “the best app for travelers.” Apple Design Award Finalist. The landing page is built around Live Activities — a unique iOS feature that Flighty executes better than anyone in the category. iPhone + Watch together isn’t just a visual — it’s a demonstration of competitive advantage right on the hero.
Why it works: two devices in one frame wordlessly communicate “works everywhere you are.” Real flight data builds trust — this isn’t a mockup, it’s a real product.
Technique: show the moment of use that sets you apart from competitors — not the main screen, but your USP.
03 — Structured — Daily Planner · structured.app · Planner · iPhone · iPad · Mac
Light landing page. Several iPhones at different angles — the screens show a colorful daily timeline with color-coded task blocks. The pastel colors of the interface flow seamlessly into the page background.
Structured is a visual day planner, Apple Design Award 2023. Three iPhones show different states of the app: morning, afternoon, evening. One mockup couldn’t convey this — three create the feeling that the product is with you all day long.
Why it works: multiple iPhones at different angles create depth without animation. When the mockup’s colors match the background — the product grows out of the page rather than sitting on top of it.
Technique: if your interface is colorful — use its colors as the palette for your entire landing page.
04 — Darkroom · darkroom.co · Photo Editor · iPhone · iPad · Mac
iPhone and iPad side by side. Both screens show the real editor in action: curves, color correction sliders, before and after photos. Not a “showroom” interface — a genuine working scene.
Darkroom is a professional photo and video editor, Apple Design Award 2020. Both devices show the same photo at different stages of editing. This isn’t “two devices” — it’s “one workflow across different screens.”
Why it works: a real working process on screen answers the question “what’s actually inside?” before the visitor even scrolls. A professional audience sees familiar tools and thinks: “this is serious.”
Technique: fill your mockup with a real working scene, not a polished empty interface.
? iPad Mockups on ls.graphics → 188 mockups
05 — Copilot Money · copilot.money · Finance · iPhone · iPad · Mac
Dark, elegant landing page. iPhone with a spending dashboard front and center, MacBook alongside. The screens show real charts, spending categories, balance. The dark blue color scheme communicates: finance is serious, but beautiful.
Copilot Money is a financial tracker, Apple Design Award Finalist 2024. The dual iPhone + MacBook mockup here isn’t about “works everywhere” — it’s about your financial picture always being close by. The mockup conveys the user’s lifestyle, not a feature list.
Why it works: a dark landing page with elegant charts creates a “premium” feeling for a financial product. Real data on screen turns an abstract “expense tracker” into a concrete picture.
Technique: your landing page color scheme should match the tone of your product.
06 — Fantastical · flexibits.com/fantastical · Calendar · iPhone · iPad · Mac · Watch
Four devices at once: iPhone, iPad, MacBook and Apple Watch — all running Fantastical. Each shows the same event on its own screen.
Fantastical is a cult calendar for the entire Apple ecosystem. Four devices don’t feel overwhelming because each has a clear role in the composition. This is the ultimate version of the “platform mockup” — four arguments simultaneously, not sequentially.
Why it works: when every screen shows the same event in a different view — the visitor instantly understands the product’s ecosystem nature without a single word about it.
Technique: if your product runs on 4 platforms — show all 4 devices, but make sure each one has a role.
07 — Camo for iPad · camo.com/studio/ipad · Webcam · iPad · Mac
MacBook on a desk, iPad on a stand beside it. The Mac screen shows a Zoom call with crystal-clear video from the iPad camera. Two devices = a bridge between the problem and the solution.
Camo turns an iPad into a professional webcam. Apple Design Award Finalist 2023. The dual mockup here isn’t a marketing trick — it’s a literal explanation of how the product works: iPad → Mac, camera → webcam.
Why it works: the visitor grasps the idea in two seconds — without a single word. The fastest way to explain a bridge product.
Technique: if your product connects two devices — show both in one frame.
08 — Raycast for iOS · raycast.com/ios · Productivity · iPhone · Mac
Dark landing page in the style of Raycast itself. iPhone front and center with the AI interface, MacBook alongside showing the desktop version of the same query. One command — two screens.
Raycast is a cult launcher for macOS. The iOS landing page tells existing users: “what you love on Mac is now in your pocket.” iPhone next to Mac isn’t cross-platform — it’s “your workspace just became mobile.”
Why it works: existing users recognize the familiar interface and immediately understand the value of the iOS version. Recognition works faster than any description.
Technique: when launching a mobile version of a desktop product — show both devices with the same content.
09 — Things 3 · culturedcode.com/things · Task Manager · iPhone · iPad · Mac
Light landing page. MacBook in the center, iPhone and iPad on either side — all three running Things. Download buttons placed directly below the mockups. The CTA is built into the composition.
Things 3 is the benchmark of iOS design, multiple Apple Design Awards. The smartest decision: download buttons sit directly beneath the three devices. iPhone → App Store, iPad → App Store, MacBook → Mac App Store. The visitor makes a decision looking at the mockup — the button is already right there.
Why it works: mockup + CTA in one composition — a conversion funnel without scrolling. The entire first screen is one complete conversion block.
Technique: place download buttons within the visible area of the mockup, not after a scroll.
? Laptop Mockup on ls.graphics → 337 mockups
10 — Ivory for Mastodon · tapbots.com/ivory · Social · iPhone · iPad · Mac
Dark landing page, iPhone front and center with the Mastodon feed, iPad alongside with the same timeline. The interface is unmistakably Tapbots — the same visual language as the legendary Tweetbot.
Ivory is a Mastodon client from the studio that made the cult Tweetbot. The landing page uses that trust through the mockup: the familiar style is recognized instantly. You haven’t read the name yet — but you already know whose app this is.
Why it works: a consistent visual style across landing pages builds brand recognition more powerfully than a logo. A new product earns trust automatically.
Technique: develop a signature mockup style for all of your studio’s products.
All 10 breakdowns above share one truth: mockup quality directly affects how a product is perceived. A blurry render, wrong shadows, a “slapped on” screenshot — and trust in the landing page drops instantly. That’s why teams like Halide, Tapbots and Cultured Code only use high-quality resources — like ls.graphics. Here’s what sets them apart from typical free mockups online:
- Ultra-realistic visualization — accurate reflections, correct shadows, precise rendering of device materials. The result is indistinguishable from a studio photograph.
- Organized layers and smart objects — insert your screenshot in one click, perspective and shadows apply automatically.
- Multiple angles — front, three-quarter, side, low angle. Dozens of options for every device.
- Wide range of color options — all current device colors, light and dark scenes, neutral and lifestyle backgrounds.
- Stylish minimalist compositions — clean backgrounds, proper breathing room around the device, zero visual noise.
- Clay versions for bright interfaces — matte, no glare or reflections. The device frames the screen rather than competing with it.
And one more advantage that sets ls.graphics apart from most resources: you can work with mockups online directly in your browser — drop in your screenshot via drag-and-drop, no Photoshop or Figma needed. Hundreds of scenes at ls.graphics/free-mockups are available for free — test the quality before committing to a subscription.
01 — Real content inside — no placeholders Darkroom shows real curves in action. Flighty shows a real flight in Live Activity. Copilot shows real charts. The content inside the mockup is the product’s second argument.
02 — Number of devices = number of platforms One iPhone — one platform. Fantastical shows 4 devices — they have 4 platforms. Don’t add devices for aesthetics: only if it’s true about the product.
03 — CTA next to the mockup, not after a scroll Things 3 places download buttons directly below the three devices. The decision is made while looking at the mockup — the button needs to be there in that moment.
04 — Mockup type depends on interface style Bright, playful UI → clay mockup (no glare). Dark professional → realistic dark. Pastel, warm → light neutral background. There’s no universal answer.
05 — The mockup shows your USP, not your main screen Flighty shows Live Activity, not a flight list. Halide shows a vivid control interface, not a photo gallery. The main screen is obvious. The USP is what’s remembered.
A good device mockup on a landing page isn’t decoration — it’s an argument. In one second, a visitor reads: what the product is, what device it runs on, what it looks like inside. Everything else is text they’ll probably never finish reading.
That’s why the best teams invest time not just in the interface, but in how it looks from the outside — in the right mockup, with the right content on screen, in the right context.
Alex