Messaging UX mock-up for designers
Show the states of a messaging screen quickly, then drop the images into your portfolio or pitch. Each state gets its own export, labelled as a mock-up.
Try it: start from this sample
Your package is on the way and arrives between 2 and 4.
Can you leave it with the neighbour?
Sure. Which door number is theirs, and should we message you when it is done so you can confirm?
List the states you need to show
A messaging screen is not one picture, it is a set of states. Decide which ones your case study needs: a short reply, a very long message that wraps over several lines, a typing indicator, a read receipt, an unanswered message. The sample includes one long message on purpose, so you can see how a bubble handles wrapping. Make one export per state, name the files in order, and put them side by side.
Think about edge cases too: a message that is a single emoji, a name that is very long, a message with no spaces. Real products meet these every day, and showing them in your portfolio signals that you thought past the happy path.
Choose the look and device to match your design
ChatsRat draws chat interfaces in the general style of familiar apps, which helps when you want a believable context for your own design. Pick the device shape and the light or dark scheme that match your product. Typing indicators and read receipts are available on most looks; check the look you pick before you promise a state in your slides.
Be clear it is a mock-up
A reviewer or client should never mistake a mock-up for a live product or real data. Use invented names, no real order numbers or phone numbers, and add a caption such as Mock-up for illustration. Do not claim the image shows a working app, and do not present sample text as user research.
Tips
- Include one very long message to test how wrapping looks in your layout.
- Show light and dark versions together when your product supports both.
- Use realistic but invented content rather than placeholder text, so the tone is testable.
- Name exported files by state, such as typing or unread, for easy slides.
- Add a small mock-up label in the corner of every image you share.
Questions
Can I mock up my own product's chat screen?
ChatsRat offers its own chat looks, in the style of familiar apps. It is useful for context and for showing states, but it does not replace a design tool for your own interface.
Which states can I show?
Typing indicator and read receipts are available on many looks, and reactions on paid plans. Each look supports a different set, so check the editor before you choose.
Can I use these in a pitch deck?
Yes, labelled as mock-ups with invented content. Do not present them as real customer messages or as proof of results. The plans page lists which export formats you get.
Do exports carry a watermark?
Free exports carry a visible ChatsRat watermark. Paid plans change the visible watermark; the plans page lists how. Every export also has an invisible mark that the verify page can read.
Use it for simulated, labelled content. ChatsRat makes mock-ups and fictional conversations for creators, designers and teachers. Do not use it to pass off a made-up conversation as a real one, to impersonate a real person, or as proof of anything. See the Acceptable Use policy.
About the watermark. Exports on the Free plan carry a visible ChatsRat watermark, and every export carries an invisible mark that the verify page can read. Plans list what changes on paid plans.
ChatsRat is not affiliated with, endorsed by or sponsored by any messaging app. App names on this page describe a style only.