Read Studio

Web redesign · Architectural direction · 8 boards

Design Boards · v0.2 · 2026
Prepared for Read Studio
Style — Monochrome & Architectural

A studio that reads like an editorial.

A complete reskin of readstudio.com.au — built around an editorial grammar (serif headlines, generous whitespace, one terracotta accent) that lets the architectural photography do the heavy lifting. Below are eight boards: home, about, services, work, case study, contact, plus the underlying design system and a sitemap.

Voice

Quiet authority.

Magazine-clean prose. First-person plural without being precious.

Palette

Ink, paper, terracotta.

Refined neutrals carry layout. One punctuation colour.

Type

Fraunces + Inter.

Display serif italics signal editorial; mono for metadata & archives.

Photography

Wide, calm crops.

Architectural photography centres every page. Captions track 0.22em.

Board 01Home · Landing
Spaces that read like a story.

Home / Landing

Hero · marquee · featured project · 3-discipline tiles · stats · selected work grid · approach · press · CTA.

8 sectionsOpen board →
Board 02About · Studio
A studio for people who read
buildings closely.

About / Studio

Manifesto · team (4 portraits) · timeline · awards · two-office cards · careers (3 open roles).

7 sectionsOpen board →
Board 03Services · Capabilities
Three disciplines.
One careful voice.

Services / Capabilities

Three large alternating capability blocks · process timeline · 3 engagement models · FAQ.

6 sectionsOpen board →
Board 04Work · Portfolio index
Selected work,
selected carefully.

Work / Portfolio

Filters · index list (10 visible · 142 total) · grid view alt · pagination · featured pair.

Index + gridOpen board →
Board 05Case study · Deep dive
Headland House,
Tamarama.

Case Study / Project

Meta table · hero image · brief · drawings · alternating gallery · pull quote · material palette · credits · next-up.

9 sectionsOpen board →
Board 06Contact · Start a project
Tell us about the
house you'd like to read.

Contact / Start a project

Interest pills · multi-step brief form · contact panel · map plate · 2 offices · 3 other channels.

5 sectionsOpen board →
Board DSDesign system reference
The studio grammar.

Design system

Logo lockups · 8 colours · type scale · spacing & grid · 6 components · 5 design principles.

FoundationsOpen board →

Sitemap & nav structure

readstudio.com.au
About
  • Manifesto
  • Team
  • Studios (SYD · COL)
  • Careers
Services
  • Architecture & Design
  • BIM Services
  • Visualisation
  • Engagement models
Work
  • Index (filterable)
  • Grid view alt
  • Case study template
  • Marquees collection
Sketchbook
  • Studio journal
  • Process & sketches
  • Press features
Press
  • News & awards
  • Media kit
  • Press contact
Contact
  • Brief form
  • Studio info
  • Press / careers / speaking

Design rationale — six decisions worth defending

01 — Editorial grammar

Architecture is a slow profession. The current site reads as fast and flat — this redesign borrows from print: a serif (Fraunces) for headlines, a clean mono for metadata, and the page rhythm of a magazine spread.

02 — Three disciplines, one studio

Architecture, BIM and Visualisation are siloed in the current IA. We've collapsed them into one Services page with three alternating blocks and three engagement models — making it clear they're co-equal disciplines.

03 — Photography leads, palette defers

The palette is built to recede behind architectural photography. Cream & paper carry the layout; terracotta is reserved for one italic per hero. The work supplies the colour.

04 — Two cities, one team

The Colombo studio is currently buried. We surface it in the nav meta (SYD · COL), in the footer, and as equal-weight cards on About and Contact — recognising it as the BIM & viz engine of the practice.

05 — A discoverable archive

142 projects is a real archive. The Work board introduces a filterable index with project numbers and metadata — and a grid alt for visitors who prefer browsing by image.

06 — A brief, not a contact form

Architecture leads arrive with constraints: a postcode, a budget, a timeline. The contact page is structured to capture that — interest pills, qualifier selects, and a "we read every brief" tone.

How to use these boards

Each board is a live mockup. Click in, scroll the page, toggle design notes — handoff-ready.