Good design hasn’t changed with AI

What counts as design: the appearance of a page, its animations, or the experience of using it? John Pham opens with that question, then shows a video full of attractive visuals. The tempting answer is the surface polish. But pretty pixels and elaborate animation alone do not explain whether a product works well for the person using it.

Design is how people experience your product. Everyone who builds and ships it participates, regardless of job title. Trends change quickly, especially around AI, but the people using software still need understandable, dependable interactions. That responsibility extends beyond the main interface to APIs, API error messages, documentation, emails and tweets. Each touchpoint changes how someone experiences the product.

The practical question is how those interactions make a person feel. Do they feel slow and scared, or fast and powerful? As AI-assisted development makes it easier for competitors to ship similar features every day, Pham sees less differentiation in feature parity itself. The experience surrounding those features becomes more consequential.

Pham organizes that experience around four dimensions:

Speed means the interface does not make someone feel held back. Trust means it communicates honestly and gives people the affordances they need to act safely. Accessibility makes the product’s usefulness available to more people. Delight shapes whether they remember and share the experience.

In Pham’s framing, speed earns the first click, trust keeps people around, accessibility expands the addressable market, and delight creates fans. His assignment is to examine an existing product through all four lenses—not merely to add a decorative finish after its features are complete.

The first concrete example is San Francisco Compute Company, where Pham worked at the time of the talk. Customers arrive expecting a cloud GPU provider. They may not expect questions about their Social Security number or address. Pham attributes the country restrictions and information collection to US export-law compliance. Those requests create friction before the customer has used the service; the design problem is to make necessary onboarding feel lighter without concealing what it requires.

The experience begins with a fast arrival from a search result. Pham reports first paint below 300 milliseconds for the onboarding page. He does not supply device, network, cache or measurement conditions. He also invokes roughly 400 milliseconds as a perception threshold, but responsiveness depends on the interaction; that figure should not be treated as a universal boundary for what humans can notice.

The implementation uses server-side rendering, caches as much as possible, and minimizes the bundle and external assets sent to the client. Pham reports 60 FPS or more while browsing the experience. The purpose is continuity: transitions should feel fluid rather than stuttering between states.

Page weight becomes a team concern rather than an occasional optimization project. Pham mentions e-commerce studies connecting smaller pages with revenue improvements, without supplying a specific study or uplift. His actionable suggestion is a scoreboard: record the current performance scores and make reducing them a team objective. The Web Vitals he names are LCP, INP and CLS—Largest Contentful Paint, Interaction to Next Paint and Cumulative Layout Shift. First paint is distinct from LCP; loading, interaction responsiveness and visual stability each need attention.

The onboarding borrows its visual identity from San Francisco, especially the fog. This background is not simply a fixed animation: its density responds to events in the experience. The effect must also work across browsers, look sharp on retina displays, remain fast and accommodate accessibility needs. Those constraints make its construction more interesting than its appearance alone.

The reveal proceeds from a single transparent cloud image:

1. Enlarge it. A close-up of the cloud starts to resemble fog, though it lacks depth and movement.
2. Animate it. Movement helps, but one moving image still looks mechanical.
3. Duplicate it. Stack copies, offset their transforms, and give them different opacities and movement speeds.
4. Control density. Change layer opacity and the number of stacked copies in response to events.

The apparent complexity comes from independently moving layers, not from a complex source asset.

A CSS implementation can express that layering directly. Here, each .fog-layer uses the same image; a data-density change exposes the additional layer and increases opacity. The offsets and durations are illustrative values:

.fog {
  position: relative;
  overflow: hidden;
  --density: 0.25;
}

.fog[data-density="dense"] {
  --density: 0.55;
}

.fog-layer {
  position: absolute;
  inset: -25%;
  pointer-events: none;
  background: url("cloud.png") center / cover no-repeat;
  opacity: calc(var(--density) * var(--alpha, 1));
  animation: drift var(--duration, 30s) linear infinite alternate;
}

.fog-layer:nth-child(2) {
  --alpha: 0.7;
  --duration: 43s;
  --offset: -8%;
  animation-delay: -15s;
}

.fog-layer:nth-child(3) {
  --alpha: 0.5;
  --duration: 57s;
  --offset: 10%;
  display: none;
  animation-delay: -29s;
}

.fog[data-density="dense"] .fog-layer:nth-child(3) {
  display: block;
}

@keyframes drift {
  from {
    transform: translate(-5%, var(--offset, 0%)) scale(1.2);
  }
  to {
    transform: translate(5%, var(--offset, 0%)) scale(1.2);
  }
}

Pham reports that the fog reuses one 14-kilobyte image and requires no third-party JavaScript. Reusing that small asset lets the visual effect coexist with the page’s performance budget.

People often try to rush through onboarding. When required information prevents removing the work, the interface can still remove uncertainty. The initial onboarding message promises three steps taking under a minute. Selecting a business account adds another step, and the interface updates that expectation at the moment of selection. Progress also updates as the customer advances. Pham describes the motivation to finish after reaching the halfway point as an endowment effect: visible investment makes completion more appealing.

At the time of the talk, SF Compute also required an onboarding call for every user. Engineers may hear that requirement as an unwanted sales conversation. The interface addresses the concern explicitly: the call is with engineers to understand and qualify the customer’s needs, not to pitch them. If SF Compute is a poor fit, the team will recommend another provider. That promise gives the required conversation a purpose the customer can evaluate.

