Event registration page

An event registration page has to make a person spend calendar time before they know almost anything. The mockup below is a portfolio design for a fictional one-day design conference called Fold Day. The page treats the date and the room as the actual product and shows the speaker lineup as evidence.

What the hero has to answer

Anyone landing here is asking four questions in the first three seconds: what is it, when is it, where is it, who is speaking. The hero answers all four before a scroll. The eyebrow above the headline states date, city, and duration in a single line so a reader who bounces still carries the useful bit away. The headline sits alone with a short subhead. The primary CTA fills black. The seat count sits next to it in muted grey as a scarcity signal that reads as inventory rather than pressure.

The countdown as trust device

The countdown lives in the upper right, sized down enough that it never dominates the CTA. Its job is not urgency theatre. It confirms the event is real, dated, and imminent. Static "Coming soon" pages get skimmed and forgotten. A running clock, even a subtle one, tells the reader the organiser has thought this through and the date is fixed.

Speakers as evidence

The speaker row is a single band of six circular portraits with name and title. Circular because it downplays photo quality differences between speakers (some send professional headshots, some send phone photos). Six is the sweet spot: enough to imply a full program, few enough to fit on one screen row without wrapping. Below this row (not shown in the crop) sits the schedule with talk titles and a location map.

Registration mechanics

Clicking "Reserve a seat" opens a modal, not a new page. Two fields (email and ticket type), then a Stripe checkout. Keeping the whole flow on one URL means the analytics stay clean and the reader never loses the visual context that convinced them to click.

Design decisions

• Warm off-white ground. Cream at #f4efe4 makes the black CTA punch without needing coloured accents to compete.
• One display size in the hero. Headline at 42, everything else 18 or under. The typographic hierarchy carries almost all of the emotional weight.
• Seat count next to the button. "74 left" is a small, honest number. If it read "1,912 left" the button would feel less urgent, so the venue itself is chosen to fit the room to the audience.
• No hero photo. Conference sites usually lean on a crowd shot from last year. Type-only heroes read as design conferences worth attending in a way that stock crowd photos do not.

The stack

Platform

Astro with Netlify functions for seat count and Stripe webhooks.

Design tools

Figma for layout, InDesign for the printed program.

Ticketing

Stripe Checkout, Postmark for confirmation and calendar invite.

Instrumentation

Plausible with UTM tracking on partner and speaker channels.