Framing the shot

Drag the slider. At zero, the inbox sits whole in the middle of a tinted rectangle, small, with even margins all round. Around a quarter, it suddenly looks like a photo of a real product.

That is framing, and it is decided before any of the screen is built. A crop needs nothing past the crop, and the crop sets how big the type has to be.

Size first

Design at the size the picture will be seen, and show it at that size. Rough starting points:

Small formats crop harder. A 400px card holds a third of a dashboard at full size, not all of it at a third of the size. Shrinking the whole window is how the "boxed" failure happens.

The rules of the crop

Benji Taylor's framing rules, condensed. Each one is a decision you can check by eye:

1. One hero, at most two satellites

   The main window is the hero. A satellite is a smaller second object that carries the point: a receipt, a phone, a detail card. Two satellites are two different kinds and sizes, never two equal cards stacked on one edge.

2. Bleed 10 to 40 percent

   Let the hero bleed off the stage. It fills at least two thirds of the width and runs off an edge by a deliberate fraction, not a sliver.

3. Crop only filler

   The action, the result, what the cursor touches and every real word stay whole. A placeholder button the crop would slice is removed, not sliced.

4. Satellites straddle

   A satellite sits about half outside the hero's edge, over chrome or margin, never over the content the story is about.

5. One gutter

   Pick one gutter, say 24px, from the hero's inset. Every other edge sits a full gutter in or runs well past. Crossing an edge by a few pixels reads as a mistake.

Try the satellite options in the demo above. "Over the content" hides the very rows the story is about; that is why the rule exists.

The page is the ground

On a white page, the stage is transparent. No plate, the tinted mat a window floats on, behind the device. A whole window centered with air on four sides floats; bleed it off two edges or fill the slot instead.

A few more framing rules worth handing to an agent:

• A window keeps its device's shape. Whole, it is wider than tall (1.25:1 or more). Fix a bad fit by cropping, never by squashing.
• What the story opens stays in frame. A menu or popover needs a gutter of room on every frame, so place the trigger where it has space.
• No dead corners: no empty quarter of the stage, at rest or anywhere in the loop.
• Start flat and frontal. Depth comes from shadow, overlap and scale. A tilt has to beat the straight version at its real size.

A layout to start from

You rarely need to invent a composition. A few recipes cover most briefs:

Agents told to "run the window off the edge" usually nudge it a few pixels past, the worst of both. Copy an example that does it properly, then check the final crop.

Phones get their own design

A demo that might sit in a phone column ships a compact design at about 358px wide: cropped closer, the satellite dropped or stacked, the action and result still whole. A desktop picture scaled down passes every overflow check while its 13px text renders at 8px.

Phones inside a shot have rules too. A satellite phone starts at 40% of the window's visible width and at least 220px; let it run off rather than shrink it. A notification stays at true iOS size, and you size the phone around the banner, never the other way.

Before writing any code for this feature card, give me the framing plan:
- Design size (it sits in a 400px card, shown at 1:1).
- Layout: pinned, bottom bleed. The window runs 15–35% off the right and bottom.
- One satellite (the "Assigned to Maya" card) straddling the window's left edge, over the sidebar, never over the rows.
- One 24px gutter, measured in the final crop. No plate behind the window.
- Crop only filler: the selected row, the assignee and every real word stay whole.
- A compact design at 358 wide, cropped closer, text still 11–13px.
Then build it and show me both widths.