UI Design Tip #42: Match Screenshot Detail to Display Size for Readability

1 Requirement Goal

The task: inside a small feature-intro card, show one pipeline run so readers can clearly identify issue #2841, version v1.8.0, and the associated changes.

2 Initial Implementation

The first version simply shrank the entire pipeline page to fit the card, preserving the overall layout and all content.

Figure 1: Full-page thumbnail of the pipeline page.

3 Problem Analysis

3.1 Main Problem

After shrinking, the layout is visible but text and controls become too small. If the goal is to let readers recognize #2841, v1.8.0, and change associations, keeping only the outline is insufficient.

Increasing source resolution reduces blur but cannot make excessive information naturally fit a tiny area.

3.2 Design Principles

First decide what the image must explain, then choose the material scope and display size. Concrete operations suit cropped detail views; overall layout suits overviews; structural relationships suit simplified diagrams that are explicitly labeled as schematic.

Icons also have target sizes. Vector graphics don't blur when enlarged, but details and stroke proportions drawn for small sizes may not suit large display; conversely, complex logos scaled down too far become unrecognizable.

4 Optimization Implementation

4.1 Goal Trade-offs

Because this example must let readers read the pipeline result and its associations, the design keeps the service name, #2841, v1.8.0, and change objects, while reducing other regions.

If the goal changed to introducing the whole platform, an overview would be kept, but readers would not be expected to read every field from the small image.

4.2 Material Organization

Show concrete result → keep key region → verify fields at final width
Show overall layout → use overview → do not require reading tiny content
Explain structural relationship → use simplified diagram → mark it as schematic

Alternatively, capture a dedicated screenshot in a narrower real page to reduce later scaling. Provide the original high-resolution version on demand.

4.3 Size Verification

View the result at the final card width (or mobile body width) and confirm that key fields are legible without relying on editor zoom.

For icons shown large, choose assets whose detail level matches the size; when only a small icon is needed, use the surrounding shape to organize space rather than scaling the graphic itself indefinitely.

5 Effect Acceptance

Figure 2: Frame organized around the specific result and associations to be explained.

This example compares display scope and information density; judgment cannot rely on raw pixel count alone.

☐ Key fields for this explanation are recognizable at final width.

☐ Screenshot scope matches the display purpose.

☐ Simplified schematics are clearly distinguished from real-data screenshots.

6 Application & Practice

For the same pipeline, produce three versions at final size: full-page thumbnail, key-region crop, and simplified structure diagram. Each version states exactly one display goal.

Deliver the three final-size images, remove details that do not serve their respective goals, and annotate what the reader should take away from each.