Architecture firm website design: what the best studio sites get right

By Core Concepts · · Architecture

An architecture website is judged the way a building is: by proportion, restraint and how it handles light. Clients decide within seconds whether a studio shares their taste, long before they read a word. The sites that win commissions tend to do the same few things well.

Let the projects lead

The work is the argument. Open with it, at full size, with almost nothing on top. A single project shown large says more than a grid of twelve thumbnails. Our Halden template opens on a sequence of five projects, each uncovering the last as you scroll, so the first screen is nothing but architecture.

Use fewer, better photographs. One strong exterior, one interior and one detail per project is enough for a homepage.

Give every project a name, a place and a type

Clients look for work like their own. A project index that lists name, location, type and year lets a developer find the housing schemes and a homeowner find the houses. Make it scannable, and show a preview on hover so the list is not just text.

Have a point of view

Most studio sites say the same things about context and craft. One clear sentence about what you believe, set large, does more than a paragraph of positioning. If you have a manifesto, keep it short enough to read without scrolling.

Explain how you work

A first-time client does not know what an architect does between the first meeting and the building. Show the stages plainly: site, concept, design, planning, construction. It removes anxiety and sets expectations about time.

Show recognition without shouting

Awards, publications and competitions belong in a simple table: year, title, body. Set quietly, they read as a record. Set as badges, they read as advertising.

Keep the type and the grid disciplined

Architects notice sloppy alignment. Use one grid, two typefaces at most, and a narrow range of sizes. Leave generous space. The site is itself a piece of design work and will be read as one.

Make contact easy to find

It sounds obvious, yet many studio sites hide the email address three clicks deep. Put the studio location, an email and a phone number in the footer of every page, and name a person if you can.

Do not let motion get in the way

Movement should feel like turning a page in a monograph: deliberate and slow. Avoid effects that delay the photographs. And honour reduced-motion settings, which good templates do automatically.

A checklist

  • Full-size project imagery on the first screen
  • A project index with name, place, type and year
  • One clear statement of what you believe
  • Your process in plain stages
  • Awards as a quiet table
  • Contact details on every page

Halden is built around exactly this list, and you can scroll the full demo on its page: see Halden.

Templates in this article

  • Halden: An editorial homepage for architecture and design studios. $79.