§ 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.
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)
- 01 PUBLIC Work — The project index — few entries, large images.
- 02 PUBLIC Studio — People, philosophy, awards.
- 03 PUBLIC Process — How a commission runs from brief to handover.
- 04 PUBLIC Contact — Qualified enquiry form.
- 05 PUBLIC Journal — Ongoing notes, visits and material studies.
- 06 AUTH Sign up — Create an account with email or a social provider.
- 07 AUTH Log in — Return to the account, with error and lockout states.
- 08 AUTH Reset password — Request a reset link and set a new password.
- 09 APP (signed in) Account settings — Profile, email, password, language and delete account.
- 10 LEGAL & SYSTEM Privacy policy — What data is collected, why, and how to remove it.
- 11 LEGAL & SYSTEM Terms of service — Rules of use, liability and account termination.
- 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
