Prototypes

Throwaway HTML, filed by category. Every prototype is one self-contained file — no build, no server, no persistence. Each set asks one design question and answers it several incompatible ways on purpose.

Within a set the content is held constant so the comparison is honest: what changes between siblings is structure, never subject matter. The facets under each entry are what you actually choose between.


Wedding

/wedding 1 set · 4 prototypes

RSVP

wedding/rsvp

What shape should a wedding website be? Four answers that disagree structurally, not cosmetically — the primary surface, the information architecture and the record a backend would have to store are different in each.

Philippine settings throughout: church then a separate reception, principal sponsors, Filipiniana dress codes, GCash instead of a gift table.

Open the set →
  1. 01 ScrollfilmTagaytay ridge, Cavite · one day

    The invitation as a story you scroll — chapters, parallax photography, RSVP as the closing beat rather than a form bolted on.

    Surface
    Scroll narrative
    Input
    Guest-list lookup, then a row per seat
    Output
    Confirmation
  2. 02 ThreadNasugbu, Batangas · church then reception

    A fixed poster beside a message thread that is the website. No details page — the couple send them to you one question at a time, and answer anything you ask back.

    Surface
    Conversation
    Input
    Branching script, rewindable
    Output
    Summary card
  3. 03 The SuiteVigan, Ilocos Sur · cathedral then heritage house

    Keeps the paper ritual: break the wax seal, flick through a pocket of cards, fill in a reply card as a sentence rather than a form.

    Surface
    Stack of objects
    Input
    Fill-in-the-blank sentence
    Output
    Postmark and a guest pass
  4. 04 AtlasEl Nido, Palawan · three-day destination

    For a wedding people have to fly to. A hand-drawn map stays pinned beside the content and follows you down the page; details are filed by place, not by topic.

    Surface
    Map
    Input
    Travel form — dates, airport, party
    Output
    Itinerary receipt

School

/school 2 sets · 5 prototypes

Public site

school/public-site

One K–12 school website, four editorial strategies. The section inventory and the fixture content are identical in all four — same principal, same science-fair medals, same exam week.

What differs is what a parent hits second, after the hero. That is the only real decision a school website makes, and each version answers it differently.

Open the set →
  1. v1 Testimonial FocusBrighter Futures Academy · est. 1958

    A testimonial grid and a full-bleed parent quote land before the school says a word about itself.

    Leads with
    Testimonials
    Strategy
    Persuasion
    Best when
    Reputation is the asset
  2. v2 Information HubLakeside International School · est. 1973

    Quick-access links in the hero, news as a table with a status column, events as a real month calendar, faculty as a directory of eight.

    Leads with
    Academic programmes
    Strategy
    Retrieval — densest of the four
    Best when
    Existing parents are the traffic
  3. v3 Visual StoryRidgeline Academy · est. 1962

    Full-bleed campus photography, a scroll cue, the gallery promoted to a first-class section, copy set as display headings.

    Leads with
    The school's story
    Strategy
    Atmosphere — photo-dependent
    Best when
    The campus is the selling point
  4. v4 Clean CanvasMeridian School · est. 1981

    The admissions CTA sits directly under the hero — dates, requirements and the registrar's number before anything else. Needs no photography.

    Leads with
    The enrolment CTA
    Strategy
    Conversion — shortest path to apply
    Best when
    Photography is weak or unbudgeted

CMS

school/cms

The other half of a school website, and the half that decides whether it stays current: who updates it, and how much they have to understand to do it safely.

Filed as its own set rather than a fifth public-site direction — different audience, different artifact.

Open the set →
  1. 01 SiteDesk AdminEvergreen Academy · seven panels

    Sidebar shell with an activity-led overview, then a panel per content type. News carries draft and published states; uploaded files show which page links them, so deleting one is not a guess.

    Surface
    Sidebar shell, panel switching
    Audience
    School staff, not developers
    Access
    Admin, plus editors scoped per section