YAN
Web design and interaction
Gypsy — Tickets. A theatrical entrance to choosing a performance
A ticketing-page design exercise for Gypsy, bringing a two-month performance calendar into a visual language of neon, marquee lights and theatre curtains.
- Contribution
- Interface design, visual system and interactive prototyping
- Project status
- Design exercise · Interactive prototype
Recorded from the original prototype, with demonstration schedules and placeholder copy.
My contribution
The brief asked for a tickets page: two months of selectable performance dates, alternative ways to buy and three expandable FAQs. I developed the interface as an interactive prototype, using the show’s supplied visual identity as its starting point.
This was a skills-assessment exercise. The case presents the design and its working interface states, with demonstration schedules and copy rather than a live ticketing service.
From the marquee to the interface
Neon red, warm bulb light and a midnight-blue backdrop establish the theatrical setting. The calendar sits on a cream panel inspired by a playbill, giving the dense date grid a quieter reading surface.
The source organizes color, typography, spacing and motion into shared tokens. Condensed Antonio headings, geometric body text and script accents give the hero, calendar and supporting sections distinct roles within the same visual system.
Choose the date, then the performance
Two adjacent months keep the schedule visible in one view. Available dates carry small performance markers; selecting a date updates the panel below with its day, venue and matinee or evening options.
Month controls move through the demonstration run, while past dates and days without performances are disabled. The selected date remains visible in the grid and the panel, connecting the choice to the next step. The prototype stops before checkout.
The page opens like a stage
The entrance combines marquee bulbs, the Gypsy neon mark and curtains that part to reveal the page. The intro can be skipped, and the prototype bypasses it when reduced motion is requested.
The moving version and the static handoff serve different purposes: the prototype demonstrates timing and state changes, while the exported hero, calendar and supporting sections preserve the composition for design review.
Other ways in, and answers nearby
Three numbered cards separate the box office, phone and lottery routes. Below them, a three-item accordion keeps one answer open at a time and lets the current answer close.
These sections use the placeholder text permitted in the assessment brief. The delivered structure includes the page prototype, reusable visual tokens and section exports prepared for a Figma handoff.
