An architecture or interior design studio website should let finished projects lead, with project pages that combine photos, drawings and a short account of the brief and the decisions, a restrained type system, and the practical pages clients need: services, process, fees approach and contact. Studios sell something clients cannot try before they buy, a way of thinking about space, so the site has to show that thinking while staying quick and easy to use. Studio sites often go wrong in one of two directions: so minimal that visitors cannot tell what the practice does or where it works, or so heavy with full-screen imagery that the pages crawl on a phone.
This guide covers page structure, project pages, image-led layouts, typography, image rights and the practical information prospective clients look for.
Key takeaways
- Let projects lead, with a short statement of the studio’s focus and location near the top.
- Build project pages that combine photos, drawings and text about the brief, site and decisions.
- Use a restrained type system with one or two families, generous spacing and clear hierarchy.
- Prepare images properly: right size, compressed, with alt text and photographer credits.
- Include the practical pages clients need: services, process, fees approach, contact.
Recommended page structure
Pages, in order of importance:
- Home
- Projects index
- Individual project pages
- Studio or practice (approach, people, history)
- Services
- Process (how a project runs, stages, what clients need to provide)
- Contact
- News, publications and awards (only real ones, kept current)
- Careers
- Privacy policy and legal pages
Homepage sections, in order:
- Header with studio name and short navigation
- Hero: one strong image of a completed project, with the project name and a link
- Studio statement: one or two sentences on what you design, for whom and where
- Selected projects: four to eight in a grid or as large stacked images with captions
- Services in short form: for example residential, workplace, hospitality, interiors only, renovation
- Approach: a short paragraph or three short points on how you work with clients
- Recent news or publications, if current
- Contact prompt with email, phone and studio address
- Footer with registration details where required, social links and legal pages
What each page does
| Page | Purpose | What to include |
|---|---|---|
| Home | Set tone and route visitors to projects | Strong image, studio statement, selected projects, contact |
| Projects index | Browse and filter work | Grid with image, name, location, type, year, status |
| Project page | Explain one project | Photos, drawings, brief, site, decisions, materials, credits |
| Studio | Show the people and approach | Team, principals, approach, history, registration details |
| Services | Explain what clients can hire you for | Project types, scope of service, stages offered |
| Process | Set expectations for a project | Stages, typical timings, client input, approvals in general terms |
| Contact | Start an enquiry | Email, phone, address, short form, what to include |
Project index and filters
- Use a consistent image ratio so the grid stays orderly. Landscape crops suit most architectural photography; interiors may need a mix, but keep it to two ratios at most.
- Caption every project with name, location and type. Hover-only captions do not work on touch screens.
- Mark status honestly: completed, under construction, competition entry, concept. Visitors and the press care about the difference.
- Filter by type (residential, commercial, interiors, landscape) once you have enough projects to make filters useful.
- Order deliberately, putting the work you want more of near the top.
Project pages
A good project page explains why the building or interior looks the way it does. A structure that suits most practices:
- Header image and project name, location, type, year and status
- Summary: the brief in two or three sentences
- Site and context: what was there before, constraints, orientation, neighbours, heritage considerations
- Design decisions: the main moves and why, in plain language rather than theory
- Drawings: plans, sections or sketches, simplified for screen and with sensitive details removed
- Photographs: a sequence that walks the visitor through the space, exterior to interior
- Materials and details: what was used and where
- Credits: client (with permission), collaborators, consultants, contractor, photographer
- Next and previous project links
A few points of care:
- Ask clients before identifying private homes, and avoid exact addresses or photos that show house numbers.
- Remove security-sensitive details from drawings, such as alarm layouts or safe rooms.
- Credit collaborators fairly. If the project was delivered with another practice, say so and describe your role.
- Do not present renderings as built work. Label visualizations clearly.
If you work with a builder on design-and-build projects, the construction company website guide covers how contractors present the same projects, which helps keep both sites consistent.
Typography
Studio sites often rely on typography more than color. A restrained system works best:
- One or two typefaces. A single well-made sans-serif can carry the whole site in several weights. If you pair two, give them clearly different roles, such as a serif for headings and a sans-serif for text. Our font pairing guide covers readable combinations and licensing.
- Comfortable body size and line length. Project text should be readable without zooming, with lines that do not stretch across a wide monitor.
- Generous spacing between sections and around images. White space is part of the design language for most practices.
- Clear hierarchy: project name, facts, then text, with consistent sizes on every project page.
- Check web font licenses before using a typeface from your print identity. Desktop and web licenses are often separate.
Images and colors
Image-led layouts can be fast if the images are prepared properly.
- Export at display size with a larger version for high-density screens, and compress. A gallery of uncompressed photos straight from the photographer can weigh many times more than it needs to. See our guide to choosing and preparing website images.
- Lazy-load images below the first screen, but not the hero image.
- Avoid full-screen sliders on the homepage that load many large images before anyone scrolls. A single image, or a short sequence that loads progressively, works better.
- Keep a neutral palette: white, warm white, light grey or near-black backgrounds let photographs and drawings carry the color. Use one accent sparingly for links.
- Present drawings on a light background at a size where line weights are still visible, and offer a larger view on click.
- Write alt text that describes the space: “Double-height kitchen with timber ceiling and a long window facing the garden.”
- Credit photographers on each project page and check whether your license allows use on social media and in press kits as well as on the site.
If you build with a page builder, image galleries, sliders and animation effects are where most of the weight comes from. Our guide to keeping page builder sites fast has a step-by-step checklist.
Practical information clients look for
Minimal studio sites often leave out the things a prospective client needs before getting in touch:
- Location and where you work: city, region, and whether you take projects further afield
- Project types and scale you take on, and any minimum
- Services: full architectural service, planning applications only, interiors only, consultation
- How fees are approached, for example percentage of build cost, fixed fee per stage or hourly for consultations, without quoting figures you cannot hold
- The stages of a project and roughly how long each takes
- What to send with an enquiry: location, brief, budget range, timing, any drawings or photos
Many professional bodies publish standard stages of work. If you follow one, you can refer to it in general terms on the process page.
Content to prepare before building
- A one or two sentence studio statement
- A shortlist of projects with approved photos, drawings and credits
- Photography licenses, with any credit wording the photographers require
- Project facts: location (as precise as clients allow), type, year, status, size where useful
- Team photos and bios, with titles that follow local rules
- Services and process descriptions
- Your approach to fees in general terms
- Registration details where your profession requires them on websites
- Real publications, awards and talks, with dates
- Contact details, studio address and a privacy policy covering enquiry forms
Common mistakes
- No location or service description, leaving visitors unsure where you work or what you do.
- Huge images and autoplaying sliders that make the homepage slow on mobile.
- Hover-only captions and hidden navigation that make projects hard to identify.
- Renderings mixed with photos of built work without labels.
- Missing photographer credits, or photos used beyond what the license allows.
- Light grey text on white in small sizes, which looks refined but is hard to read.
- A news page that stopped years ago.
- Professional titles used where local rules do not permit them.
FAQ
Should a small studio publish fees?
Exact fees are hard to publish because scope varies, but explaining how you charge and what affects the cost helps clients self-select. Some studios offer a fixed-fee initial consultation and publish that price.
Can we show projects from a previous employer?
Only with permission, and with your role stated clearly. Many practices allow former staff to show work in a portfolio with a credit to the practice; few allow it to be presented as the new studio’s project.
Do we need a blog?
Not necessarily. A short news section with real updates, or longer essays about specific projects, can work. An outdated feed is worse than none. The creative agency and portfolio guide has more on keeping a journal manageable.
Bottom line
Let completed projects lead, but frame them with a clear statement of what the studio designs and where. Build project pages that combine photos, drawings and plain explanation, with honest status labels and full credits. Keep typography restrained and readable, prepare images so an image-led site stays fast, and include the practical information clients need before they write. Our guide to writing and designing an about page helps with the studio page.