Real estate website prompt, in values

Somebody on an estate agency site already knows the town and roughly the budget. What they do not know is which four of the sixty listings are worth opening. The page exists to narrow sixty to four, and a photograph of a house nobody is selling does not help.

So the first screen is a search field, three quick filters and a 50px line. The photographs start in the second block, at one aspect ratio, with a count on each card, because a listing with four images and one with thirty two are different products.

Short verdict: ratio 1.25 from a 13px root, everything on a twelve point grid, #1F4E79 under white at 8.66:1, and four facts in a fixed order on every card. The Thanor library publishes designs written that way.

Search first, house second#

A property site is a photo grid with a filter attached, and both halves have rules that no other page type in this set needs.

The grid first. Every listing photograph is 3:2 landscape, the same ratio on every card and in every gallery. A square crop removes the ceiling or the floor from a room, and the proportions of a room are most of what a buyer is judging. Mixed ratios across a grid make identical houses look unequal.

• Photograph count on the card, as a small badge over the bottom left corner. It is the single most useful number on a listing card and almost nobody prints it.
• The first image is the exterior, always, or the main room when there is no exterior. A close up of a tap as the lead image is a listing the reader skips.
• No hover zoom on a card photograph. Zooming crops detail out of a frame the buyer is trying to read.

Then the filter. One text input for area or postcode, three chips for the filters that actually get used, and a link to everything else. Not eleven fields, not a price slider as the primary control: sliders are imprecise with a mouse and worse with a thumb, so price is two numeric inputs with placeholders showing the real range.

The list and the map are one view, not two pages. Hovering a card highlights its pin, clicking a pin scrolls the card into view, and the map never takes the whole screen on a phone, where it competes with scrolling for the same gesture. The hero specification covers the copy driven case; this is the opposite, a first screen that is almost entirely a control.

A twelve point grid and a four fact card#

Ratio 1.25, the major third, from a 13px root. A card has to read at a glance, which means four levels inside one 320px tile and no more.

Price at step 3, address at 2, facts at 1, meta at 0: four levels descending, in that vertical order on every card, the price in tabular figures so a column aligns.

Spacing is a twelve point grid: 12, 24, 36, 48, 72, 96, 144. Twelve columns, 24px gutter, 24px card padding, section padding 96px, 72px, 48px. Every value is a multiple of twelve, so nothing sits half a step off.

Ink on the filter surface measures 15.96:1, and the accent doubles as the map pin colour, which keeps pins and buttons reading as the same system.

Three curves for a page made of photographs#

Three curves, and the shortest of them matters most because it runs on every interaction a buyer makes.

--ease-filter:   cubic-bezier(0.3, 0, 0.5, 1);    /* 140ms */
--ease-photo:    cubic-bezier(0.25, 0.46, 0.45, 0.94); /* 460ms */
--ease-lightbox: cubic-bezier(0.21, 0.93, 0.28, 1);   /* 340ms */

--ease-filter at 140ms runs the chips, the numeric inputs and the result count above the grid. Filtering has to feel instant, and above roughly 200ms a filter starts to feel like a request rather than a control. The result count updates as text, never as a spinner.

--ease-photo at 460ms advances a gallery, as a horizontal translate of the strip rather than a fade, so the direction of travel tells the buyer which way they are moving through a house. --ease-lightbox at 340ms opens the full screen view, scaling from the thumbnail's own position.

Four things do not move:

• Cards on the grid. No entrance animation, no stagger, because a buyer scrolling a list of sixty is scanning and a stagger makes the scan wait.
• The map. Pins appear at full opacity, and the map never eases to a new centre when a card is hovered.
• The price on a card. No counting, no highlight pulse.
• The photo count badge, which is information rather than decoration.

Six blocks, and what a card must carry#

Six blocks. The order follows how a buyer works rather than how an agency introduces itself.

1. Search. One input, three chips, two price fields, a 50px line above. No carousel behind it.
2. Featured listings. Six cards, 3:2, the four facts, the photo count.
3. The paired view. List and map together, hover linked, 72px of section padding above.
4. Areas. Text links with a listing count beside each: Kingsdown (14). A count turns a navigation list into information.
5. Valuation or enquiry. One block, three fields, a named response time.
6. The team. Last, with real photographs at 3:2, names and direct numbers.

Block 4 is the one most sites render as a grid of area photographs, which costs half a screen and tells the reader nothing. A text list with counts is faster to scan, faster to load, and answers the question the grid was pretending to.

Block 6 goes last and still matters, because the enquiry that follows a listing is addressed to a person. Real photographs, not stock, and a direct number rather than a shared inbox. That preference for the checkable over the polished is the same instinct behind a site that looks professional rather than expensive.

Block 3 is the block that decides whether the site gets used twice. A list beside a live map, with the hover link running both ways, lets a buyer ask the one question a list alone cannot answer: is this street the one I want. Two separate pages, a map page and a list page, ask them to hold the answer in their head instead.

The verdict on a property brief#

Search in the first screen, 3:2 throughout, a photo count on every card, four facts in a fixed order, list and map hover linked, and no entrance animation on the grid. Six decisions, and every one of them is about reading speed rather than taste. Thanor sells them already written.

The brief to paste#

Build an estate agency site.

TYPE: ratio 1.25 from a 13px root: 13, 16, 20, 25, 32, 40, 50. Card meta
13/18, the four facts 16/24, address 20/27, price 25/30 weight 600 in
tabular figures, section headings 40/46, search line 50/54.

SPACE: 12, 24, 36, 48, 72, 96, 144. Twelve column grid, 24px gutter, 24px
card padding, section padding 96 / 72 / 48. Every value a multiple of 12.

COLOUR: page #FFFFFF, surface #F2F4F6, ink #0F1A24, muted #5A6B7A, accent
#1F4E79 under white text, also the map pin colour.

CARD: 3:2 photograph, exterior first, photo count badge bottom left, then
address, price, and a strip of four facts reading price, bedrooms,
bathrooms, floor area, in that order on every card. No hover zoom.

SEARCH: one text input, three filter chips, two numeric price inputs with
the real range as placeholders, live result count as text. No slider, no
spinner, no carousel behind the field.

MOTION: filters cubic-bezier(0.3, 0, 0.5, 1) 140ms. Gallery advance as a
horizontal translate, cubic-bezier(0.25, 0.46, 0.45, 0.94) 460ms.
Lightbox cubic-bezier(0.21, 0.93, 0.28, 1) 340ms from the thumbnail position.
Cards, pins, prices and badges never animate.

BLOCKS: search / six featured listings / list and map paired and hover
linked / areas as text links with counts / valuation form, three fields,
named response time / the team with real 3:2 photographs and direct
numbers.

Swap the town and the palette, keep the card. Browse the Thanor library for designs where the grid and the filter are already specified.