Caso de estudio · Drupal
Teatre Nacional de Catalunya
La web del Teatre Nacional de Catalunya, en Barcelona: toda la temporada, las entradas y la vida del teatro en un sitio sencillo, accesible y con modo claro y oscuro.
- Cliente
- Teatre Nacional de Catalunya
- Alcance
- Desarrollo front-end
Site building en Drupal - Equipo
- En colaboración con Kiwop
- Sitio
- tnc.cat ↗
La temporada, en portada: un carrusel a gran tamaño con los espectáculos en cartel.
Cada espectáculo en su tarjeta: título, autoría, sala, fechas y compra, a un clic.
Clips y actualidad, para seguir la vida del teatro más allá de la función.
Una portada viva, que cambia con la cartelera.
El reto
Un teatro nacional se debe a todos sus públicos, y su web también.
La web tenía que poner la programación por delante y llevar a la compra sin rodeos, y a la vez dar cabida a todo lo demás: precios y abonos, cómo llegar, accesibilidad, el edificio y sus espacios, el equipo o la sala de prensa. Un sitio amplio que debía resultar sencillo para cualquiera. Mi parte fue el desarrollo front-end y el site building de las principales áreas del sitio, trabajando junto al equipo de Kiwop.
Programar
Toda la temporada, navegable: portada, listado completo y una ficha para cada espectáculo.
Vender
La compra siempre a la vista, en cada tarjeta y en cada ficha, con precios y abonos explicados con claridad.
Acoger
Información práctica y de accesibilidad bien resuelta, y un modo claro y otro oscuro para leer con comodidad.
La portada
La temporada, siempre en primer plano.
La portada arranca con un carrusel de los espectáculos en cartel y continúa con la programación en tarjetas de color: imagen, título, autoría, sala y fechas, con los botones de información y de compra siempre en el mismo sitio. Después llegan los clips de vídeo y la actualidad del teatro.
Toda la temporada, también en el móvil.
Las tarjetas pasan a una sola columna, con la compra siempre a la vista.
Vídeos y noticias en carruseles que se recorren con el dedo.
Espectacles 26-27
De la temporada completa a la ficha de cada obra.
El listado de temporada reúne todos los espectáculos con el mismo sistema de tarjetas. Cada uno tiene su ficha: sinopsis, ficha artística desplegable, precios, horarios, funciones accesibles, actividades relacionadas y galería, con la compra arriba, bien visible.
Utilidades
Todo lo necesario antes de ir al teatro.
-
01
Precios, en tablas claras
Las tarifas de cada sala, los descuentos y los precios de El TNC Petit, de los grupos o de los centros educativos, ordenados en tablas fáciles de leer.
-
02
Abonos con compra directa
Cada modalidad de abono, con su precio, su descuento y su botón de compra.
-
03
Cómo llegar
Mapa interactivo, todas las opciones de transporte y el acceso a cada una de las salas.
-
04
Accesibilidad
Las funciones accesibles de la temporada, con los servicios disponibles en cada una, y el resto de la información de accesibilidad del teatro en desplegables.
El TNC
El teatro por dentro.
Las secciones institucionales cuentan el teatro más allá del escenario: el edificio y sus espacios, con aforos, medidas y planos; el equipo humano y su organigrama; y un área de prensa con el material de cada espectáculo.
Modo claro y oscuro
El mismo sitio, a plena luz o a oscuras.
Un conmutador en la cabecera cambia todo el sitio entre modo claro y modo oscuro. Cada componente —cabecera, tarjetas, fichas, pie— está resuelto en los dos esquemas, de modo que el contenido se lee igual de bien en ambos.
Bajo el capó
Drupal, con el front-end a medida.
Un proyecto de equipo, desarrollado junto a Kiwop, en el que me ocupé del front-end y del site building de las principales áreas del sitio.
Site building
Tipos de contenido, campos y listados para espectáculos, espacios, abonos o noticias: la estructura con la que el teatro gestiona su temporada.
Front-end
Maquetación de las plantillas y los componentes del sitio —tarjetas, fichas, tablas, desplegables y carruseles—, del escritorio al móvil.
Claro y oscuro
Dos esquemas de color para todo el sitio, intercambiables desde la cabecera.
Multiidioma
Contenido e interfaz disponibles en varios idiomas.