How numbered pins make feedback clear
Annotating a screenshot means dropping numbered pins on the exact spots that need work and writing one note per pin, so a client can say “2: swap this photo” instead of “the picture near the top, on the right, under the menu”.
A few words that come up when you mark up a screen for a client or a developer.
- Pin
- A numbered blue circle placed on one spot of the image. The number links the spot to its note, so nobody has to describe where something is.
- Note
- One short instruction per pin: what is wrong and, ideally, what it should be instead. One change per note keeps the list easy to tick off.
- Arrow
- A line with a head that points from one place to another, useful for “move this up to here” or to point at something small.
- Numbered list
- All notes in pin order as plain text. Paste it into an email, a chat or a task tool, and keep the image beside it.
- Annotated PNG
- A copy of the screenshot with the pins and arrows drawn in, at full size. The original file is never changed.
- Round
- One pass of feedback on one version of the work. A marked-up screenshot is often the whole of round 1 for a small change.
Sample pinned screenshots
Made-up examples of what a pinned screenshot turns into when you copy the notes. Each row is one screenshot from a typical review, with its pins and the numbered text you would paste into a message.
| Example screenshot | Pins | Copied notes |
|---|---|---|
| Homepage hero, round 1 | 3 | 1. Logo is too small on mobile · 2. Swap the stock photo for the team shot · 3. Button should say “Book a call” |
| Pricing page, round 2 | 1 | 1. Annual price is missing the currency |
| App onboarding screen | 2 | 1. Progress dots are hard to see · 2. Typo: “recieve” |
| Email header proof | 4 | 1. Use the dark logo · 2. Date line should be bigger · 3. Remove the second divider · 4. Check the link colour |
| Bug on checkout | 1 | 1. Total overlaps the coupon field at 390 px |
Where a marked-up screenshot falls short
A screenshot is frozen in time
It shows the page at one width, on one device, at one moment. If the issue only appears on hover, on a phone or after scrolling, say so in the note.
Notes travel separately from the image
Once the PNG and the text are sent, they can drift apart in a long email thread. Keep them in the same message and refer to pins by number.
No record of who agreed
A marked-up image shows what was asked for, not whether it was done or approved. For sign-off you still need a reply in writing or a proper approval step.
Very large images are scaled down
Screens longer than 4,096 pixels on one side are reduced first so the page stays fast on phones. Full-page captures of long sites can lose fine detail.
Nothing is saved for you
Pins live only in this browser tab. Download the PNG and copy the notes before you close it, because reloading clears everything.
Questions about marking up screenshots
Is my screenshot uploaded to a server?
No. The image is opened by your browser and the pins are drawn on your own device. Nothing leaves your computer or phone unless you send the downloaded file yourself.
How do I move or delete a pin?
Drag a pin to move it. To delete one, use the cross next to its note, or select the pin and press Delete. The pins after it are renumbered so the list never has gaps.
Can I use it without a mouse?
Yes. Use “Add a pin” in the notes list, then Tab to the pin on the image and move it with the arrow keys. Hold Shift for bigger steps, and press Enter to jump to its note.
What should a good note say?
Say what you see and what you want instead, in one short line: “Heading wraps onto three lines on mobile; keep it to two.” Avoid “fix this” on its own, because the person doing the work then has to guess.
Can I mark up a screenshot on my phone?
Yes. Pick a screenshot from your photos and tap to drop pins. The notes list sits under the image, and the downloaded PNG lands in your files or downloads.
Can my client use this to send me feedback?
They can, and it beats a vague email. Send them the link, ask them to pin each change and to paste the numbered notes into their reply with the PNG attached.
When are arrows better than pins?
Use an arrow when the note is about movement or direction, such as “move this logo up to the menu bar”, or when the thing you mean is too small to cover with a pin. For everything else a numbered pin is clearer, because it has a note attached.