SignalScam awareness
Pinned, then everything else
Signal moves pinned chats into their own group under a heading rather than marking them where they sit, which no other list in the roster does.
Use this templateSignal mockups
Fake Signal chat list & inbox screenshot generator
Build Signal's inbox \u2014 pinned conversations lifted into their own group under a heading, previews that run to two lines where other apps cut them at one, and a search field where the others put filter chips.
Open the Signal editorFree · no account · PNG and video
Start from a Signal example
Each one opens in the editor as an editable, fictional scene — names, timings and interface details already set. Change a word, or change everything.
SignalGroup chats
Group threads, two lines each
Signal lets the preview run to two lines where the others cut it at one, so the rows are taller and fewer fit. Easiest way to show the difference.
Use this templateSignalScam awareness
A list you would want encrypted
Short, unnamed, nothing pinned. Built for security training, where the point is that the list itself gives almost nothing away.
Use this templateHow to make a Signal mockup
Start from an example
The examples above cover it: a list with pinned chats, a deliberately sparse one for security training, and group threads with long two-line previews.
Write the rows
A name, the last message and a time. Let the previews run long — this is the list that shows them.
Pin what belongs at the top
The PINNED toggle moves a row into the Pinned group rather than badging it in place.
Set unread counts
A number draws the blue badge on the row and adds to the red badge on the Chats tab.
Export
PNG at 1x free, up to 3x on Pro, device frame optional, and onto a sized canvas if it is going into a video.
How the Signal interface is put together
Our Signal skin is rebuilt from the real interface in code rather than traced from a screenshot, so the details that make it recognisable survive at export resolution. Here is what those details actually are.
Pinned chats MOVE, they do not get a badge
The one thing that separates this list from every other one here. WhatsApp and Telegram mark a pinned chat with a small pin and leave it where it sits; Signal lifts it out, puts it under a Pinned heading at the top, and draws no pin at all. Toggle PINNED on a row and watch it move.
The preview runs to TWO lines
Where WhatsApp and Telegram truncate at one. That single decision makes a Signal row visibly taller, fits fewer of them on screen, and is why the three inboxes read differently before you have noticed anything else about them.
A search field, not chips
Full width, grey and rounded, directly under the header. Signal has no filters on this screen — the tabs at the bottom are the only division.
Your own avatar sits in the header
Top left, small and round, next to a centred title. It is your profile, not a chat, and no other list in this product puts it there.
Three tabs, and the badges are RED
Chats, Calls and Stories. The per-row unread badge is blue and the tab badge is red — the only app in the roster that uses two badge colours at once, and both are drawn.
A chat with no picture falls back to initials
Not every row has a photo, and Note to Self never does. A row without one draws initials on a flat colour, which is what the app does and what keeps a realistic list from looking broken.
What people use Signal mockups for
- Security and privacy training
- Journalism and source-protection explainers
- Product screenshots and app-store artwork
- Support and how-to documentation
- Storyboards for video and adverts
- Design portfolios and case studies
Questions about Signal mockups
- Why do pinned chats move to the top here but not on WhatsApp?
- Because that is what each app does. Signal groups them under a Pinned heading and reorders the list; WhatsApp and Telegram leave the row in place and draw a pin on it. Both are correct for their own app, and drawing Signal's list the other way is an immediate tell.
- Can I write a long preview?
- Yes, and you should — Signal shows two lines of it. A preview that would be cut off in another app is exactly what makes this list look like Signal.
- What about a chat with no picture?
- Leave the picture empty and the row falls back to initials on a flat colour, which is what the app does. Note to Self in the first example is drawn that way.
- Does dark mode work?
- Yes. The switch moves the whole screen onto Signal's dark surface, search field and headings included.
- Can I make it look like a real person is messaging me?
- No, and our terms prohibit it. Invented messages attributed to a real named person are impersonation. Parody, teaching, fiction and design work are fine — the examples here use invented people.
- Why is there no muted marker?
- Because it has not been checked. Signal has muted chats and the reference screenshot does not contain one, so rather than guessing at the glyph and its position, the control is hidden and the gap is written down. It ships when somebody has looked at the real screen.
- Can I export it at 9:16?
- Yes. The download dialog places the mockup on a 9:16, 4:5, 1:1 or 16:9 canvas with a background and margin, and PNG exports at 1x free, or up to 3x on Pro.
Use these responsibly
Everything made here is simulated. SocialMock has no connection to Signal and cannot read, send or alter a real message. Do not use a mockup to impersonate anyone, pass it off as a genuine screenshot, or present it as evidence in any legal, workplace or academic matter — see our Acceptable Use policy. For general information about legal risk, read is it legal to fake a screenshot? If you publish somewhere a viewer might mistake it for real, switch on the “Simulated” label before exporting.
Related generators
Browse all 36 appsBuild your Signal mockup now
Click straight into the preview and type. Export when you are done — free at 1×, up to 3× on Pro.
Open the Signal editor