Architecture Website Examples: 5 Firm Sites Read From the Index

What makes an architecture website work for the people who hire architects?

It answers the client's question before the client has to ask it. A developer wants comparable references, a homeowner wants to know what working with you feels like, and a selection panel wants proof fast.

Four visitors, four different questions

A firm website rarely has one audience. On the same afternoon, it may host a developer comparing three shortlisted firms and a family planning a house. An editor may be checking a project date while a graduate looks for a job.

Each of them arrives with a different question. The developer asks: have you built this type, at this scale? The family asks: will you listen to us? The editor asks: who took the photos, and when was it finished? The graduate asks: what is the culture like?

A beautiful homepage answers none of these on its own. The routes behind it do.

Why the bar keeps rising

The talent pool is growing, and so is the comparison set. According to Building Enclosure (reporting on NCARB's annual Survey of Architectural Registration Boards, 2026), the United States counted just over 123,000 architects in 2025. That figure rose 6% from 2024.

More licensed architects means more firms competing for the same RFPs and the same private clients. A prospective client can open ten firm websites in one evening. The site that answers their question fastest earns the call.

Here is a pattern we see often with established mid-size firms. They win most of their work through referrals, so they treat the website as a formality. In practice, a referral sends the prospect straight to the website to double-check. The site does not replace word of mouth. It confirms it or quietly undermines it.

How we picked these examples

A selection is only useful if its criteria are explicit. Ours had one guiding question: does this site make a deliberate choice about how visitors move through the work?

Selection criteria

We looked only at the official websites of practicing firms, reviewed on October 26, 2026. Each site had to offer a project index reachable without a login or a contact form.

We set aside three kinds of results. Template showcases from website builders came first, because they mostly promote their own tools and themes. Student portfolios came next, since they solve a different problem. Finally, we dropped one global firm whose homepage returned an error page on the day we reviewed it.

One example, Apax, is a website our studio designed. We flag it in its section and describe only what its published project page states.

The three lenses we used

We read every site through three lenses, in this order.

• The index: how projects are listed, filtered and searched.
• The routes: where each type of visitor lands and who they can contact.
• The pace: how fast the first image appears, and whether motion can be turned down.

Most design roundups stop at visual style. These three lenses explain why a style works for one firm and fails for another.

Five architecture website examples, read from the index outward

SOM, filters built for a global portfolio

SOM introduces itself as a collective of architects, designers, engineers and planners. The main menu is short: Projects, Ideas, People, News, About.

The interesting part sits inside the project browser. A Filter by panel lets visitors narrow the work by region, project type and topic. Regions run from Africa to South America. Topics include climate action, decarbonization, tall buildings and timber.

That third filter is the clever one. Region and type describe what a project is. Topic describes what the firm thinks about. A visitor researching mass timber can find every relevant page, whether it is a building, a research piece or a publication.

The panel also filters by page type: exhibition, news, person, project, publication, research and story. The index becomes a knowledge base, not just a gallery.

Two smaller details complete the picture. A search field sits next to the filters, with a Clear All option. And a language toggle switches between English and Chinese, which signals where the firm expects its clients to be.

Studio Gang, contact routes by request type

Studio Gang states its purpose in one line on the homepage: "We help people, organizations, and cities design their futures." The practice is led by Jeanne Gang, with offices in Chicago, New York, San Francisco and Paris.

The Projects menu splits the work into four disciplines: Architecture, Planning, Interiors and Exhibitions. It is a simple taxonomy, and it matches how clients actually commission the studio.

The contact page is where Studio Gang stands out. Inquiries are routed by category, including press, publications, academic research, speaking engagements and continuing education. Each route has its own email or form.

This is not a cosmetic detail. A conference organizer and a museum director should not land in the same inbox. Routing requests at the source saves the studio a triage step, and it tells each visitor they are expected.

A Publications section adds a voice to the work. Under the label "In Her Own Words," it gathers op-eds that Jeanne Gang wrote or co-wrote. Topics include pay equity and bird-friendly building codes in Chicago. The firm's positions sit one click away from its buildings.

Olson Kundig, a Motion toggle in the main menu

Olson Kundig describes itself as a collaborative global design practice. Its top navigation holds four entries: Projects, Practice, People and Play.

The Projects menu filters by building type, with thirteen categories from Residential and Cultural to Hospitality, Workplace and Products. A homeowner can reach residential work in one click, without wading through stadiums or offices.

Next to the menu sits a detail most firms never consider: a Motion toggle. Visitors can turn animation down directly from the navigation. For people sensitive to movement, and for anyone browsing on a weak connection, that switch matters.

The Play section is the firm's editorial space. It gathers conversations, field visits and a speaker series. Instead of a generic blog, the firm built a named channel with its own tone.

The lesson travels well. An image-rich, animated portfolio can still treat the visitor's comfort as a design requirement.

Diller Scofidio + Renfro, an index and a search box

Diller Scofidio + Renfro presents itself as an interdisciplinary design studio working across architecture and the arts. Its navigation is radically short: a wordmark, an Index link and a Search link.

Both links lead to the same index view. Nothing else sits in the main navigation. The site assumes visitors already know the studio and come to look something up.

That assumption is the whole design. It works because the studio's reputation does the introduction offline. The site only has to retrieve.

For most firms, this is the example to admire and not to copy. We return to that point in the mistakes section.

Apax, a selective index, a website designed by our studio

Apax is a Paris-based architecture agency founded in 1982. Antoine Morizot took it over in 2025 with a strong ambition to modernize its positioning. The design agency Graphéine redesigned its identity and name to set the new direction.

Our studio designed the website that extends this identity. The goal, as stated on the project page, was to move Apax from a traditional perception to a more contemporary, confident and selective architecture practice.

The word "selective" shaped the index. On the live site, the Projects link opens a curated selection first. The firm decides what a visitor sees before anything else.

The project page shows several ways to browse the same work: a list, a grid and the selection, each also designed in dark mode. A visitor in a hurry scans the list. A curious one browses the grid.

The main menu holds just two entries, projects and agency. According to the project page, the site positions Apax as a credible contemporary agency, able to address an international and demanding clientele.

Does page speed matter for an image-heavy firm site?

Yes, because on most pages the image is the first impression. If the hero photo loads slowly, the whole firm feels slow, however good the building is.

What the measurements say

Images dominate the first screen. According to the HTTP Archive (Web Almanac 2025, Performance chapter), 76% of mobile pages use an image as their largest visible element. On desktop, the figure reaches 85.3%.

Speed is not a solved problem either. The same chapter reports that only 62% of mobile pages achieve a good score on that metric, compared with 74% on desktop. Mobile visitors are the ones most likely to wait.

Homepages carry the heaviest load. According to the HTTP Archive (Web Almanac 2025, Page Weight chapter), the median mobile homepage loads 911 KB of images, against 354 KB for an inner page. Firm homepages built as photo walls often sit well above that median.

The target is public. According to web.dev (Largest Contentful Paint, updated 2025), the main content of a page should render within 2.5 seconds. Google advises measuring that threshold at the 75th percentile of page loads, separately on mobile and desktop.

What this means for your homepage

Treat the opening image as a technical component, not just an editorial choice. Export it at the size it is displayed, in a modern format, and load it first.

Here is what we hear most often in a first brief: "We can't compress our photos, the photographer would never accept it." In practice, a well-prepared screen image keeps its perceived quality. What disappears are pixels no screen will ever show.

Animation follows the same logic. Olson Kundig's Motion toggle is a reminder that motion has a cost, in attention and in performance. Our guide to website animation explains where motion earns its place and where it gets in the way.

Where firms go wrong when they borrow from famous sites

Famous firm websites are built for situations most practices are not in. Borrowing their form without their context produces the opposite effect.

Mistake 1: copying a filter system built for hundreds of projects

SOM's filters make sense for a portfolio spread across several continents and dozens of building types. Applied to a firm with eighteen projects, the same panel returns empty results and makes the practice look smaller than it is.

The useful idea is the third filter, topic. Even a small firm has two or three recurring themes, like adaptive reuse or timber. One clear thematic grouping beats a wall of empty dropdowns.

Mistake 2: sending every request to one generic inbox

Studio Gang routes press, research and speaking requests separately. Many firms do the opposite and publish a single info address for everyone.

A pattern that keeps coming up with growing practices: the partner who wins new work also triages press calls, job applications and vendor pitches. The real prospect waits two days for a reply. A routed contact page costs nothing to build and protects the requests that matter most.

Mistake 3: minimal navigation without the reputation to carry it

Diller Scofidio + Renfro can reduce its site to an index and a search box. Visitors arrive already knowing who they are looking at.

A recently rebranded firm that copies this approach sends a different signal. A common case: the new site opens on one large image and a wordmark, with no line explaining what the firm designs or for whom. Prospects leave without a reason to stay. Minimalism works once the message is established, not before. Our article on web art direction shows how to keep a restrained look while still saying who you are.

How do you turn inspiration into a usable brief?

By writing down decisions, not adjectives. "Clean and modern" helps no one. "Projects filtered by type and status, contact routed three ways" gives a studio something to build.

Build a project inventory before you look at any design

Open a spreadsheet and list every project you could show. Add columns for year, location, program, scale, status and photographer.

This sheet answers the index question for you. Fifteen strong projects call for a curated selection. Eighty projects call for filters. The volume often settles debates that taste never will.

Write the three questions your clients ask

Ask the partners who win the work. What do developers ask in a first meeting? What do private clients worry about? What do selection panels check first?

Each question becomes a route on the site. If a question has no page, that is where you lose inquiries.

Map your contact routes

List every type of incoming request: new projects, press, careers, speaking, suppliers. Decide who answers each one.

Then decide which deserve their own address or form. Three routes are usually enough for a mid-size firm.

Set a performance budget for images and motion

Agree on one rule before design starts: the first screen must render within 2.5 seconds on a mid-range phone. Every hero image, video and animation is judged against that rule.

Decide too whether visitors get a way to reduce motion. It is a small control with a large signal of care.

Draft three project pages first

Write three complete project pages before the rest: context, constraint, decision, outcome, photo credits. They become the template for the whole portfolio.

Our page on websites for architecture firms details how we structure these project pages during a build.

Your most common questions about architecture website examples

Is Squarespace or Wix enough for an architecture firm?

For a new practice with a handful of projects, a website builder can carry you for a while. The limits appear when the portfolio grows: few templates handle filters by status or program, and custom routes for press or careers get awkward. Once your index needs its own logic, a template starts dictating your positioning. Our comparison of a custom website versus a template walks through that tipping point.

Do architecture firms need a blog?

Not a generic one. A blog that recycles industry news rarely helps a firm. What works is a named editorial space tied to the practice, like a series of site visits, talks or position papers. Studio Gang and Olson Kundig both chose that route. Two strong pieces a year beat a monthly post nobody asked for.

Should we show unbuilt and competition work?

Yes, if each entry states its status clearly. Competition entries show your boldest thinking, and selection panels often want to see them. The risk is mixing renderings and finished buildings without a label, which erodes trust once a visitor notices. A status tag on every project card solves it in one line.

How often should we update the portfolio?

Add a project when it is photographed and the client has approved publication, not on a fixed calendar. What matters more is pruning. Once a year, review your project index and move older or off-strategy work to an archive view. The homepage should always show the work you want to be hired for next.

Should the team page show every employee?

It depends on how clients buy. If clients choose a partner, profile the partners in depth and list the wider team more briefly. If clients buy the firm's process, show the people who run projects day to day. In both cases, real photos taken in the office beat stock portraits or illustrated avatars.

What should a project page title say?

The building's name, then its city, then its program. A project title like "Riverside Library, Portland, public library" helps search engines and skimming visitors alike. Poetic titles can live in the opening sentence. Keep the title itself factual, so the project can be found by the people looking for that type of work.

Design the route before the look

The firm websites that stand out did not start with a mood board. They started with a decision about how visitors move through the work. SOM filters by topic and Studio Gang routes requests. Olson Kundig lets visitors turn motion down, Diller Scofidio + Renfro keeps only an index, and Apax leads with a selection.

Your firm has its own answer. It sits in your project inventory, your clients' questions and the requests that reach your inbox each week. Settle those, and the visual direction will follow with far less guesswork.

To see how other industries solve the same ordering problem, our review of the best websites of 2026 is a good next read.

Alan Chevereau, SEO consultant. He works with Metabole Studio on its content strategy and search visibility.