Chats
How to Create iPhone Text Message Mockups
Blue vs green bubbles, when “Delivered” and “Read” appear, where timestamps go, and how to export at true iPhone resolution.
By The Mocknex team · Published · Updated · 7 min read
iPhone text conversations follow a few strict rules that most mockups break. iMessage hides timestamps unless there’s a gap, shows only one read receipt per conversation, and uses bubble colour to tell you what kind of message it is. Here’s how to get each of those right with the iMessage-style generator.
Blue vs green bubbles
On an iPhone, blue outgoing bubbles mean the message went through Apple’s iMessage service. Green bubbles mean it was sent as a regular SMS or MMS — usually because the other person isn’t using iMessage. Incoming messages are always grey regardless of type.
In the generator, switch Style between “iMessage style” and “SMS (green bubbles)”. The input placeholder changes too: “iMessage” vs “Text Message”. Use green when your story needs an Android-using character, or when a message fails to deliver as iMessage.
How “Delivered” and “Read” work
iPhone Messages shows a receipt under only your most recent message. Older messages never show one. The receipt reads either “Delivered”, or “Read” followed by a time (if the other person has read receipts turned on). The generator follows the same rule — set the receipt on your last message and it appears under that bubble only.
| What you want to show | Set on your last message |
|---|---|
| They haven’t opened it | Receipt: Delivered |
| They read it and haven’t replied | Receipt: Read + a time |
| Read receipts are off | Receipt: Delivered (that’s all iPhone shows) |
| It’s still sending | Receipt: Sending |
Where timestamps go
Unlike WhatsApp, iMessage doesn’t print a time on every bubble. Times appear as centred separators — “Today 7:58 PM” — when a conversation starts or after a gap. Use the Date separator message type for these, with the day in the first word (it’s shown in bold).
Tapback reactions (heart, thumbs up, “haha”, and so on) sit on a corner of the bubble. One or two per screen is plenty.
Export sizes that match a real iPhone
The editor renders the screen at iPhone “points” — 393 points wide for a 6.1-inch iPhone. Exporting at 3× gives an image 1179 pixels wide, which matches a screenshot from that phone. Choose the iPhone Pro Max size under Settings → Screen size for a 1290-pixel-wide export.
- For social posts: use the Instagram Post (1080 × 1350) or TikTok / Reels / Shorts (1080 × 1920) presets, which centre the phone on a background.
- For slides: the Presentation preset gives a 1920 × 1080 image with padding.
- For video overlays: export the phone screenshot with a transparent background and scale it in your editor.
Quick checklist
- Receipt only under your newest message.
- Times in separators, not on every bubble.
- Status bar clock close to the last separator time.
- Contact photo centred at the top with the name underneath.
- Blue for iMessage, green for SMS — never both from the same sender without a reason.
Pair the conversation with an iPhone notification or a lock screen to show the message arriving.