Plan the relationship between idea and image
What it is
Before selecting screenshots, list what the article needs to explain. For each claim, indicate what visual evidence would help the reader. The visual plan can include the idea, a candidate timestamp, essential detail, and the predicted position.
Why learn
Capturing first and writing later often leads to a collection of loosely connected images. Starting from the didactic function prevents inserting a dashboard just because it’s colorful. Sometimes an author-made table or diagram explains better.
Key concepts
Idea: the review found two mistakes.
Visual: screen showing the test results.
Detail: two failing cases and the summary.
Position: after explaining the evaluation criteria.
✓ Do it like this
Write the function before choosing the frame.
✗ Avoid this mistake
Use the same frame for different claims without an explanation.
Practice before revealing
Which visual explains the difference between a rule and a judgment best?
View commented response
A side-by-side comparison with exact calculation and editorial choice. A decorative photo of a computer does not show that difference.
Choose stable, complete frames
What it is
A good screenshot must make sense as a static image. Check whether a transition has finished, whether the cursor doesn’t cover the data, and whether important labels are present. Go back a few moments in the source when needed to recover context.
Why learn
The article reader didn’t see the seconds before. A box without a title or a number without a unit requires guessing. This is one of the problems shown in the video comparison: screenshots that belong to the source but don’t work when used in isolation.
Key concepts
Fail: half the table is still off-screen.
Fail: score is visible, but without the metric name.
Pass: result + label + sufficient context.
From concept to action
- Transition: identify the initial condition.
- Stable frame: apply the described decision.
- Complete detail: check the effect in the example.
- Approved capture: record the output evidence.
✓ Do it like this
Compare at least two frames when the moment is ambiguous.
✗ Avoid this mistake
Accept a crop only because it was taken from the correct video.
Practice before revealing
Does an isolated “94” number explain a quality improvement?
View commented response
No. You need to show or explain the metric, the scale, and the relationship with the previous evaluation. The number alone could mean anything.
Crop to explain without distorting
What it is
A good crop increases relevant information and preserves context. A highlight can guide the eye, but it shouldn’t hide values that would change interpretation. For sensitive material, use opaque redaction when removal is necessary and authorized.
Why learn
Excessive zoom removes titles; insufficient zoom makes the text unreadable. The choice must be verified at the actual reading size. Never declare that privacy is “resolved” just because a blur effect was applied.
Key concepts
Crop checklist
[ ] The central data is readable.
[ ] The title or caption explains the metric.
[ ] No essential label was cut off.
[ ] Sensitive fields do not appear in the final output.
✓ Do it like this
Inspect the final file after exporting the image.
✗ Avoid this mistake
Mistaking a visual highlight for proof that the content is correct.
Practice before revealing
If removing the header makes the number ambiguous, what’s the solution?
View commented response
Enlarge the crop or add a faithful and sufficient caption. If the caption has to invent context that the source does not provide, the image is not usable.
Place images next to the explanation
What it is
The sequence of text and image builds understanding. The reader should find the image near the statement it supports. Four screenshots grouped at the end can indicate that the insertion failed or that the review didn’t check the final order.
Why learn
The video shows this problem by comparing outputs: having the images in the document isn’t enough. Verification must go through the assembled article, including the space between blocks and the link to the paragraphs.
Key concepts
Good: explain the three filters → show the three filters.
Bad: explain the report → show the initial screen.
Bad: finish the article with captures without a caption.
✓ Do it like this
Read the final sequence like someone who hasn’t seen the source.
✗ Avoid this mistake
Approve by counting the inserted files.
Practice before revealing
A relevant image appears three sections after the paragraph. What should you review?
View commented response
Reposition the image near the paragraph or reorganize the textual sequence. The correction is layout-related; it does not require regenerating the entire article.
Inspect desktop, mobile, and interface states
What it is
A page needs to be viewed rendered to confirm geometry, contrast, and readability. Open different widths, test keyboard navigation, and check expanded states, themes, and panels. Screenshots are evidence of specific states, not of all possibilities.
Why learn
Reading the code doesn’t necessarily reveal cut-off text, focus hidden by the menu, or a button covered by another element. Review must link visual observations to concrete actions and preserve content while correcting the layout.
Key concepts
Step 1: open the page and the first section.
Step 2: reduce to mobile width.
Step 3: use Tab and open the panel.
Step 4: check text, focus, and scrolling.
From concept to action
- Desktop: identify the initial condition.
- Mobile: apply the decision described.
- Keyboard + themes: check the effect in the example.
- Bug logging: record the output evidence.
✓ Do it like this
Record the width, page, and state of the observed defect.
✗ Avoid this mistake
Call one complete accessibility audit screenshot.
Practice before revealing
A table is wide on mobile. How do you preserve readability?
View commented response
Use a container with clearly identified horizontal scrolling, keeping the page within the screen. Don’t shrink the font until it becomes illegible, and don’t hide important columns.
Turn a visual defect into a testable rule
What it is
Useful visual feedback identifies the location, symptom, and effect. “The second image cut off the title and became incomprehensible” is more actionable than “the images looked bad”. The new rule should address the cause and feed into the next review.
Why learn
If you only fix the final file, the process may repeat the same error in the next run. Update the selection instruction, add a test case, and check whether the change also works in a different video.
Key concepts
Defect: frame captured during a transition.
Rule: choose complete, stable visual states.
Test: video with long animation in the main explanation.
Acceptance: no frame depends on content that’s still hidden.
✓ Do it like this
Preserve good examples as a counter-proof of correctness.
✗ Avoid this mistake
Prohibit all motion frames because of one case.
Practice before revealing
Write feedback for four standalone images at the end.
View commented response
“The last four captures have no clear link to the paragraphs. Link each one to a statement, reposition it, and check the rendered sequence. Remove the ones that add no explanation.”
Check your understanding
A frame was captured mid-animation and cut off the conclusion. What’s the smallest correction?
What you take from this module
Build a visual plan and inspect the rendered output.
- Plan the relationship between idea and image.
- Choose stable, complete frames.
- Crop to explain without distorting.
- Place images next to the explanation.
- Inspect desktop, mobile, and UI states.
- Turn a visual defect into a testable rule.
Next action: save the exercise in your learning lab and record what still needs review.