Haint Blue Realty
Design study for a real estate team whose homepage opens under a porch ceiling.
A design study. Haint Blue Realty is a made-up business, so the copy, prices and details are invented to show how the design works.
Overview
Project overview
A made-up three-agent real estate team in Wilmington. Buyers come to see what's for sale and sellers come to ask what their house is worth, so the page opens under a haint-blue porch ceiling and looks out at six listings with filters that work.
Approach
How I approached it
This is a design study for a real estate team I made up. Two kinds of people land on a small brokerage’s site: buyers who want to see what’s for sale, and sellers who want to know what their house is worth. The page puts the buyers first, with six listings right under the headline, and gives sellers their own section further down with the steps of a sale and a form that asks for a written price opinion.
The look comes from haint blue, the pale blue that porch ceilings in the Lowcountry are painted. The top of the page is that ceiling: beadboard lines drawn in CSS and tilted in perspective, so they bunch together toward a green front beam. You read the headline from under it, and the listing photos sit below like the view from the porch. A short band of heart pine floorboards, built the same way, closes the listings.
The filters do real work. You can cap the price, set a minimum number of bedrooms, or show only houses with a porch, and the count updates as you go. If nothing matches, the page shows which filter to loosen and how many homes that brings back. I left out automated price estimates and market statistics on purpose: for a made-up business they would be invented numbers about a real city.
What was delivered
Deliverables
- A porch ceiling for the top of the page: haint-blue beadboard drawn in CSS and tilted in perspective, with the headline set under the front beam
- Six listings in a three-column grid, each with a large photo, the price set big, and beds, baths, square feet and year built on one line
- Filters that work in the browser: a price ceiling, a minimum number of bedrooms and a porch toggle, with a live count and an empty state that offers the change that brings homes back
- A selling section with the four steps of a sale and the listing fee in plain numbers
- A price-opinion request form that checks every field and promises a written opinion within two business days
Key decisions
- Haint blue, the pale blue that Lowcountry porch ceilings are painted, fills the top of the page as beadboard seen from below
- Gloock, a warm high-contrast serif, sets the headings and every price, with Public Sans for everything else
- A strip of heart pine floorboards closes the listings, so the houses sit between a porch ceiling and a porch floor