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
| Section | Purpose |
|---|---|
| Floating Photo Header | Establishes visual range with six to eight project images and the headline |
| Bento Grid Gallery | Organizes project case studies in an expanding, scrollable grid |
| Case Study Cell: Before | Opens each project with a before drone shot to set context |
| Case Study Cell: Brief | Presents the client brief as a typeset pulled quote on concrete texture |
| Case Study Cell: Drawings | Shows iridescent line-work design drawings for each project |
| Case Study Cell: Build | Displays a three-photo time-lapsed build sequence |
| Case Study Cell: Finished | Closes each project with a golden-hour photography reveal |
| Sticky call to action Button | Persistent hot coral button visible throughout the full page scroll |
| Three-Step Lead Form | Collects 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.
- 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.
- 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




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?