Most people building a WhatsApp mockup open a chat generator and never leave it, because the conversation is the natural place to stage a story. But a whole class of scenes does not live in the chat at all — it lives in the Calls tab. Who called whom, how many times, how long they spoke, and who was ignored. That information sits in a list, and the list has its own grammar, which is why call-log mockups so often look wrong even when every colour is borrowed correctly from the chat view.
This guide covers the WhatsApp Calls screen and how to build one that reads as real, using the free WhatsApp call log generator. It renders locally, exports a high-resolution PNG, and uploads nothing.
A call log is a list, not a conversation
The Calls tab shares WhatsApp's colour system with the chat view, which is the trap. Because the greens match, it is easy to assume the layout matches too, and to render the screen as a stack of bubbles with a phone icon bolted on. That is the single most common mistake. A call log has no bubbles, no left and right sides, and no message text at all. It is a vertical list of rows, and each row is a small block of information arranged in columns.
In the real app each row carries a 46px avatar on the left, a bold caller name, a second line with the call direction and the time, and a green phone icon on the right. That right-side icon is a small but reliable marker: it is present on every row, and its absence is one of the first things a regular user notices.
Reading the arrows
The direction arrows are the heart of the screen, and they follow a strict colour and angle grammar. Real users read them without thinking, which is exactly why a log that gets them wrong feels off before you can articulate why.
| Element | Detail |
|---|---|
| Outgoing call | Green arrow pointing up and to the right |
| Incoming call | Green arrow pointing down and to the left |
| Missed call | Red arrow pointing down and to the left (#ea4335) |
| Missed caller name | Renders in the same red as the arrow, exactly like the real app |
| Row layout | 46px avatar, bold name, direction and time on the second line, green phone icon on the right |
| Bottom tab bar | Status / Calls / Chats / Communities / Settings, Calls highlighted in green (#00a884) |
The important consequence of the missed-call rule is that red does double duty. A missed call turns both the arrow and the caller's name red. Generators that recolour only the arrow, or that leave the name black, produce a row that is close but not right — and because missed calls are usually the emotional centre of a scene, that is the row you least want to get wrong.
The five-tab bottom bar
Every genuine screenshot of the Calls screen includes the bottom navigation bar, because it is part of the screen. It has five tabs — Status, Calls, Chats, Communities and Settings — and Calls is highlighted in green, matching the accent. Three of those names are worth memorising if you are rebuilding the screen by hand, because moving or renaming them is a giveaway: the order is fixed and the labels are short.
This is where a lot of otherwise-decent mockups fall down. A generator that cannot render the bar leaves it out, and the resulting screenshot looks cropped rather than authentic. The eye reads the missing bar as an unfinished screen, even when it is only a sliver at the bottom. If your composition genuinely needs the crop, take it deliberately and consistently — do not simply omit the bar and hope.
Durations, and how a log looks lived-in
Each row can carry an optional duration note — 12 min, for example — rendered as small grey text under the direction line. The real app shows durations for completed calls, and mixing them is what makes a log feel used rather than generated. A column where every completed call happens to last exactly the same number of minutes is one of the quieter tells, because real call lengths are irregular.
The same instinct applies to the overall shape of the log. Real usage is messy: a couple of calls to one person, a long gap, a missed call at an odd hour, a video call that nobody picked up. Three to six entries is the range where a call log looks naturally populated; beyond that you are committing to getting many more rows consistent. Direction should vary, and at least one entry should be missed — a log where every call went through reads as staged.
Building it step by step
- Keep the header as Calls. The page ships with the header pre-filled as
Calls, which is what the real tab is called. Leave it unless your scene genuinely needs something else. - Add the callers. Each participant in the editor is one caller, with a name and an avatar. Three to six entries is the believable range.
- Set each call. Give every row a caller, a direction — Outgoing, Incoming or Missed — and a time. Add optional duration notes such as
12 minfor completed calls, and use the Video toggle for camera entries, which render with a camera icon and a “video call” label. - Vary the directions. Mix incoming and outgoing, and include one or two missed calls so the arrow grammar is doing its job.
- Export. Choose 1x, 2x or 3x and download the PNG. The phone frame is on by default on this page; untick it if you are compositing the screenshot into a larger design.
The tells that give a fake call log away
- Call rows drawn as chat bubbles with a phone icon attached.
- Missing bottom tab bar — the cropped-screen look.
- Every call pointing the same direction, or no missed calls at all.
- A missed call whose arrow is red but whose caller name stayed black, instead of both turning red.
- Identical durations on every completed call.
- No green phone icon on the right of each row.
- A header that says something other than
Calls, or a Calls tab that is not highlighted in the bottom bar.
Trade-offs: missed calls, video entries and the frame
Missed calls are the most expressive element on the screen and the easiest to overuse. One or two make a log feel human; a column of five red arrows turns the scene into something that reads as a plot device rather than a phone. If the story is “they called me and I did not answer”, a single missed call at an awkward hour carries more weight than a wall of them.
Video entries are a smaller trade-off. The camera icon and the “video call” label are accurate, but they draw attention, so use them where the medium matters to the scene. And the phone frame is a composition choice rather than a realism one: a genuine screenshot is a rectangle of screen with no phone around it, so leave the frame off when the mockup stands alone and turn it on only when the device silhouette helps a thumbnail or slide.
One more practical note: this screen only makes sense as itself. If you drift back into message-style layout, you are building the chat view, and the WhatsApp chat generator is the right tool for that, with its own bubble and tick grammar. The two screens share colours but nothing else, and mixing them — a phone icon inside a bubble, a duration inside a chat row — is what produces a screenshot that looks like WhatsApp and behaves like nothing.
Consent, context and the call log
A call log is a useful prop for storytelling where the evidence is who contacted whom and when: a missing-person scene, a “they would not stop calling” beat, an HR or safeguarding training module, a comedy sketch about dodging calls. All of that is legitimate creative and educational use, and the information density of a call log is exactly what makes it useful on screen. Fabricating a call log to deceive someone, harass a person or produce false evidence is a different matter entirely, and no amount of interface accuracy changes that. Our Acceptable Use Policy draws the line, and we keep no templates for fake bank, government, medical or legal notices. If you want to study the arrow grammar on complete scenes first, the call log examples gallery renders them live.