Yves Desktop

The problem

A design portfolio that describes how someone thinks about interfaces, in paragraphs, is asking to be taken on trust. I would rather the site be the argument.

The risk in that idea is obvious. An interface built to be admired is usually slow, and a portfolio that takes four seconds to show anything has argued the opposite of what it meant to. So the whole thing is built to one rule: nothing loads that the visitor did not ask for, and the page arrives under 10KB of JavaScript.

The lock screen

It opens on a lock screen instead of a home page, and it asks one thing: whether you want sound. Nothing plays until you answer, and the answer is remembered for the rest of the visit. The voice clip is not even fetched unless you say yes.

The unlock button runs away from the cursor. That is a joke, and jokes have to have an exit, so Enter works for anyone who would rather not play.

The desktop

Icons you can drag and rename, a dock, right click menus. The icons remember where you put them and what you called them until you clean up, which resets both.

Nine photographs from Port Harcourt live inside the Images icon in the dock. They fly out when it is pressed, scatter, and can be picked up and dropped back into it.

The windows

Every window is real HTML at build time, hidden with a class rather than fetched. Opening one costs no request. What is fetched on first open is that app’s behaviour, and only that app’s, which is what keeps the desktop itself down to the desktop.

Work is laid out like System Settings, a rail of case studies beside one case study.

About is a bio beside a reel of photographs that loops without a seam.

Services is a set of grouped disclosures, so six offers read as a short list until one is opened.

Feedback scrolls client quotes past, and the game is a game of tic tac toe you are not meant to win.

On a phone

The same desktop rebuilt for touch rather than shrunk. The icons become a grid.

A window stops being a window and becomes a bottom sheet: it rises from the bottom edge over a scrim, covers the dock instead of sitting above it, and swipes down to dismiss. Dragging and resizing are off below 640, because there is nowhere on a phone to drag a window to.

Result

It is the argument rather than a description of one. Someone can drag the icons, open the windows, lose at the game, and judge the work by using it instead of reading about it.

The rule held. The page arrives with 10,135 bytes of JavaScript, which is measured on every build rather than estimated, and each app’s code is fetched the first time its window opens and not before.