Gypsy — Tickets. Uma entrada teatral para escolher uma sessão

O briefing pedia uma página de ingressos: dois meses de datas de sessões para selecionar, outras formas de comprar e três FAQs expansíveis. Desenvolvi a interface como um protótipo interativo, partindo da identidade visual fornecida para o espetáculo.

Este foi um exercício de avaliação de habilidades. O case mostra o design e os estados da interface funcionando, com programação e textos de demonstração, e não um serviço de venda de ingressos no ar.

O vermelho neon, a luz quente das lâmpadas e o fundo azul-noite criam o ambiente teatral. O calendário fica em um painel creme inspirado em um programa de teatro, que dá à grade densa de datas um fundo mais calmo para a leitura.

O código organiza cor, tipografia, espaçamento e movimento em tokens compartilhados. Títulos condensados em Antonio, texto corrido em fonte geométrica e detalhes em fonte cursiva dão papéis diferentes ao hero, ao calendário e às seções de apoio dentro do mesmo sistema visual.

Dois meses lado a lado deixam a programação visível de uma vez só. As datas disponíveis têm pequenos marcadores de sessão; ao selecionar uma data, o painel abaixo mostra o dia, o local e as opções de matinê ou noite.

Os controles de mês percorrem a temporada de demonstração, e as datas passadas e os dias sem sessão ficam desabilitados. A data selecionada continua visível na grade e no painel, o que liga a escolha à próxima etapa. O protótipo termina antes do checkout.

A entrada combina lâmpadas de letreiro, a marca de Gypsy em neon e cortinas que se abrem para revelar a página. Dá para pular a introdução, e o protótipo a ignora quando a preferência por movimento reduzido está ativa.

A versão em movimento e o handoff estático têm funções diferentes: o protótipo demonstra o timing e as mudanças de estado, e as exportações do hero, do calendário e das seções de apoio preservam a composição para a revisão de design.

Três cards numerados separam as opções de bilheteria, telefone e sorteio. Abaixo deles, um accordion de três itens mantém uma resposta aberta por vez e permite fechar a resposta atual.

Essas seções usam o texto provisório que o briefing da avaliação permitia. A estrutura entregue inclui o protótipo da página, tokens visuais reutilizáveis e exportações por seção preparadas para um handoff no Figma.