Formwork — Innovative Home Design Landing Page Template

Quick summary

Formwork is a single-page template built for residential architecture practices rooted in brutalist design. The layout moves visitors through six full-viewport project showcases before revealing transparent pricing. The result is a landing page that earns trust through the work itself, then converts it into commissions with clear calls to action and a short intake form.

Who this template is for

This template is built for architecture practices whose work speaks in raw concrete, exposed structure, and geometric forms. It suits firms that want their web presence to match the ambition of their buildings.

• Owner-builders and couples replacing suburban homes with uncompromising residential architecture
• Boutique multi-residential developers who understand that bold brutalist aesthetic commands attention
• Architecture practices ready to sell fixed-scope design packages directly from their website

What problem this template solves

Most architecture websites bury their best work behind navigation menus and walls of text. Visitors leave before they feel anything. This template solves that by leading with immersive project imagery and letting the scale and quality of the buildings make the case.

• Practices lose inquiries because pricing feels hidden or unapproachable
• Visitors cannot tell whether a firm works at their budget level before leaving
• Generic portfolio layouts fail to communicate the monumental character of brutalist architecture

What you get with this template

You get a full-width immersive landing page structured around a gallery-walk scroll experience. Every section is deliberate, from the hand-drawn axonometric hero illustration to the amber-accented commission form at the close.

• A hero section with a full-viewport custom illustration rendered in white ink on carbon black
• Six full-viewport project showcase blocks with photos, construction details, captions, and embedded client quotes
• Three fixed-scope service package cards and a $950 Site Feasibility Study call to action with intake form

Feature list

This template is built around a small set of well-executed capabilities. Each one serves the landing page's core purpose: letting brutalist architecture sell itself.

Full-Viewport Gallery Walk Layout

The scroll experience moves visitors through six complete project showcases. Each project fills the viewport as if it were a framed piece in a gallery. The sequence includes a hero photograph, material close-ups, plan drawings, and a client quote in small italic, followed by a hard black divider before the next project begins. The rhythm is silence, then immersion, then silence again.

Hand-Drawn Axonometric Hero Illustration

The header is a custom SVG illustration of a brutalist residence rendered as an axonometric section. Every room is exposed like a concrete dollhouse. Reinforcement bars are sketched in amber. The drawing fills the viewport edge to edge with no visible navigation, and a single condensed uppercase word sits beneath the roof line. The illustration communicates the architectural style immediately and without a word of body copy.

Fixed-Scope Service Package Cards

Three black cards present the Concept package at $18,000, Full Documentation at $55,000, and End-to-End at $120,000. White typography sits on a carbon black ground. An amber border appears on hover. Pricing is transparent, scope is clear, and the cards are designed so that by the time a visitor reaches them, six projects deep into the scroll, the question is not whether the firm is capable but whether a spot is available.

Direct Commission Intake Form

The primary call to action reads "Commission Your Home" and anchors to a short intake form. The form asks for site address, approximate floor area, a budget range dropdown, and an open text field labeled "Describe the house you can't stop thinking about." The form is brief by design. It filters for serious clients without creating friction.

Site Feasibility Study Entry Point

A secondary conversion path lets visitors purchase a $950 Site Feasibility Study as an immediate low-commitment step. Its own amber button reads "Start With Your Site." This entry point gives high-intent visitors a way to begin before committing to a full package, and it gives the practice a structured first engagement with every new client relationship.

Scroll-Linked Animation and Hover States

The template uses scroll-linked reveals and staggered project entries to create a sense of deliberate pacing. Cursor proximity triggers amber highlights on interactive elements. Hover states on package cards and call-to-action buttons use the formwork amber accent exclusively, so the color appears only when a visitor is near a decision.

Page sections overview

Design & branding system

The visual identity is built on an Ink and Paper color system. It feels like a freshly printed architecture monograph on heavyweight uncoated stock. Black dominates, white text sits large and unhurried, and the amber accent appears only when the visitor is near a decision.

