Week 21 · Aesthetic Movements

The Icon That Looks Back

Move your pointer across the right-hand icon. Something in it tracks you — a highlight, sliding across a surface that does not exist. That is the whole revival in one gesture.

Predict

Set side by side, which is true of the flat icon and the liquid-glass one above?

The Material Bench

One Icon, Four Ways to Spend

Apple’s own WWDC session names three layers a real material needs: highlight, shadow, and illumination. This bench adds the two the wider craft scene treats separately — refraction at the edge, and thickness underneath — and prices all four the same way: as a fixed number of blur pixels spent on a surface of a given size.

Push any slider up and the icon above gets more convincing. Watch what happens to the three tiny copies underneath it instead — they are rendered live, at 24, 32 and 48 pixels, the actual sizes an icon ships at. The same blur that reads as depth at 200px is a fixed number of pixels wide regardless of how small the icon gets, so it eats a bigger and bigger share of a shrinking canvas. That is the whole mechanism. Nothing about it is staged.

The material bench

Tune the glass, then look at what survives small

24px

32px

48px

Tactility: 43; Modelled — see below
Legibility · 128px: 96
Legibility · 24px: 69
Legibility · 32px: 77
Legibility · 48px: 85

Tactility is modelled: 0.3×specular + 0.3×refraction + 0.2×caustic + 0.2×thickness — a spend total, independent of size. Legibility is also modelled, from the same numbers the icon is actually drawn with: each layer’s blur is a fixed number of real pixels, so legibility = 100 × (1 − 1.6 × total blur px / render size px). A flat icon scores 100 at every size, because it spends nothing.

Refraction40

NoneBent

Specular size45

NoneBlown out

Caustic intensity35

NoneBright

Thickness50

ThinDeep

Both readouts are modelled, not sampled pixels — the formulas are printed under the bench. They are built from the exact blur values the SVG filters above are drawn with, so the number and the picture can never disagree with each other.

Part I

A Lineage With Dates on It

The design press likes to tell this story as a single pendulum swing. The dossier for this week gives a more exact chain, seven dated links long, each with a name attached.

Year

2013Nov 3 2025

2013 — iOS 7 flattens the platform — flat color fields, hairline type, no texture (Week 15)

“Hyper-tactile” is the craft scene’s own word for what sits at the far end of that chain: rendering, not illustration. An illustrated icon depicts a material — a drawn highlight in a fixed place, doing nothing. A rendered one simulates one: a highlight that is the output of a light position and a surface, and moves when either changes, the way the icon above moved under your pointer. Michael Flarup’s term for the whole turn is Diamorph — “dimensional design that embraces depth, light, texture, and hierarchy — native to the screen, expressive by intent” — a deliberate break from the older skeuomorphism this curriculum covers in Week 14, which copied a physical object rather than simulating a fictional material with its own consistent optics.

Apple’s Liquid Glass is the platform-scale version of the same idea: not a texture applied to a layer, but “a translucent material [that] combines the optical qualities of glass with a fluidity only Apple can achieve, as it transforms depending on your content or context” (Alan Dye, June 2025). The material is defined once, centrally, and every control inherits it — which is also exactly how the bench above works: one set of four numbers, one icon, no per-component tuning.

Part II

Which Cue Is Actually Doing the Work

Cheap glassmorphism — a white rectangle, 10% opacity, one backdrop blur — fails for a specific, documented reason: human material perception runs on optical regularities, and a static wash carries none of them.

Turn each cue off below, one at a time, on the same icon. Highlight and refraction are the two the dossier’s own psychology section (6.2) names as the cues perception actually trusts, because they are dynamic — they respond to something. Shadow and thickness are closer to decoration: real, but fakeable with a flat overlay in a way a moving highlight is not.

Which cue sells glass

Move a pointer across the icon

Reads as glass: 100; Modelled — see below
Highlight: On
Refraction: On
Shadow: On

Modelled at 35 highlight + 30 refraction + 15 shadow + 20 thickness, weighted toward the two cues Part 6.2 of the dossier names as the ones perception actually trusts — dynamic highlight and edge refraction — over the two that a static image can fake with a flat overlay.

Part III

Two Home Screens

Every case study this week ends the same way: someone spent dimensionality, and the market told them whether they spent it well.

macOS Big Sur, June 2020, is the first platform-sanctioned attempt — and its reception was mixed for a specific, reusable reason. Creative Bloq’s coverage collected designer complaints that some icons read as “flat designs with a drop shadow slapped on”, because Apple shipped fully rendered icons next to barely-extruded flat ones in the same dock. The lesson was never the direction; it was internal consistency. Five years later, Apple’s own Nielsen Norman Group audit of Liquid Glass (October 2025) found the opposite failure at platform scale: Raluca Budiu’s verdict was that Apple “prioritizes spectacle over usability”, citing text-on-text illegibility and shrinking touch targets — which is why iOS 26.1 shipped a Clear / Tinted toggle five months later. Drag below to feel the milder, home-screen-scale version of the same trade.

Airbnb’s May 2025 Lava icons — animated, Pixar-inspired, described in coverage as a house door popping open on tap — are the clearest example of the cost side of this trade: the format needed a proprietary video codec and three platform SDKs. That production detail comes from a third-party technical guide, not an Airbnb engineering post, and is graded accordingly below.

Part IV

Where Detail Actually Collapses

One fixed, deliberately over-spent material, scrubbed across the seven sizes an app icon ships at on a real platform — 16 to 128 pixels.

Watch the legibility number, not just the picture. It does not fall in a straight line — most of the damage happens in the last two or three steps down, exactly where an icon actually lives on a phone.

Size roulette

Same material, seven sizes

Render size: 64px
Legibility: 81; Modelled

Render size

16px128px

64px

Challenge · Tune the spend

Open

Get legibility at 24px to 55 or above, without letting the material drop below 55 tactility — the point where it stops reading as glass at all.

24px

96px

Legibility · 24px: 49; Target ≥ 55
Tactility: 70; Target ≥ 55

Refraction70

Specular size70

Caustic intensity70

Thickness70

Thickness buys tactility cheaply. Specular and caustic cost the most legibility per point.

Insight

Materiality is a rendering budget spent per pixel.

A 128-pixel icon has roughly seventeen times the pixel budget of a 24-pixel one to spend on the same highlight, the same refracted edge, the same soft caustic. The material does not change between those two renders — only how many pixels it has to be convincing in does. Apple’s own five-month public correction, ending in a user-facing intensity toggle, is that same arithmetic playing out at the scale of an entire operating system: a fixed amount of dimensionality, priced differently depending on how much screen it is asked to live on. Small pixels cannot afford what large ones can.

Mental model

Whenever a material effect — glass, depth, a rendered highlight — looks right in the design file,

look for the smallest size that effect will actually ship at, and price it there first,

because the blur, the highlight, the refracted edge all cost a fixed number of pixels, and a fixed cost is a bigger fraction of a smaller canvas.

Tomorrowrender your own icon or card at its real smallest size before approving it at its biggest one — the review that matters happens at 24px, not on the pitch deck.

End of experience

← Back to the constellation

The Icon That Looks Back

One Icon, Four Ways to Spend

A Lineage With Dates on It

Which Cue Is Actually Doing the Work

Two Home Screens

Where Detail Actually Collapses

Where this idea goes next

The Icon That Looks Back

One Icon, Four Ways to Spend

A Lineage With Dates on It

Which Cue Is Actually Doing the Work

Two Home Screens

Where Detail Actually Collapses