Landscape Designer Portfolio Booking Website Template

Terrain is a bold brutalist landing page template built for landscape designers who lead with visual range and creative credibility. A bento grid layout organizes project photography into an expanding case study narrative, while iridescent accents, a floating photo header, and a three-step lead form work together to turn curious visitors into booked consultations.

by Rocket studio

Quick summary

Terrain is a single-page landscape designer portfolio template that combines a brutalist visual language with an iridescent color system. The bento grid layout turns project photography into a sequential case study narrative. A sticky hot coral call-to-action button and a three-step site visit form make lead generation feel like an invitation rather than a sales pitch.

Who this template is for

Terrain is built for landscape design practices that do serious, site-specific work and want their portfolio to reflect that ambition. It suits designers who work across project types and need one page that demonstrates range, process, and creative thinking.

  • Landscape designers serving homeowners, architects, and boutique developers
  • Practitioners whose work spans courtyards, full gardens, and multi-level estate grounds
  • Portfolio owners who want a visual-first page that qualifies leads before the first call

What problem this template solves

Most portfolio pages reduce complex design work to a flat image gallery. Terrain fixes that by giving each project a narrative arc inside the grid. Visitors understand not just what was built, but why and how.

  • Static gallery layouts fail to communicate the design process or project scope
  • Generic contact forms feel transactional and undermine the premium positioning of high-end landscape work
  • Single hero images cannot show the breadth of a practice the way a curated bento grid can

What you get with this template

Terrain delivers a fully structured landing page designed specifically for landscape designers who sell through portfolio credibility. Every section is intentional, from the floating photo header to the final form step.

  • A bento grid layout with click-and-scroll case study expansion for each project
  • A floating photo header with six to eight project images, parallax cursor movement, and iridescent drop shadows
  • A three-step lead generation form covering site description, project scope, and contact details

Feature list

Terrain's features are drawn directly from its brief and built to serve a specific purpose: turning strong landscape photography into a compelling, lead-generating portfolio page.

Bento Grid Case Study Layout

Each bento cell expands into a full project story. The narrative sequence moves from a before drone shot, through the client brief, design drawings, build sequence photos, and a golden-hour finished image. Projects escalate in complexity as the visitor scrolls, demonstrating range from a modest courtyard to a multi-level hillside transformation.

Floating Photo Header with Parallax

Six to eight project images of varying scale are suspended against a deep charcoal void. Each image casts a soft iridescent drop shadow. The cluster drifts with subtle parallax as the cursor moves, creating depth without a single dominant hero image.

Iridescent Gradient Accent System

Holographic lilac and electric teal gradient strokes trace the edges of every bento cell. The gradients shift hue as the visitor scrolls, giving the dark layout a prismatic quality that feels alive rather than static.

Three-Step Lead Generation Form

The form guides prospects through a deliberate three-step intake: upload or describe their site, select a project scope from four options, then provide their name, email, and preferred start month. No pricing appears. The process is framed as a creative consultation booking.

Sticky Hot Coral call to action Button

A hot coral "Start Your Site Visit" button follows the visitor down the entire page. It stays visible at all times without interrupting the grid, providing a persistent, low-friction entry point into the consultation flow.

Bold Brutalist Typography

The headline "Earth. Edited." is set in massive brutalist sans-serif type and punched directly through the floating photo cluster. The typographic weight anchors the page and signals design confidence without a single word of qualification.

Page sections overview

SectionPurpose
Floating Photo HeaderEstablishes visual range with six to eight project images and the headline
Bento Grid GalleryOrganizes project case studies in an expanding, scrollable grid
Case Study Cell: BeforeOpens each project with a before drone shot to set context
Case Study Cell: BriefPresents the client brief as a typeset pulled quote on concrete texture
Case Study Cell: DrawingsShows iridescent line-work design drawings for each project
Case Study Cell: BuildDisplays a three-photo time-lapsed build sequence
Case Study Cell: FinishedCloses each project with a golden-hour photography reveal
Sticky call to action ButtonPersistent hot coral button visible throughout the full page scroll
Three-Step Lead FormCollects site details, project scope, and contact information

Design & branding system

Terrain uses a Bold Brutalist theme layered over an AI Iridescent color system. The combination creates a visual language that feels industrial and premium at the same time. Dark backgrounds let photography carry the weight, while iridescent accents introduce unexpected color.

  • Deep charcoal (#1A1A1A) as the dominant background, holographic lilac (#C4A1FF) and electric teal (#00F0D0) as shifting gradient accents, warm pearl (#F0ECE3) for readable text surfaces, and hot coral (#FF5F6D) reserved for calls to action
  • Brutalist sans-serif typography for headlines, with iridescent gradient strokes tracing bento cell edges and shifting hue on scroll
  • Project photography treated as windows cut into concrete, allowing images to dominate each cell without competing with background decoration

Mobile & speed optimization

Terrain is designed so that its bento grid and parallax header translate cleanly to smaller screens. The layout prioritizes the photography and the form flow across all device sizes.

  • Bento cells reflow into a single-column stack on mobile, preserving the case study narrative sequence
  • The sticky call to action button remains accessible at all screen sizes without obscuring project content
  • The three-step form is touch-friendly, with clear step indicators and a logical input order for mobile users

How this template helps you convert

Terrain is built around a deliberate conversion strategy. The portfolio content does the persuasion work, and the form captures interest at its peak.

  1. The escalating project complexity across the bento grid builds trust progressively. By the time a visitor reaches the form, they have already seen proof of the practice's full range.
  2. The three-step consultation form removes pricing friction entirely. Framing the first meeting as a creative consultation lowers the commitment threshold and attracts higher-quality enquiries.

Other information about this template

Terrain is a strong fit for landscape design practices that want a portfolio page positioning them at the premium end of the market. The template's structure supports a range of project types and client profiles within a single cohesive layout.

  • The four project scope options in the form (courtyard, full garden, estate grounds, commercial) signal the breadth of services the practice offers without requiring a separate services page
  • The case study narrative format is reusable. Each new project can follow the same before-brief-drawings-build-finished sequence, keeping the portfolio fresh over time
  • The visual identity, including the oil-on-wet-asphalt color palette and brutalist typography, is intentionally distinctive and designed to stand apart from conventional green-and-natural landscape portfolio aesthetics
Landscape Designer Portfolio Booking Website Template
Landscape Designer Portfolio Booking Website Template
Landscape Designer Portfolio Booking Website Template
Landscape Designer Portfolio Booking Website Template

Theme

Bold Brutalist

Creative direction

Case Study Narrative

Color system

AI Iridescent

Style

Bento Grid

Direction

Lead Generation

Page Sections

Bento Grid Case Study Expansion

Floating Parallax Photo Header

Iridescent Scrolling Gradient Accents

Three-step Consultation Lead Form

Sticky Hot Coral Call to Action

Bold Brutalist Typography System

Related questions

How many projects can the bento grid display?

Does the template show any pricing information?

What information does the three-step form collect?

Can I customize the color palette and typography?

What types of clients is this landing page designed to attract?