Skip to main content

§ masterplan.md

Minimal Architect Studio

A classy minimal studio site with full-screen project imagery, process essays and a contact form hidden behind a calm overlay.

All ideas
Classy Minimal

01

App overview and objectives

A studio portfolio built around a handful of projects presented at full width, with drawings, process and finished photography in sequence. The site should win commissions by demonstrating thinking, not by listing services.

02

The problem worth solving

Architecture clients choose a studio on judgement and taste. Showing the reasoning behind three projects convinces far more than showing thumbnails of thirty.

03

Target audience

  • Primary — Prospective private and institutional clients evaluating studios.
  • Secondary — Press, students and potential hires studying the practice.

04

Roles and permissions

  • Visitor — read-only public pages, can sign up.
  • Member — owns their own records, cannot see other users' data.

05

Core features

  • Project pages combining plans, sections, process sketches and final photography
  • Full-bleed image sequences with restrained captions
  • Studio page with people, awards and publications
  • Process page explaining how a commission actually runs, stage by stage
  • Journal for site visits and material studies
  • Enquiry form that captures project type, location and budget band

Deliberately later

  • Press kit downloads
  • Client area for live project documents
  • Bilingual content

06

Technical stack

Static-first React with a headless CMS for projects, an image CDN, and one form endpoint.

Why: Enormous images are the whole product; static rendering plus a CDN makes them fast, and the studio can publish without touching code.

Alternatives: A design-led page builder (quick, template smell) or a bespoke CMS (perfect fit, ongoing maintenance burden).

07

Conceptual data model

Project — name, location, year, typology, status, narrative, media sequence

MediaItem — project, type (photo, plan, sketch), caption, credit, order

Person — name, role, bio, portrait

JournalEntry — title, body, images, date

Enquiry — name, contact, project type, budget band, message

08

Integrations

  • Image CDN with responsive formats
  • Email delivery
  • Optional analytics

09

UI design principles

  • Generous whitespace, a two-font system, and a palette of three colours at most.
  • Photography and typography do the work; borders, shadows and gradients stay almost invisible.
  • Every screen has one clear primary action, placed in the same spot each time.

10

Security considerations

  • Unbuilt or confidential projects hidden behind a private link.
  • Photographer credits enforced as required fields to avoid licensing disputes.
  • Spam filtering on the enquiry form.

11

Development phases

Phase 1 — Prove the core

  • — Project pages combining plans, sections, process sketches and final photography
  • — Full-bleed image sequences with restrained captions
  • — Studio page with people, awards and publications
  • — Static content and design system in place
  • — Basic analytics

Phase 2 — Make it real

  • — Process page explaining how a commission actually runs, stage by stage
  • — Journal for site visits and material studies
  • — Enquiry form that captures project type, location and budget band
  • — Accounts, sign-in and password reset
  • — Empty, loading and error states everywhere

Phase 3 — Polish and launch

  • — Performance, accessibility and SEO pass
  • — Legal pages, contact route and 404 handling
  • — Wire up: Image CDN with responsive formats
  • — Wire up: Email delivery

Phase 4 — Grow

  • — Press kit downloads
  • — Client area for live project documents
  • — Bilingual content

12

Challenges and solutions

Risk — Massive drawings load slowly

Solution — Tile large drawings, serve responsive sizes and lazy-load below the fold.

Risk — Minimalism becomes unusable

Solution — Keep one persistent, visible navigation element and never hide it behind a hover.

Risk — Content goes stale between projects

Solution — The journal gives the studio something to publish monthly.

13

Future expansion

  • Client project portal
  • Exhibition microsites
  • Recruitment section

14

Page list (12 pages)

  1. 01 PUBLIC Work — The project index — few entries, large images.
  2. 02 PUBLIC Studio — People, philosophy, awards.
  3. 03 PUBLIC Process — How a commission runs from brief to handover.
  4. 04 PUBLIC Contact — Qualified enquiry form.
  5. 05 PUBLIC Journal — Ongoing notes, visits and material studies.
  6. 06 AUTH Sign up — Create an account with email or a social provider.
  7. 07 AUTH Log in — Return to the account, with error and lockout states.
  8. 08 AUTH Reset password — Request a reset link and set a new password.
  9. 09 APP (signed in) Account settings — Profile, email, password, language and delete account.
  10. 10 LEGAL & SYSTEM Privacy policy — What data is collected, why, and how to remove it.
  11. 11 LEGAL & SYSTEM Terms of service — Rules of use, liability and account termination.
  12. 12 LEGAL & SYSTEM 404 not found — Friendly dead end with search and links back.

15

Page map

PUBLIC      AUTH               APP (signed in)      LEGAL & SYSTEM
──────────  ─────────────────  ───────────────────  ───────────────────
├─ Work     ├─ Sign up         └─ Account settings  ├─ Privacy policy
├─ Studio   ├─ Log in                               ├─ Terms of service
├─ Process  └─ Reset password                       └─ 404 not found
├─ Contact
└─ Journal

key flows:
  Work ──▶ Process
  Process ──▶ Contact
  Journal ──▶ Work