Plus UI Design · Practical guides

Create a screenshot that helps resolve a bug

Pair a clear PNG with a short reproduction note so the next person can understand the problem.

Capture the failing state

Open the relevant page at the size where the problem occurs. Include the control, message or layout relationship that demonstrates the issue. Capture the viewport for responsive bugs or the selected element for a localized problem.

Write the reproduction note

Record the page, the action taken, the expected behavior and what happened instead. Add browser and viewport details when they affect reproduction. A screenshot shows a state; the written steps explain how to reach it.

Review before sharing

Open the downloaded PNG and check that the relevant detail is readable. Remove or obscure account information and unrelated personal content before sharing it. Keep an original privately if a later crop might remove important context.

Example to adapt

Page: Project overview
Steps: Open the menu, then choose Export
Expected: The export panel stays inside the viewport
Observed: Its action button is clipped at a narrow width
Attachment: PNG showing the menu and clipped panel