Scheduling follows the same principle of reducing unnecessary work. The product proposes a meeting time first. Only when that time does not work does the user need to open the more involved calendar selection. The time should be displayed in the customer’s local time zone and explicitly identified as such, so they do not have to wonder whether a displayed hour means UTC, Eastern time or their own clock.

The animated fog creates an accessibility obligation. Repeated motion can cause severe nausea, and Pham jokes that the number of users who vomit is not a KPI to increase. His implementation pauses animations when the user requests reduced motion. The platform preference does not stop animations automatically; the application must respond to it. For the fog layers above, that response can be expressed in CSS:

@media (prefers-reduced-motion: reduce) {
  .fog-layer {
    animation-play-state: paused;
  }
}

This preserves the background while removing its continuous movement.

Forms introduce a different kind of effort. International addresses can involve many fields—Pham mentions countries with as many as 12—and retyping information is rarely the user’s goal. The HTML autocomplete attribute supplies field meaning to the browser so it can offer autofill. Apply it throughout the form, not only to the address: the desired experience is as close as possible to one action filling the information the browser already knows.

Visual stability matters during those interactions. If a button moves just before a click, the user may activate something else. Avoiding layout shift protects the intended action. Progressive disclosure addresses cognitive load: the onboarding could have been one large form, but dividing it into three steps makes the work easier to approach. Neither choice removes the required information; both make completing it less demanding.

The fundamentals still apply beneath the visual treatment: give every input a label, use semantic HTML, and test with screen readers. A polished animation does not compensate for a form whose controls cannot be understood or operated.

The onboarding’s blues and greens are intentional. Pham describes them as part of an attempt to slow the user’s perception of time and counter the impulse to rush, while openly questioning whether the color psychology behind that choice is proven. The colors, fog and visual metaphors establish a deliberate pace around otherwise administrative work.

The flow ends by revealing a beautiful San Francisco scene. Pham invokes the peak-end bias: a strong final moment can shape how someone remembers the preceding experience. His design intent is for the reveal to leave a positive memory after the effort of onboarding; he does not present a measurement showing that it erases the earlier friction.

The next demonstration is the GPU purchasing page. Buyers choose a GPU type, an environment, a GPU count and a rental duration. Alongside those controls is the GPU habitat, introduced as a live camera feed showing where the GPUs live. Pham extends the joke: the machines get fresh air, sunlight and running water around the clock. As buyers change specifications, the apparent camera points toward the GPUs they are about to purchase.

The implementation reveal is much simpler than the fiction. The habitat uses stacked div elements, a small video and browser-native animation without third-party JavaScript. Pham favors this approach for speed, contrasting it with shaders and canvas; that is his rationale for this effect, not a measured comparison of rendering technologies. He also says the video should not loop for motion accessibility, although the construction demonstration uses a looping clip. The precise playback condition is not specified.

To understand the camera, start with the video itself. Its loop becomes visible in the water, which briefly appears to flow upward—prompting Pham’s suggestion that the habitat might be on a planet with reversed gravity. Next, draw a camera viewport over the scene. Moving the video behind that fixed window creates the apparent pan. An Easter egg exposes the mechanics, and zooming simply enlarges the same video inside the viewport.

The essential CSS is a clipping container plus a transformed video. Changing --pan-x, --pan-y and --zoom changes the framing without changing the media source:

.habitat-viewport {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  --pan-x: 0%;
  --pan-y: 0%;
  --zoom: 1;
}

.habitat-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: center;
  transform:
    translate(var(--pan-x), var(--pan-y))
    scale(var(--zoom));
}

.habitat-viewport[data-view="close-up"] {
  --pan-x: -12%;
  --pan-y: 8%;
  --zoom: 1.6;
}

These illustrative framing values expose the mechanism: the window stays fixed while the image behind it moves and scales.

The purchasing form supports completion through small, practical decisions:

• Defaults and recovery: Start with sensible configurations for common needs, then guide users out of mistakes so they can continue the purchase.
• Familiar units: Accept duration in days, hours or weeks. Someone who thinks in weeks should not have to perform a conversion before entering a rental period.
• Relevant feedback: Avoid loading states where possible. When a wait is necessary, the demonstration uses a GPU tensor-core visual that its technical audience may recognize and enjoy.

These details reduce the work around the purchase while keeping feedback connected to what the customer is doing.

Care also affects the transaction itself. Pham argues that helping customers can be worth more over time than maximizing immediate revenue. In his example, a buyer requests eight GPUs for one day, and the product finds a better price. SF Compute earns less on that sell order, while the customer saves money. The immediate tradeoff is explicit; the long-term revenue benefit is Pham’s rationale, with no measured uplift supplied.

The closing lightning round returns first to visual stability: if an application needs a banner, displaying it should not shift the interface underneath the user. Pham then moves to a nested menu he built at Vercel.

A naive nested menu changes the active item whenever the pointer enters another row. That creates a familiar failure: the user moves diagonally toward an open submenu, crosses a neighboring row on the way, and accidentally switches the submenu before reaching it. The interface effectively demands a precise route—across first, then down—instead of the direct movement the person intended.

The fix is a prediction cone. On hover, the menu establishes a region corresponding to the likely path toward the open submenu. Pointer movement through that region is interpreted in the context of the destination, rather than immediately treated as a request to switch rows. The user can move naturally into the submenu without tracing an awkward, exact path. The final demonstration makes the design principle tangible: a small implementation detail can remove a motor task the interface should never have imposed.