Most clients meet your firm twice. The second time is in a conference room.
The first time is on your website, often months earlier, usually on a mobile device, and almost always without you knowing it happened.
That first meeting is where a homeowner decides whether to send an inquiry, where a selection committee shortlists three practices out of eleven, and where a graduate decides whether to apply. All of that requires a website that loads quickly, shows the work clearly, and invites visitors to start a conversation.
A website build, or rebuild, is a tough project to get started, so let’s make it easier by taking it one step at a time. We will look at four examples and what makes each one work, cover the features an architecture site actually needs, compare the platforms available to you, and then walk step by step through building the site yourself: domain, hosting, theme, project archive, images, and launch.
We’ll also go over what all of this costs and when hiring an agency makes more sense than doing it in-house.
Before you start: what your website actually needs to do
A website for an architecture firm serves four audiences, and they want different things.
- Prospective clients want to know if you have done something like their project before.
- Selection committees and procurement officers want credentials, project scale, delivery history, and a phone number that reaches a person.
- Prospective hires want to see the culture, the office, and the range of work they would be doing.
- Editors and awards juries want high-resolution images and accurate project credits without having to email you for them.
You can’t design a homepage that leads with all four. So before anything else, name the primary one.
A firm chasing residential inquiries, for example, builds toward the contact form and puts warmth and photography first. A firm bidding on institutional work leads with sector expertise, team credentials, and completed project scale. A firm growing headcount gives careers a spot in the main navigation instead of burying it in the footer.
Write your primary audience and your primary goal on a sticky note. Every decision below gets easier once you have.
Architecture firm website inspiration and examples
The useful piece to study in another firm’s site is what decision the designer made and what problem that decision solved. Here are four sites and the specific move each one gets right.
Olson Kundig
Olson Kundig is a Seattle practice that organizes its work under thirteen filterable categories, from Residential and Cultural to Hospitality, Workplace, and Landscape & Planning. For a firm with a large and varied portfolio, that taxonomy is important: a hotel developer and a private client can both land on the same Projects page and reach relevant work in one click.
The homepage also leads with a positioning statement rather than a slideshow, describing the practice as one “whose work expands the context of built and natural landscapes.” Photography follows immediately after, so the imagery arrives with a frame around it.
One detail more firms should copy: a motion toggle that lets visitors turn off animated elements. It costs almost nothing to implement and it takes accessibility seriously in a way most design-led sites do not.
What to take from it: build your project taxonomy around how clients self-identify, and say what your practice is about in words before you show the pictures.
MVRDV
MVRDV is a Rotterdam firm that has a project archive large enough to be unusable if handled badly. Their answer is to skip the chronological list entirely and organize around twelve thematic categories: Architecture, Transformations, Urbanism, Housing, Leisure, Mixed Use, Culture, Public, Sustainability, NEXT, Research, and Interiors.
The site also runs in five languages, which is a requirement for a practice bidding internationally.
What to take from it: past roughly forty projects, a reverse-chronological grid stops helping. Group by theme or typology and give each group a real landing page.
Studio Gang
Studio Gang writes project pages as narrative. Each featured project carries a headline and one or two sentences explaining what the building does for the people who use it, framed around connecting “people to each other, to their communities, and to the environment.” The technical specifications are present, but the story leads.
The contact page is more practical than most: separate addresses for business inquiries, press, publications, and employment, plus direct phone numbers for all four offices. Nobody has to guess which inbox to use.
What to take from it: write project copy about the problem and the response, not the material palette. And split your contact routes so a journalist on deadline and a client with a budget do not land in the same inbox.
Norm Architects
Norm Architects is a Copenhagen studio that splits its work three ways: Architecture, Design, and Creative, each with its own subcategories (Commercial, Hospitality, and Residential under Architecture; Furniture, Objects, Bespoke, and Lighting under Design). For a practice that works across scales, that structure makes the range legible.
The homepage is curated rather than automatic, with named sections like “Latest Work,” “In Residence,” and “Objects of Desire.” Somebody chose what goes there. That editorial control is what separates a studio site from a feed.
What to take from it: if your practice spans more than one discipline, give each one its own branch. And curate your homepage by hand, even if the rest of the site is automated.
Patterns these sites share
Full-bleed photography with restraint around it. Two typefaces at most, often one. Navigation that stays out of the way. Project pages with real URLs rather than lightboxes. Contact information reachable from anywhere on the site.
Mistakes to avoid
Uncompressed hero images that take eight seconds to appear. Portfolios that stop in 2019. Projects presented as a downloadable PDF instead of a web page. Homepages with an intro animation between the visitor and the work. Contact pages with a form and nothing else, no address, no phone, no name.
Essential design features for an architecture firm website
Project pages with real detail
One URL per project. Include location, client type, program, square footage, completion year, project team, consultants, awards, and photographer credit. These pages are what search engines index and what committees forward internally.
A filterable project index
By typology first, then by location or scale if your archive supports it. Filtering should update the page without a full reload.
Photography-led layout
The images are the argument. Design the templates around them rather than fitting them into boxes designed for text.
Real About and People pages
Architecture is bought on trust in individuals. Headshots, bios, licenses, professional affiliations, and the office itself. Stock photography here does active damage.
A services and process page
Most private clients have never hired an architect and do not know what schematic design means. Explaining your process in plain language to remove friction before the first call.
A qualifying inquiry form
Ask for project type, location, approximate budget range, and timeline. Three extra fields could save you hours of unqualified calls.
Mobile-first behavior
Assume the first visit is on a phone. Most website builders are “mobile responsive,” meaning they automatically adjust to mobile screens, but make sure. Even on a desktop computer, Google prioritizes sites that are “mobile friendly.”
Accessibility
WCAG 2.2 AA is the working standard, and it matters more if you pursue public, institutional, or federally funded work. Keyboard navigation, alt text on project images, sufficient color contrast, and captions on video. As design professionals who deal with accessible design in the built environment, firms are held to a higher expectation here.
Speed
Architecture sites tend to be heavier than almost any other category of business site, and every second of load time costs you inquiries. Google’s Core Web Vitals thresholds are a reasonable target: Largest Contentful Paint under 2.5 seconds, Interaction to Next Paint under 200 milliseconds, Cumulative Layout Shift under 0.1.
Basic search structure
Descriptive page titles, meta descriptions, a proper heading hierarchy, an XML sitemap, and structured data. Your project pages are your best ranking assets for searches like “healthcare architect Portland” or “adaptive reuse architects Chicago,” so treat each one as a landing page.
Website builders and templates for architects
Here is the honest comparison.
| Platform | Best for | Design ceiling | You own the site? | 3-year cost (DIY) |
| Squarespace | Two to five person studios that want it done in a weekend | Moderate; template-bound | No, hosted only | ~$800 |
| Wix | Solo practitioners, tight budgets | Moderate | No | ~$600 |
| Webflow | Design-led studios with a designer on staff | Very high | Partial; exportable with limits | ~$1,000+ |
| Framer | Marketing-style sites, fast prototypes | High | No | ~$700 |
| Cargo / Semplice | Portfolio-first creative practices | High within a narrow lane | No | ~$500 |
| WordPress | Firms planning to grow the site over years | Unlimited | Yes, fully portable | ~$900 |
The hosted builders are genuinely good at what they do. If you are a two-person residential studio with eight projects and no plans to add a journal, a careers section, or a second language, Squarespace will get you a respectable site in a week and you will never think about a server.
Why we recommend WordPress
WordPress runs almost half of the web for reasons that apply directly to architecture practices.
You own it. The site, the database, the images, and the content are yours, and you can move them to a different host or a different developer whenever you want. Your portfolio is not sitting inside a platform that can change its pricing or its terms.
There is no design ceiling. Whatever your brand becomes in five years, the site can follow.
Projects can be modeled properly. WordPress lets you define projects as their own content type with their own fields: typology, year, location, square footage, client, awards, photographer. Filtering then works off structured data instead of tags you have to remember to apply consistently. That distinction helps at forty projects and becomes crucial at two hundred.
It grows with the practice. Multilingual sites, careers listings with an application workflow, press kits with gated high-resolution downloads, client portals, and a journal are all standard territory.
The caveat: WordPress is only as fast as the theme and the host it’s built on. A weak theme stacked with fifteen plugins on cheap shared hosting will be slower than Squarespace. That is a solvable problem, and the next two steps solve it.
Themes and templates
There are architecture-specific WordPress themes on the marketplaces, and some are fine. The problem with most of them is that they are built to demo well rather than to be maintained for five years, and they tend to lock your design into whatever look the theme author decided on in 2021.
By contrast, there are some good all-purpose themes available, like Kadence. It’s a theme plus a block-based page builder (so you don’t have to know coding) plus a set of site-building tools, and a few things about it fit architecture practices specifically.
- More than 200 starter templates give you a designed foundation to modify rather than a blank canvas.
- Global design settings let you define your typefaces, type scale, colors, and spacing once and have them hold across every page.
- The header and footer builders handle the oversized navigation and mega-menu patterns large portfolios need.
- It ships with over 30 blocks, so you are not installing five separate tools to get galleries, tabs, accordions, and forms.
- The code output is clean, and Kadence is rated first for web accessibility among WordPress themes.
Pricing runs $99 a year for Essentials (the theme and blocks) and $299 for Pro (adds security, backups, memberships, and commerce tools).
How to build your architecture firm website, step by step
Step 1: Plan the sitemap and gather assets
Do this before you touch a builder. Almost every stalled website project got stuck because the content was not ready.
A working architecture firm sitemap looks like this:
- Home
- Projects (index, filterable)
- Project detail template
- Services (with your process by phase)
- About (practice, history, approach)
- People (leadership and team)
- Journal or News
- Careers
- Contact
Then assemble the content. For each project you plan to publish: eight to fifteen final images, the project name, location, client or client type, program, size, completion year, your project team, key consultants, awards, and the photographer’s name.
Handle the photography rights now, not at launch. Architectural photographers typically license usage rather than transferring copyright, and the license you bought may cover print and press but not unlimited web use, or it may require credit. Pull your agreements before the images go up. Credit every photographer on every project page regardless. It’s professional practice and it keeps the relationship healthy for the next shoot.
Step 2: Choose and register a domain
Most established practices end up on initials, like SOM, BIG, HOK, and KPF. If your firm name is long or hard to spell, the initials version is likely the better URL, provided you can get it.
Rules that save trouble later:
- No hyphens, no numbers, no creative misspellings
- Check the name against trademark databases before you buy.
- Prefer .com, since clients still type it by default, though .studio, .design, and .archi are increasingly accepted for design practices.
- Register for three or more years, turn on auto-renew, and turn on WHOIS privacy so you aren’t fielding sales calls.
If you already have a domain and are rebuilding, keep it. Domain age carries search value, and you would be starting over. You will map old URLs to new ones in Step 8.
Step 3: Set up hosting
Hosting is the part firms most often get wrong, because it’s invisible until it fails. Two elements to consider are the type of server and the scale of support.
For WordPress hosting, you’ll probably be deciding between shared cloud hosting and VPS. Very cheap cloud hosting puts your website on a physical server with a lot of other websites. Their performance and security posture can affect your site. VPS is similar, but your server resources are isolated, which means more reliable performance and better security.
You will also see managed and unmanaged hosting options. Most WordPress hosting is managed to some degree, meaning the hosting provider takes care of the digital space for you. There is no standard list of services, though, so make sure you understand what in one provider’s managed services vs another’s.
The most popular WordPress hosting providers:
- Liquid Web
- Bluehost
- Hostinger
You’ll want to compare each option, but as a starting point, here’s how they stack up:
| Liquid Web | Bluehost | Hostinger | |
| Entry plan, renewal price | Essentials, $9/mo | Starter, $9.99/mo | Premium, $10.99/mo |
| Resource model | Dedicated CPU and RAM per site | Shared | Shared |
| Backups | Daily, 7-day retention (30-day on Elite) | Weekly | Weekly (daily on Unlimited and above) |
| Migration | Self-serve tool, or human-assisted on Pro and Elite | Self-serve plugin | Self-serve tool |
| Security included | WAF, DDoS protection, malware monitoring, Kadence Security Pro | SSL, basic malware scan | SSL, basic malware scan |
| Support | 24/7, phone, chat, and ticket | 24/7 chat; phone from Business tier up | 24/7 chat |
| Best for | Firms where the site drives inquiries and downtime has a cost | Small firms wanting the lowest entry price on a known brand | Solo practitioners on the tightest budget |
Setting this up on Liquid Web as a worked example:
- Choose a plan. A single firm site with a heavy image library is well served by a managed VPS, which gives you isolated CPU and RAM so your performance does not fluctuate based on someone else’s traffic.
- Point your domain. In your registrar’s DNS settings, update the nameservers or A record to the values your host provides. Propagation usually takes under an hour.
- Install WordPress from the control panel. This is a one-click operation.
- Enable SSL. Certificates are included and provision automatically.
- Create a staging site. You will build here and push to the live site (“production”) when it is ready, so nothing half-finished is ever public.
- Confirm backups are running daily and that you know how to restore one.
Budget: roughly $20 to $150 a month depending on resources. For a firm where the website is a primary source of new inquiries, this is the cheapest insurance in your overhead.
Step 4: Install Kadence
On your staging site:
- Log into the WordPress dashboard.
- Go to Appearance, then Themes, then Add New, and search for Kadence. Install and activate the free theme.
- Install the Kadence Starter Templates plugin, then browse the library. Filter for portfolio and agency layouts. Import one that is structurally close to your sitemap, and ignore the demo content and colors, since you will replace all of it.
- Add your Kadence license key if you bought Essentials or higher, which activates the additional blocks and design tools.
- Open the Customizer and set your globals first: typefaces, type scale, color palette, container widths, and button styles. Doing this before you build any pages means every page you build afterward inherits the system automatically.
- Build the header with the Header Builder. Logo left, navigation right, contact link visible on mobile.
- Build the footer: office addresses, phone, email, social, and a short line about the practice.
Step 5: Build the project archive
This is the part that determines whether the site is still useful in five years.
Create Projects as a custom post type rather than using standard blog posts. Kadence works with the common custom post type plugins, and your host’s WordPress install may include one.
Define your fields: typology, location, year completed, size, client type, program, project team, consultants, awards, photographer.
Build one project detail template and reuse it for every project. A pattern that works: full-width hero image, project name and location, a two-column layout with narrative on the left and the metadata block on the right, then the image sequence, then plans and drawings, then credits, then links to two related projects.
Build the index page as a filterable grid driven by your typology field. Pull the featured image, project name, location, and year into each card.
Then publish three projects completely, front to back, before you touch the other twenty. You will find template problems on the second one, and fixing them once is far better than fixing them twenty-three times.
Step 6: Write the pages
Project descriptions work best in four beats: the brief, the constraint, the response, the outcome. Two hundred to four hundred words. What the client needed, what made it hard (site, budget, code, program, climate), what you did about it, and what the building does now.
Skip the material adjectives unless a material choice was the answer to the constraint.
The About page should answer why the practice exists and how you work, in the voice a principal would use in a first meeting.
The Services page should lay out your phases in plain language with rough timelines, because most private clients genuinely do not know what they are buying.
Step 7: Prepare the images so the site stays fast
The files your photographer delivers are not web files. A 40MB TIFF is correct for print and catastrophic for a homepage.
Export at the dimensions you actually display: 2560px wide is plenty for a full-bleed hero, 1200px for content images, 800px for grid thumbnails. Convert to WebP or AVIF, which cut file size by 25 to 50 percent against JPEG at the same visual quality. Target under 300KB for heroes and under 150KB for everything else.
Let WordPress generate responsive srcset versions so phones do not download desktop files.
Enable lazy loading for anything below the fold, and keep it off your hero image, since lazy-loading the first thing a visitor sees delays it.
Then run the site through PageSpeed Insights and fix what it flags. Do this before launch and again a month after, once real content volume is in place.
Step 8: Pre-launch checklist
- Every page tested on a real phone, not just a browser resized
- Every form submitted as a test and confirmed to arrive in the right inbox
- 301 redirects mapped from every old URL to its new equivalent
- Custom 404 page that links back to Projects and Contact
- Google Analytics and Search Console installed and verified
- XML sitemap submitted
- Favicon and Open Graph images set, so shared links do not render blank
- Keyboard navigation tested end to end, alt text on every image
- Backups confirmed running, and a restore tested once
- SSL active and forcing HTTPS
Step 9: After launch
Add each project as it completes, not in an annual batch you will skip. Run WordPress core, theme, and plugin updates monthly on staging before pushing to production. Review Search Console quarterly to see what people are actually finding you for. Refresh the People page whenever the team changes.
What an architecture website build costs
DIY, doing it yourself: domain at $15 a year, hosting at about $250 a year, Kadence at $99 a year. Call it $400+ annually, plus 40 to 80 hours of your own time.
DIY plus specialists: the above, plus a copywriter at $4,000 and, if you need new project photography, $1,500 to $5,000 per shoot. Photography is usually the largest line and usually the best return.
Agency-built: $8,000 to $25,000 for a small to mid-size firm site, $25,000 to $80,000 and up for a large practice with a deep archive, multiple languages, or a custom design system. Ongoing hosting and maintenance runs $1,200 to $6,000 a year on top.
Most firms underestimate year two. Whatever you spend to build it, budget for hosting, licenses, updates, and someone’s time to add projects.
When to hire an agency instead
Building it yourself is realistic for a firm with a design-minded staff member who has 60 hours to give it. Several situations point the other way.
- You have a large archive to migrate, and the structure and redirects alone are a project.
- You need multiple languages or multiple office sites.
- A rebrand is happening in parallel, and the site should follow the identity rather than lead it.
- Nobody internally will own the site after launch.
- The site drives real revenue, and a one percent improvement in inquiry rate is worth more than the fee.
A good engagement includes discovery, information architecture, custom design, content strategy, the build, training your team to maintain it, and defined post-launch support.
When you evaluate agencies, ask three questions.
- Can you show me portfolio-heavy or image-heavy work you have built?
- What happens after launch, specifically?
- Do we own the site and can we take it elsewhere?
Modern Tribe is one example of a WordPress agency working at this level, with experience on content-heavy, design-led sites of the kind architecture practices need.
There is also a middle path many firms land on: the agency designs and builds the framework, then trains your team to add projects on Kadence. You get a custom foundation and control your own archive, without a support ticket every time a project completes.
Architecture website build FAQs
How much does an architecture firm website cost?
Building it yourself runs $400+ per year for domain, hosting, and a theme license. Agency builds start around $8,000 for a small firm and reach $80,000 or more for large practices with deep archives. Photography and copywriting are separate and often the biggest line items.
What is the best website builder for architects?
WordPress paired with a robust theme like Kadence, for firms planning to grow the site over several years, because you own the site and there is no design ceiling. Squarespace is a reasonable choice for a small studio with a static portfolio and no appetite for maintenance.
Do architects need WordPress, or is Squarespace enough?
Squarespace is enough if you have fewer than twenty projects, one language, and no plans for a careers section or journal. Past that, template limits and the inability to model project metadata properly start costing you more than the platform saves.
How many projects should I put on my website?
Twelve to twenty-five well-documented projects beat sixty thin ones. Include work you want more of, and cover every typology you want to be hired for. If a project has fewer than six good photographs, leave it out.
How do I make an image-heavy architecture site load fast?
Export images at display dimensions, convert to WebP or AVIF, keep heroes under 300KB and content images under 150KB, enable lazy loading below the fold, and use hosting with dedicated resources and CDN delivery. Then verify with PageSpeed Insights.
Should my website include project costs or client names?
Only with written client permission, but many contracts restrict both. Construction cost ranges are safer than exact figures, and “private residence” or “confidential client” is standard and understood. Always publish square footage and completion year, since those are what prospects use to gauge fit.
Does my firm’s website need to be ADA compliant?
Legal requirements vary by jurisdiction and by whether you do public or federally funded work, though web accessibility lawsuits against professional services firms have increased. WCAG 2.2 AA is the practical standard, and meeting it is both defensible and better for every visitor.
How long does it take to build a website for an architecture firm?
Four to eight weeks doing it yourself, assuming the content is ready. Ten to twenty weeks with an agency. In both cases, gathering project images, writing copy, and clearing photography rights takes longer than the build, so start there.
How often should I update it?
Add projects as they complete. Run software updates monthly. Review the People page whenever the team changes, and do a broader content review annually. Anything less and the site drifts out of date faster than you notice.
Getting started with your architecture firm’s website
Treat the website the way you would treat any commission: program it, design it, build it, and maintain it. The programming step is the one firms skip, and it is the one that determines whether the result works.
The firms in this article did not get good websites by accident. They decided what the site was for, then built toward it.
