How the Gablespan Sheds demo was built

01Concept

Gablespan Sheds sells engineered steel workshops, garages and open-bay farm sheds across Forrestdale, the Perth metro and regional WA. The audience is owners whose garage lost the war with the boat, tradies who want a workshop that isn't the back verandah, and hobby farmers racing winter. The page's single job is a booked free site quote — and its credibility play is being right about the boring parts: WA building permits, wind regions, and $/m² arithmetic that never surprises anyone.

The art direction is a Forrestdale block at 10am: slab cured and swept, galv portal frames true against summer straw, first sheets going on. Square, engineered, unhurried — a shed is a promise about the next thirty years, and the page should stand like one.

02Palette

The ink/line split (LEARNINGS W2/W5) is baked in from the start: bright ochre draws lines and marks, the derived ochre-ink carries any text duty, and body copy sits in near-black greys at 9:1+.

03Type

• Barlow Semi Condensed (display) — steel-stencil confidence without novelty; carries the masthead, headings and buttons.
• Source Sans 3 (body/UI) — a legible workhorse at 17px; trade customers read this page on a phone in a paddock.
• Red Hat Mono (numbers) — spans, square metres and prices. Everything measured or priced renders in mono so the arithmetic reads like a take-off sheet, not marketing.

04The Shed Designer

The signature is a procedural SVG technical drawing — side elevation, front (gable) elevation and floor plan — rebuilt from state on every interaction. Type chips, span/length steppers (a 3 m bay at a time), eave chips, a roller-door stepper and a slab toggle drive both the drawing and a mono price card. The whole scene is string-built into one <svg>: columns rise at each bay line, purlins run, cladding sheets land bay by bay from one end (the rest state holds the shed sheeted to bay three, honest open frame beyond), roller doors punch into the front elevation, and the slab hatches in under everything with a pencilled "100 mm pour ≈ 10.8 m³" annotation.

Motion. Each drawn element is a .el group with an incremental --i index; CSS transitions with transition-delay: calc(var(--i) * var(--stag)) stagger the erection. The first render earns the full entrance (26 ms/element, capped at 1.5 s); every later redraw snaps at 11 ms/element under a 520 ms cap via a firstDraw flag — the dual-speed pattern from LEARNINGS W21, measured live at 26 → 11 ms in QA. A clipped sheen sweep drifts across the sheeted cladding on an 8 s loop so the scene is never pixel-static; the shed itself never drops below full visibility at any capture instant. prefers-reduced-motion renders everything settled and complete, sheen off, and animated groups never carry SVG transform attributes (LEARNINGS W16/W17).

Honest controls. Farm sheds disable the eave chips with the on-page reason "open bays run at a standard 3.0 m" (per spec) and disable the roller-door stepper with "an open-front bay doesn't take a roller door — the opening is the door" — a derived W18 decision documented here: the spec pinned door pricing only for clad builds, and a live control silently pricing doors into an open front would be dishonest. Every stepper and chip carries an explicit aria-label, and the configured scenario pre-fills the quote form's read-only design field on every change.

05The pricing model — shape and derivation

Floor area is the meter: span × length. Workshops and garages share one $260/m² rate at a 2.4 m eave ("a garage is a workshop you park in; the price difference is doors, not walls" — the W20 secondary-meter statement, on-card). Eave height adds $20/m² at 3.0 m and $40/m² at 3.6 m because height is steel and wind load. Open-bay farm sheds run flat at $200/m² with a standard 3.0 m eave. Roller doors are $1,150 each installed (motorised +$450 noted on-card, never auto-added); the slab toggle adds $95/m². The smallest honest config — a 6 × 9 m farm shed at $10,800 — is the services floor, so no minimum-job clamp exists in the model.

Measured figures (from the running page, asserted against an independent oracle)

Every spec worked example verified exact — no corrections needed. The one derived figure is the slab annotation's concrete volume (area × 100 mm, a standard shed slab thickness), which is scene copy, not a priced line.

06Conversion decisions

• Designer beside the h1, above the fold. The signature shares the 1200×750 thumbnail viewport with the hero (probe: scene top at 170px). A shed is a considered purchase — the price card converts better than a "from" banner because it shows the maths moving.
• Two CTAs everywhere: call and quote. Header carries tel:; mobile gets a sticky call/quote bar (52px targets). The designer's own CTA hands its scenario to the form — the W12 signature→form contract.
• Form fields: name, phone, suburb/postcode, block type (suburban/rural/coastal — it feeds the wind-region conversation), a read-only design summary and "what's going in it?". Front-end validation only; the confirmation is designed, local, and says plainly that nothing was sent.
• Approvals as a selling section, not fine print — in WA the permit is the customer's biggest anxiety, so the page owns it: who lodges, how long, and why the cheapest un-engineered quote is the dearest mistake.

07Local SEO we'd implement for the real business

This demo page carries only WebPage schema naming it a demonstration — fictional structured data in a real index would be dishonest markup. For a real Gablespan we'd ship LocalBusiness + Review schema like this:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "HomeAndConstructionBusiness",
  "name": "Gablespan Sheds",
  "description": "Engineered steel sheds and garages, supplied and built across Perth and regional WA.",
  "telephone": "+61-8-XXXX-XXXX",
  "address": { "@type": "PostalAddress", "addressLocality": "Forrestdale",
               "addressRegion": "WA", "postalCode": "6112", "addressCountry": "AU" },
  "areaServed": ["Perth", "Armadale", "Byford", "Serpentine", "Northam", "Pinjarra"],
  "openingHours": "Mo-Fr 07:00-16:00",
  "priceRange": "$10,800 - $110,000",
  "aggregateRating": { "@type": "AggregateRating", "ratingValue": "4.9", "reviewCount": "87" },
  "review": [{
    "@type": "Review",
    "author": { "@type": "Person", "name": "Real Customer" },
    "reviewRating": { "@type": "Rating", "ratingValue": "5" },
    "reviewBody": "Pulled from the live Google / Podium review feed."
  }]
}
</script>

08What would change for the real client

• Buildxact / shed-configurator quoting — the designer's state posts straight into the estimating pipeline instead of a read-only field.
• Council lodgement tracking by shire — live permit status on the job, surfaced to the customer.
• BlueScope / supplier steel ordering feeds — kit orders raised from the signed design.
• Assignar — site crew scheduling for slab and erection.
• Xero progress claims — deposit, steel, lock-up milestones invoiced automatically.
• Podium review flow — the real reviews that replace this page's demo copy, feeding the schema above.

Their photos would replace nothing — the procedural drawing is the product shot, and it would render their actual quote.

09Iteration log