Skip to main content
SoftsasiAI for Engineers
Sign in

§ masterplan.md

Raw Architecture Portfolio

A brutalist portfolio for an architect: huge project images, exposed grid lines and no decorative colors.

All ideas
Brutalist

01

App overview and objectives

A portfolio that shows the process as roughly as it happened: scanned sketches, structural diagrams, site photographs, and text set in an unapologetic grid. It sells conviction rather than polish.

02

The problem worth solving

Polished renders make every studio look identical. Showing the mess of thinking differentiates a practice and attracts clients who value ideas over decoration.

03

Target audience

  • Primary — Clients seeking a practice with a distinct point of view.
  • Secondary — Students, critics and collaborators.

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 ordered as process: brief, sketch, structure, built
  • Scanned artefacts presented at large scale with zoom
  • Studio manifesto stated plainly on the first screen
  • Press page with downloadable high-resolution assets
  • Direct contact with no form theatre — an address and an email
  • Print-oriented stylesheet so any page prints as a clean document

Deliberately later

  • Bilingual content
  • Exhibition microsites
  • Lecture archive

06

Technical stack

Static site with markdown project files and an image CDN.

Why: The content is essentially a book; static generation gives archival stability and top-tier performance for very large images.

Alternatives: A CMS-backed site (easier updates, more moving parts) or a portfolio platform (instant, kills the aesthetic).

07

Conceptual data model

Project — name, year, typology, status, stages, media

Stage — project, label, narrative, artefacts in order

Artefact — file, type, caption, credit, scale note

PressItem — publication, date, link, downloadable assets

08

Integrations

  • Image CDN
  • Email
  • Optional analytics

09

UI design principles

  • Raw structure on display: visible grid, hard edges, black-on-white with one violent accent.
  • System or grotesque type at extreme sizes; no decoration that isn't structural.
  • Interactions are instant and blunt — no easing, no fades.

10

Security considerations

  • Confidential client work published only with written permission.
  • High-resolution press assets served from a separate, rate-limited path.
  • Static hosting means minimal attack surface.

11

Development phases

Phase 1 — Prove the core

  • — Project pages ordered as process: brief, sketch, structure, built
  • — Scanned artefacts presented at large scale with zoom
  • — Studio manifesto stated plainly on the first screen
  • — Static content and design system in place
  • — Basic analytics

Phase 2 — Make it real

  • — Press page with downloadable high-resolution assets
  • — Direct contact with no form theatre — an address and an email
  • — Print-oriented stylesheet so any page prints as a clean document
  • — 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
  • — Wire up: Email

Phase 4 — Grow

  • — Bilingual content
  • — Exhibition microsites
  • — Lecture archive

12

Challenges and solutions

Risk — Raw aesthetics read as unfinished to conservative clients

Solution — Keep the information architecture ruthlessly clear — the structure is polished even when the surface is not.

Risk — Scans are enormous

Solution — Tile and progressively load; cap on-screen resolution and offer a download link for the full file.

Risk — Accessibility of extreme type

Solution — Meet contrast requirements, support browser zoom to 200%, and never disable text selection.

13

Future expansion

  • Book publication from the site content
  • Research grants section
  • Collaborator directory

14

Page list (12 pages)

  1. 01 PUBLIC Work — Project index as a raw list.
  2. 02 PUBLIC Studio — Manifesto, people, position.
  3. 03 PUBLIC Process — How the studio actually works.
  4. 04 PUBLIC Contact — Address, email, no form.
  5. 05 PUBLIC Press — Coverage and asset downloads.
  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
└─ Press

key flows:
  Work ──▶ Process
  Studio ──▶ Contact
  Press ──▶ Work