# Framing the shot

> Decide the size, crop and satellite of a product illustration before anything is built, so it reads as a product shot and not a screenshot in a box.

Module: Product demos · Level: beginner · 7 min · https://school.agents.org.in/media/faux-ui/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.

*[Interactive demo: How much of the window runs off the stage decides what it reads as.]*

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:

| Where it sits | Design size |
|---|---|
| Hero beside a block of copy | about 720 × 340 |
| Full-width homepage hero | 900 to 1100 wide |
| Feature card | about 400 × 300 |
| Anything with a demo in it | never under about 320 wide |

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.

*(A lone card in a 680px column wants 500 to 560 wide, so its text reads at a real size.)*

## The rules of the crop

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

  **Step: One hero, at most two satellites.** The main window is the hero. A satellite (A smaller second object in a product shot (a receipt, a phone, a detail card) that carries the point. It usually straddles the main window's edge, about half outside) 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.

  **Step: Bleed 10 to 40 percent.** Let the hero bleed (Letting a window run off the edge of its frame on purpose, so it reads as a crop of a bigger product rather than a small picture floating in space) off the stage. It fills at least two thirds of the width and runs off an edge by a deliberate fraction, not a sliver.

  **Step: 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.

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

  **Step: One gutter.** Pick one gutter (The one distance between the main window and the frame's edge. Every other edge in the picture either sits that same distance in, or runs well past the edge), 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 (A tinted rectangle behind a window that makes it look like it is floating on a mat. On a white or dark page it is almost always a mistake: the page is the ground), 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.

  **Before (avoid):**

The whole app window at 55%, centered on a pale blue rounded rectangle, 40px of margin on every side. Its text renders at 7px.

  **After (do this):**

The window pinned 24px from the top, running a quarter off the right and bottom. A detail card straddles its left edge. Text at 11 to 13px.

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:

| Layout | What it looks like | Use it for |
|---|---|---|
| Corner bleed | Inset about 10% top and left, 15 to 35% past right and bottom | A hero beside copy |
| Pinned, bottom bleed | Inset on three sides, off the bottom | A feature card or bento tile |
| Satellite focus | Window cropped hard, a large satellite carries the story | A notification, receipt or diff |
| Device pair | Desktop window, a phone straddling its right edge | A story across devices |
| Close-up | One control at 1.3 to 1.6×, its chrome included | A card about one setting |
| Tilted stack | Three cards at −6°, 4°, −2°, only the top one with words | Paper things: receipts, tickets |

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 (A second composition of a demo for a phone column (about 358px wide): cropped closer, satellite dropped or stacked, text still at real size. Not the desktop picture shrunk) 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.

**Frame it before you build it (paste into your agent):**

```text
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.
```

**Check yourself:** Your agent's hero shows the whole app window, centered on a pale tinted rectangle with 40px of margin on every side. What is the best fix?

- [ ] Add a stronger shadow so it pops off the plate
- [x] Remove the plate, pin the window near the top-left and let 15–35% of it run off the right and bottom
- [ ] Tilt the window 8 degrees for energy
- [ ] Shrink the window further so the margins look more generous

*Why:* A whole window floating on a plate is the boxed failure. The page is the ground; a deliberate bleed and a crop to the panel make it read as a product shot.

## In the skill

- https://school.agents.org.in/skill/faux-ui/product-shot-framing.md