Design studio
Pages, and the versions of them
Visual studies only. Nothing here is wired to the database, nothing is translated, and every study is throwaway: a version can be deleted by deleting its folder. Each one carries the same invented Bang Tao condo, so what differs between them is design and nothing else.
Property page
One condo unit in a Bang Tao project. Same content, same demo data, three different answers to it.
- V1 — Marketplace/design/property/v1
- Aimed at
- Someone comparing four tabs from a Google result, most likely on a phone, who wants the price and the beach distance before anything else.
- Optimises for
- Speed to the price and familiarity. A dense content column with a sticky action card, compact type, most sections collapsed, the gallery immediately under the title — the pattern every visitor already knows from Booking and Airbnb.
- Sacrifices
- The sense of an expensive property. Nothing on the page says this unit is worth more than the one below it in the search results.
- V2 — Editorial/design/property/v2
- Aimed at
- A long-stay renter or a buyer's agent deciding whether to trust us at all, reading rather than scanning.
- Optimises for
- Trust and the long stay. A full-bleed hero, a serif at display size, a numbered narrative with real whitespace between sections, and an action bar that appears on scroll instead of sitting in a rail.
- Sacrifices
- Density and speed to the facts. Someone who only wants the nightly rate has to scroll or wait for the bar.
- V3 — Mobile flow/design/property/v3
- Aimed at
- The 70% arriving on a phone from an ad, who will never read a long page in order.
- Optimises for
- Navigating a long page on a small screen. Self-contained section cards, sticky anchor tabs that track the scroll, and the action permanently in a bottom bar; the desktop view is the same feed in two columns.
- Sacrifices
- The sense of a composed desktop page — on a wide screen it reads as a feed, not as a designed spread.
Two things to know before you judge them
- The studio has no application chrome: no header, no left menu, no footer, no width the shell imposes. Every study fills the browser window, so what you measure is the design and nothing else. Real pages are untouched — the studio is a separate route tree.
- The studies are light-theme only by instruction. They paint their own colours and ignore the app’s dark mode — the one exception is the map inside the Location block, which is a real kit component and follows the app theme.