Phone UI
How to Create Phone Notification and Lock Screen Mockups
Write notification copy that survives truncation, stack notifications to tell a story, and design lock screens for product decks and film.
By The Mocknex team · Published · Updated · 7 min read
Notifications are some of the smallest, most-read pieces of copy in any product — and in film and video, a single notification lighting up a lock screen can carry a whole scene. This guide covers both: writing notification copy you can test in a mockup, and designing lock screens that tell a story. Tools used: the notification generator and the lock screen generator.
Anatomy of a notification
- App identity: an icon (or, for messages, the sender’s photo with a small app badge) and the app name.
- Title: bold, usually a sender name or headline.
- Body: a few lines of text, truncated with an ellipsis when it runs long.
- Time: “now”, “2m ago” or a clock time.
- Grouping: several notifications from one app stack into a pile with a “more notifications” line.
Writing copy that survives truncation
You rarely get more than a few lines, and on a lock screen people glance for a second. Put the important information first and assume the end might be cut off.
- ✓Lead with the specific thing (“Your fern is thirsty”) rather than a category (“Reminder”).
- ✓Keep the title short — names or 3–6 word headlines.
- ✓One action per notification. If there are two, send the most important.
- ✓Avoid repeating the app name in the title; it’s already shown.
- ✓Test the longest realistic version (long names, translations) in the mockup.
iPhone vs Android
iPhone-style notifications are rounded translucent cards with the title and time on one line. Android-style cards put the app name and time in a small row at the top, with the title and text below and an optional image on the right. Android lock screens often use a large two-line clock. Both generators switch between the two with one control, so you can check copy on each platform.
Telling a story with a lock screen
A lock screen gives you three storytelling tools at once:
- The clock: 11:58 PM feels different from 3:15 PM. Match it to the scene.
- The sender: “Unknown”, “Mum” or “Boss” tells the audience how to feel before they read the message.
- The pile-up: stacked notifications and missed calls show urgency without a single extra word. See also the missed call generator.
For product teams
Mockups are a fast way to review push copy with stakeholders before it ships: build each variant, export them side by side with the Presentation preset, and discuss. Because everything runs in the browser, unreleased copy never leaves your device. Use your own app name and brand colour for the tile.