• Carbon black (#1A1A1A) as the dominant background, uncoated stock white (#F5F0EB) for all body typography, and shuttering gray (#6B6B6B) for secondary elements
• Formwork amber (#C48A3F) reserved exclusively for interactive states, hover borders, and call-to-action buttons
• Condensed display typeface for headlines and a clean sans-serif for body text, creating a monumental and readable typographic hierarchy

Mobile & speed optimization

The template is designed desktop-first, which reflects the research behavior of high-intent architecture clients. The layout is built so that bold geometric forms and full-viewport imagery maintain their structural impact when viewed at large screen sizes. Mobile responsiveness ensures the gallery walk remains navigable and the forms remain usable on smaller devices.

• Full-viewport project blocks stack cleanly on smaller screens without losing the brutalist aesthetic's massive visual weight
• Server Components handle static content while Client Components manage scroll animations, keeping the interactive experience smooth
• The function-first layout philosophy means no unnecessary decorative elements slow down the page or distract from the work

How this template helps you convert

The conversion strategy is embedded in the scroll sequence itself. The template earns trust before it asks for anything, which is the correct order for high-value residential design commissions.

1. Six full-viewport project showcases build conviction through scale, material detail, and client quotes before any pricing is shown, so visitors arrive at the packages already sold on the quality.
2. The commission intake form uses specific, personal language ("Describe the house you can't stop thinking about") to filter for serious clients and create an emotional connection at the moment of decision.
3. The $950 Site Feasibility Study provides an immediate low-commitment entry point, capturing high-intent visitors who are not yet ready for a full package but want to begin.

Other information about this template

Brutalist architecture emerged in the mid-20th century, primarily between the 1950s and 1970s. The term comes from the French phrase béton brut, meaning raw concrete. The swiss french architect Le Corbusier developed some of the most cited examples of the brutalist movement, including the Unité d'Habitation in Marseille. His work established many of the defining characteristics of the architectural style: exposed concrete, monolithic geometric forms, and a rejection of ornamentation in favor of material honesty.

Architects such as Marcel Breuer, Paul Rudolph, and Peter Smithson advanced brutalism across public institutions and residential buildings throughout the post-World War II era. Marcel Breuer's Breuer Building, now known as the Met Breuer, became a landmark of brutalist architecture in New York City. Paul Rudolph's work demonstrated the style's capacity for dramatic interior spaces and exposed structure. Peter Smithson, along with Robin Hood Gardens in London, helped define what communal areas and vertical city thinking could look like in residential architecture.

Trellick Tower, completed in 1972 in London, is one of the most recognized brutalist buildings in the world. The Torre Velasca in Milan is another early example. These buildings sparked debate at the time of construction, and they continue to provoke strong emotional responses. Some find raw beauty in their reinforced concrete facades and sharp angles. Others find them cold. That tension is part of what makes brutalism polarizing and photogenic in equal measure.

This template carries that same architectural honesty into web design. The function-first structure of brutalist design translates directly to how this layout is built. There is no hidden navigation, no decorative elements used for their own sake, and no softening of the visual language. The layout uses asymmetrical grid arrangements, recessed windows rendered as precisely cut image voids, stairs-like typographic hierarchies, and raw materials like stone-textured backgrounds and wood-grain references in construction photo sequences to reinforce the brutalist aesthetic from hero to footer.

• This template is categorized under Architecture and Design, subcategory Architecture Firm, niche Residential Architecture
• The brutalist movement continues to influence neo brutalism in contemporary web design and digital architecture branding
• Websites built on bold brutalist principles use exposed structure, high contrast, and massive geometric typography as core visual tools
• The template's creative direction mirrors the gallery walk concept found in landmark architecture exhibitions in London and beyond
• The monolithic layout and brutalist structures referenced throughout the scroll sequence reflect the foundation of post-World War II modernism

Show more