Rainline Architects
An architecture and heritage practice’s website told with drawings: a project atlas on a map, a timeline and an index, case studies with plans, sections and benchmarked performance, and a brief builder that says who will reply.
The brief
An architecture practice is judged on its thinking, yet many practice websites lead with full-bleed video and photographs, with project pages that show images and little else. Plans and sections are rare, no site we studied measures sustainability against the local benchmarks, and starting a project usually means finding an email address.
What we shipped
A practice website told with drawings: a home page that pairs each visualisation with its section, a project atlas on a map, a timeline and an index, case studies with plans, sections and performance against the GBI and Green Mark benchmarks, a George Town heritage dossier with retained and new work in layers, a brief builder that says who will reply, Chinese key pages, and a studio desk where enquiries arrive already routed and projects are published into the atlas.
Built for: Architecture, interior design, engineering and planning practices, and any professional firm whose drawings, data and people are the proof of its work.
Inside the build
Every part, and what it does
A closer look at what was actually built — screen by screen, so you can judge the depth for yourself.
Home page
The first screen pairs a visualisation of a house with its long section, so the practice’s idea is clear before any scrolling.
- A plain headline with two actions
- Numbered, captioned and credited plates
- Sections with level marks, a room key and a scale bar
Project atlas: map
Every project on a drawn map of Southeast Asia with a Peninsular Malaysia detail, filtered by typology, discipline, status, scale and country.
- Numbered tags that never collide
- Filters with counts, shared by all three views
- Filtered views kept in the address to share
Project atlas: timeline
The same projects on a year axis, with drawing conventions for status and a line for today.
- Solid for built, hatched for on site, dashed for in design
- Each project’s own section pictogram
- Recomposed on phones, never scrolled sideways
The drawing set
Each case study has its own plans and sections, here a heritage row’s ground floor with numbered rooms and buttons for the retained fabric, the new work or both.
- Plans and sections for all 13 projects
- Labels readable at every width
- Scale bars and drawing credits
Performance against the benchmarks
Sustainability figures shown against the GBI and Green Mark benchmarks, each marked as a sample.
- A rating ladder and an energy ruler
- Daylight and natural ventilation meters
- Sources named, nothing claimed as awarded
Kept, repaired, added
A street elevation of five George Town shophouses where the visitor switches between the retained fabric and the new work.
- Retained in black, new in blue, removals dashed
- A numbered key for every repair
- The same drawings feed the case study
How a project runs
Eight stages laid out like a scale bar, each saying what the practice delivers and what the client decides.
- A design review with named people
- Measures against the GBI and Green Mark benchmarks
- From the first conversation to a year after handover
People
Partners in black and white, directors as a schedule and the whole team as a searchable roll.
- Registration and institute membership shown apart (samples)
- Projects led, linked from each profile
- A searchable roll instead of a grid of 80 cards
Who will reply
After seven short questions the visitor sees which studio and partner will reply and why, beside the brief laid out as a sheet.
- Routing rules in plain words
- Only an independent review when another architect is appointed
- A data notice and a separate marketing consent
Chinese pages
Key pages in Simplified Chinese with Chinese map labels; a brief sent in Chinese is routed the same way.
- The language switch keeps the page
- Links to English-only pages say so
- System Chinese fonts, nothing heavy to download
Enquiry desk
Staff see every enquiry already routed to a studio and a person, move it through stages, reassign it and add notes.
- A stage pipeline sized by count
- A reading pane with the brief as a schedule
- The public site’s palette and type
Publishing with a live preview
Staff add a project and watch its atlas pin, index row and case-study header update as they type.
- A map picker that follows typed coordinates
- Publishing updates the map, index, timeline and search
- Unpublishing removes it everywhere
Brand identity
An architecture practice that lets its projects lead: a quiet linear mark, graphite and rain blue on tracing white, all in Host Grotesk.
- Logo and one-colour version
- Graphite and rain blue
- One typeface family
Click through it yourself
Every screen above is interactive. No sign-up, nothing to install.
Behind the build
Researched first, then built
Before designing anything, we studied 17 architecture practice websites: seven Malaysian practices, three in Singapore and seven international leaders, at desktop and phone sizes, using their filters, list and map views. Nothing was copied. Each finding below changed a decision.
Studied (17)
- Veritas Design Group
- GDP Architects
- ZLG Design
- Eleena Jamil Architect
- WHBC Architects
- Studio Bikin
- DRTAN LM Architect
- WOHA
- Kerry Hill Architects
- SCDA
- BIG
- Snøhetta
- MVRDV
- Herzog & de Meuron
- Heatherwick Studio
- Studio Gang
- Henning Larsen
What we saw
What Rainline Architects does
What we saw
Three of the Malaysian practices lead with full-bleed video or photographs, and their project pages show images with no facts, team or drawings.
What Rainline Architects does
Every case study opens with a fact schedule that states the practice’s exact role, then the brief and site, the idea, drawings, materials, performance and credits.
What we saw
Plans and sections are rare on practice websites, and most Malaysian project pages show photographs only.
What Rainline Architects does
A drawing set for all 13 projects, drawn in code, with retained, new and removed layers, and drawings beside the images on the home page.
What we saw
Only one site shows sustainability figures, and none measures them against the local benchmarks.
What Rainline Architects does
Performance panels against the GBI and Green Mark benchmarks, each value marked as a sample.
What we saw
The international leaders offer list and map views with several filters; no site has a timeline.
What Rainline Architects does
One atlas with a map, an index and a timeline, sharing filters that stay in the address.
What we saw
No site offers a guided way to start a project; most give an email address, and only three split contacts by enquiry type.
What Rainline Architects does
A brief builder that shows which studio and partner will reply before sending, a routed contact form and a press kit request, all landing in a studio desk.
What we saw
Two Malaysian sites call themselves “award-winning” or “best”, which the architects’ code of conduct does not allow.
What Rainline Architects does
Plain copy throughout, a test that fails on superlatives, and recognition only as marked sample news.
What we saw
Three leaders publish Chinese versions, and one asks for consent before loading its third-party map.
What Rainline Architects does
Simplified Chinese key pages, and maps drawn on the site from public-domain data, so there are no third-party scripts or consent banners.
Feature checklist
47 of the 56 features the leading sites offer
We listed every feature we found in the research above. Rainline Architects has 47 of them, and 2 more in part; the 7 left out are listed with the reason.
Work and projects15
- Project index
- Typology filter
- Discipline filter
- Status labels
- Location filter
- Period filter
- Theme tags
- Map view
- List view
- Catalogue numbers
- Project search
- Sort control
- Result count
- Drawings in the index
- Printable project sheet
Case studies10
- Long-form narrative
- Fact sheet
- Team credits
- Image credits
- Plans and sections
- Sustainability figures
- Sustainability narrative
- Related projects
- Named project contact
- News linked to projects
Practice, people and writing9
- Practice page
- Leadership profiles
- Team directory
- Black-and-white portraits
- Research and writing
- Talks
- News
- Sustainability page
- Studios
Careers5
- Careers page
- Job filters
- Online application
- Open application
- Studio life
Contact8
- Contact page
- Enquiries split by type
- Contact form
- Press contact
- Lecture requests
- Newsletter
- Site search
- Chinese version
Built in part
- Exhibitions: shown only as marked sample news items.
- Awards and recognition: recognition appears only as marked sample news, never as a claim.
Left out, and why
- Zoomable thumbnails: zoom lives on the map, where it carries meaning.
- Awards on project pages: a concept practice has no awards to claim.
- A shop: it is not this practice’s business.
- Video: stills and drawings carry the story, with nothing on autoplay.
- Social links: a concept practice has no accounts, and invented handles could belong to real people.
- Cookie controls and map consent (2): the site loads no third-party scripts or maps, so there is nothing to consent to.
Design research
How the leading sites look, and what we took
We measured the type, colour and layout of the practices we studied, then applied what the best of them share in an original design, on the public site and in the staff screens.
Across the leading sites
In Rainline Architects
Across the leading sites
Neutral grotesques dominate; serifs appear at only three practices.
In Rainline Architects
Host Grotesk for display and text.
Across the leading sites
Light to regular weights at large sizes, such as 96 px at weight 300.
In Rainline Architects
Host Grotesk 300 at 56 to 104 px with tight leading.
Across the leading sites
Monospace carries numbers and captions at the leaders.
In Rainline Architects
Fragment Mono for catalogue numbers, captions, credits, drawing labels and data.
Across the leading sites
White grounds, near-black text and one rare accent.
In Rainline Architects
Paper white and a cool tracing grey, graphite text and one accent, rain blue, for the rain line, links and highlighted values.
Across the leading sites
Large images in project grids or feeds.
In Rainline Architects
A 12-column grid with each section composed for its content, and index rows instead of cards.
Across the leading sites
Professional photography, often overcast or at dusk.
In Rainline Architects
One art-directed set of visualisations in the same after-rain light, each labelled and credited.
Across the leading sites
Plans and sections are rare; one Malaysian practice uses sketches as its project index.
In Rainline Architects
Plans and sections for every project, given as much space as the images.
Across the leading sites
Hero sliders and autoplay video.
In Rainline Architects
No autoplay; drawings draw in once, and motion is off when reduced motion is set.
Rules it follows
The business rules, built in
The prototype enforces each of these, so you can test them yourself.
Professional conduct
- No comparative or superlative claims, checked by a test
- The practice’s exact role stated on every project
- Materials named generically, with no product endorsed
- Only an independent review when another architect is appointed
Registration
- “Ar.” only for professional architects
- Practice and personal registrations shown as marked samples
- Institute membership shown apart from registration
Sustainability benchmarks
- Energy intensity against the GBI ceiling of 180 kWh/m² a year, with points from 150
- Daylight and OTTV against their GBI limits
- Ratings shown as design targets, never as awarded
Heritage in George Town
- Category I and II buildings under the Special Area Plan
- Repair before adding, with traditional materials
- Permits, contractors and incentives named, with a note to check current terms
Copyright and personal data
- Every image and drawing credited
- A data-protection notice on every form, with purpose and retention
- A separate unticked marketing consent; applications deleted after 12 months
Connected roles
One action, every screen
Every role works on the same records, so one person’s action shows up for the others.
- 1
A visitor sends a brief from “start a project”, and it appears at the top of the studio desk, already routed to its studio and partner, with its reference.
- 2
The studio publishes a project in the desk, and it appears on the atlas map, in the index and timeline, in search and in the home page count; unpublishing removes it everywhere.
- 3
The studio edits a live project’s summary or status, and the case study, the atlas, the home page and search change with it.
- 4
An architect applies for a role with a CV and portfolio, and the application appears in the desk with a delete-by date twelve months on.
- 5
A journalist requests the press kit, and the request appears in the desk’s press tab with its deadline.
- 6
A visitor filters the atlas and shares the link, and the same view opens; “ask about a project like this” opens the brief builder with the building type filled in.
- 7
A visitor sends a brief in Chinese, and it reaches the desk marked “prefers Chinese”.
Services it proves
Where Rainline Architects is our example
Each of these service pages uses a part of Rainline Architects to show the work. Open one to see what we would build for you.
- Business & corporate websitesAn architecture practice’s website told with drawings: a project atlas on a map, a timeline and an index, case studies with plans and sections, and a brief builder that says who will reply.
- Portfolio websitesShows: Project atlas: mapA practice’s whole portfolio three ways, on a map, a timeline and an index with shared filters, and a case study with drawn plans and sections for every project.
- Content & publication sitesShows: Publishing with a live previewThe studio adds a project and watches its map pin, index row and case-study header update as they type; publishing puts it on the atlas, in search and in the home page count.
- Corporate & governmentShows: Publishing with a live previewStaff add a project and watch its map pin, index row and page update before they publish.
- Branding & logoShows: Brand identityAn architecture practice’s restrained identity that lets the projects lead.
- CopywritingShows: Chinese pagesAn architecture practice’s pages in Chinese, written for clients who read Chinese first.
- Professional servicesShows: Project atlas: mapAn architecture practice: a project atlas, the drawing set and a brief builder for new clients.
Core systems
What this build is made of
These are systems we build repeatedly — each links to every other project that contains it, so you can compare implementations before deciding what you need.
Industry: Professional services, Property
Unique to this build
Built specifically for this project rather than assembled from the shelf.
Project atlas
Every project on a drawn map, a timeline and an index, sharing filters that stay in the address so a view can be shared.
Drawing sets in code
Plans and sections for all 13 projects, with layers that separate retained fabric, new work and removed additions.
Brief builder with routing
Seven questions, then the studio and partner who will reply, before anything is sent; the brief lands in the studio desk.
Want a build like this for your business?
Tell us what you have in mind and we'll put together a functional prototype of your project — free.