Landing
The page someone arrives on after a friend's link.
10 ways to show desktop screens.
A reference for presenting desktop and web designs the way the work deserves — borrowed shapes from the agency canon (Apple's product reveals, Collins' device dioramas, Instrument's case-study scrolls, Fantasy's horizontal pans) reduced to ten reusable blocks. Placeholder gradients stand in for screenshots so the motion logic reads on its own.
Scroll through. Note which patterns earn their seconds and which feel like hot air. Once you pick a handful we'll promote them into project-template.html and the admin's sections library so any new case can opt in per-project — same as the mobile blocks today.
01 · Zoom-out hero (Apple)
Start small. Land big.
A single browser pinned centre. As the section scrolls past, it scales from a thumbnail to fill the viewport. Used for the moment a design first arrives — the page builds anticipation, then hands the screen the room it needs.
02 · Sticky frame · scroll captions
One frame. Four moments.
Browser sticks centre while a column of captions scrolls past. The screen inside cross-fades to whichever caption is closest to the viewport's mid-line. Best for narrative case copy where each beat earns its own state.
-
State 01 · empty
The first time you sign in.
An empty surface that promises something, not an empty surface that apologises for itself.
-
State 02 · onboarded
Three minutes in.
Defaults that feel chosen. The first view earns the second.
-
State 03 · daily
The state you live in.
Density goes up. Hierarchy holds. The moments you reach for stay reachable.
-
State 04 · loaded
The power-user view.
Three months later. The chrome has stepped back; the work is the page.
03 · Multi-device diorama (Collins)
Across every surface, one system.
Desktop, laptop, tablet, phone — staged together in soft 3D so the system reads at a glance. Slight tilt + cast shadow + a low-key drift on mouse-move keeps the composition from feeling like a stock screenshot.
04 · Tilted unflatten (Apple)
Hand it to the reader.
Browser arrives rotated back into 3D, like a slide a designer is sliding across a desk. As the section enters the viewport it levels out to the front plane. A small move; a big shift in attention.
05 · Scroll-snap rail
A guided tour, page by page.
Native CSS scroll-snap, no JavaScript. Five 16:10 browser frames in a horizontal rail; trackpad swipe or arrow keys move between. The desktop equivalent of the mobile screens block.
Browse
The first decision. Filter without the filters being the page.
Detail
Where commitment forms. Photography big; UI quiet.
Checkout
The line between intent and purchase. Fewest possible fields.
Confirmation
The first thing a customer sees as a customer.
06 · Hover preview grid (Instrument)
A whole site, six cells.
A tight grid of small browser thumbnails. Hover any cell and it grows over the others, swapping through three states of that screen. Touch surfaces fall back to a steady image.
07 · Annotated callouts
One page, slowed down.
A single browser at hero size with up to six numbered pins. Each pin pairs with a one-line note in the column on the right, swappable for accessibility. The desktop sibling of the mobile callouts pattern.
- 1
Header dwarfs the chrome — the product is the page.
- 2
Price reads as a fact, not a feature. No box, no badge.
- 3
Photography sits in editorial ratios, not e-commerce ratios.
- 4
Variants live as text. The system trusts the type to do the work.
- 5
The first review is in the fold. Trust without a "trust" section.
- 6
Add-to-cart never moves. Even three tabs deep, it sits in the same spot.
08 · Horizontal pan (Fantasy / Active Theory)
A long landing page, sideways.
The section pins for two viewports of vertical scroll. While it's pinned, a 3-screen-wide page slides horizontally past a fixed browser frame. The reader stays put; the design moves.
09 · Stacked cards scroll (Linear)
Each screen sits on the last.
Browser frames stack as the page scrolls; each new card sticks at the top edge while the next card slides up underneath, leaving the previous one slightly inset. Reads like flipping through a stack of design boards.
The first frame sits in place until the second one rises over it.
The second one stops at the same top edge — an inch or so inset.
Three to five cards is the sweet spot before the rhythm gets thick.
By the fourth, the deck has the weight of a whole portfolio.
10 · Step-through prototype
Click through the flow.
A single browser frame with a row of pill buttons under it. Each button cross-fades to a different screen state — the click-driven cousin of the sticky-pin block. Best for flows where the reader controls the pace.
Ten ways. The honest count is probably four — most case studies need two desktop blocks, three at a stretch. Mark the ones that earn the room and we'll fold them into the project template + admin sections library next.
← Back to studio