Showing a garden that does not exist yet.

A landscape designer sells a result that does not exist when the contract is signed: the garden will look good in two years. Before-and-after photos are often missing, especially when a business is starting out. And requests arrive vague: “we would like some greenery in the courtyard”, with no area, no orientation, no budget.

The website therefore had to make the design work visible, set the frame (method, timing, price ranges) and prepare the consultation visit with the right questions.

• A drawn site plan across the full width of the home page: deck, lawn, borders, preserved tree, path, vegetable beds, rainwater tank. Annotations appear on arrival; the legend isolates each element on hover.
• Four services with drawn pictograms: design, planting, decks and paths, maintenance.
• The four seasons illustrated, each with its plant palette: the garden lives all year, and the website shows it.
• Three typical projects at three scales (45, 30 and 380 m²), each with its mini plan, duration and budget.
• A four-step process, from consultation visit to one-year follow-up, and indicative prices in a table.
• A guided consultation request: type of space, area, orientation, wishes, budget, timing, photos. Summary before sending.
• Garden images: the courtyard photographed next to its plan, three illustrated projects, close-ups of planting and materials.
• Service area as a schematic map of the surrounding towns, plus guarantees and contact details.

Drawing and photography together. The plan shows the intention, the photo shows the result: the Nansouty courtyard is presented both ways, and each project pairs its image with its plan. The illustrations (plan, seasons, pictograms, map) are vector; the garden images were created for the demonstration and give way to the client’s real photos.

A palette from the ground. Sage, moss, fern, earth, sand: the colours come from the garden’s materials. A light grain over the whole page recalls drafting paper.

Assertive typography. Heavy Manrope for headings, spaced small capitals for labels: a studio tone, distinct from the craft register of the previous case study.

Motion only where useful. The plan annotations appear once; everything else responds to the visitor’s actions. Reduced-motion preferences are respected.

Local search. Trade and city in the title and description, neighbourhoods named in the projects, towns listed in the service area. In this demonstration the page is not indexed: the business does not exist.

One HTML page, one stylesheet, a short script for the interactive plan and the summary. No dependencies or third-party services. The drawings are embedded in the page; the photos are served in two sizes and loaded on demand.

The form is ready to be connected to the designer’s mailbox, with a proposed time slot sent to the customer. In the demonstration, nothing is sent.

• The complete website, its sources and publication in their own name.
• Their real projects drawn on the same model, from their plans or sketches.
• The form connected to their e-mail, tested together.
• Notes to update a price, a season, a project.

Scope, price and timeline are set in a quote before work starts.