Case study · Drupal
Teatre Nacional de Catalunya
Website for the Teatre Nacional de Catalunya, Catalonia’s national theater in Barcelona: the full season, tickets and everything happening at the theater, in a simple, accessible site with light and dark modes.
- Client
- Teatre Nacional de Catalunya
- Scope
- Front-end development
Drupal site building - Team
- In collaboration with Kiwop
- Site
- tnc.cat ↗
The season on the home page: a large carousel of the shows now playing.
Each show on its own card: title, credits, venue, dates and tickets, one click away.
Clips and news, for keeping up with the theater offstage.
A living home page that changes with what’s on.
The challenge
A national theater serves every audience, and so must its website.
The site had to put the shows first and get people to tickets without detours, while making room for everything else: prices and subscriptions, getting there, accessibility, the building and its spaces, the team and the press room. A big site that still had to feel simple to anyone. My part was front-end development and site building for its main areas, working alongside the Kiwop team.
Showcase
The whole season, easy to browse: home page, full listing and a page for every show.
Sell
Tickets always in view, on every card and every show page, with prices and subscriptions clearly explained.
Welcome
Practical and accessibility information, done right, plus light and dark modes for comfortable reading.
The home page
The season, always front and center.
The home page opens with a carousel of the shows now playing, followed by the lineup in colored cards: image, title, credits, venue and dates, with the info and ticket buttons always in the same place. Then come video clips and the theater’s latest news.
The whole season, on mobile too.
The cards stack into a single column, with tickets always in view.
Videos and news in carousels you swipe through.
2026–27 season
From the full season to each show’s own page.
The season listing gathers every show in the same card system. Each one gets its own page: synopsis, collapsible cast and credits, prices, showtimes, accessible performances, related activities and a gallery, with the ticket button up top where it’s easy to spot.
Plan your visit
Everything you need before heading to the theater.
-
01
Prices, in clear tables
Ticket prices for each venue, discounts, and rates for El TNC Petit, groups and schools, laid out in easy-to-read tables.
-
02
Subscriptions, ready to buy
Every subscription option, with its price, discount and buy button.
-
03
Getting there
An interactive map, every transportation option and how to get to each venue.
-
04
Accessibility
The season’s accessible performances, with the services available at each one, and the rest of the theater’s accessibility information in collapsible sections.
The TNC
Inside the theater.
The institutional sections show the theater beyond the stage: the building and its spaces, with capacities, dimensions and floor plans; the team and its org chart; and a press area with materials for every show.
Light and dark mode
The same site, in light and dark mode.
A toggle in the header switches the whole site between light and dark mode. Every component—header, cards, show pages, footer—is designed for both color schemes, so the content reads just as well in either.
Under the hood
Drupal, with a custom front end.
A team project with Kiwop, where I handled the front end and site building for the main areas of the site.
Site building
Content types, fields and listings for shows, spaces, subscriptions and news: the structure the theater uses to manage its season.
Front end
Markup and styling for the site’s templates and components—cards, show pages, tables, collapsible sections and carousels—from desktop to mobile.
Light and dark
Two color schemes for the whole site, switchable from the header.
Multilingual
Content and interface available in several languages.