Gabarito das páginas do evento

Estrutura e medidas para a equipe de arte criar as peças da página de cadastro e da página da transmissão. As medidas já aparecem marcadas em rosa nas prévias abaixo e nas próprias páginas, que funcionam de verdade: dá para trocar o idioma e testar o formulário.

Versão de 06/10/2026 · medidas de referência · os formulários destas páginas não enviam nenhum dado

Como as páginas funcionam

A mesma estrutura serve para hoje e para o dia do evento. Até lá, a página da transmissão mostra a sala de espera com a data.

  1. 1

    Convite por e-mail

    A pessoa recebe o link da página de cadastro.

  2. 2

    Página de cadastro

    Preenche o formulário, escolhe presencial ou online e cria a senha.

  3. 3

    Confirmação

    Presencial: recebe os detalhes do evento. Online: recebe o acesso à transmissão.

  4. 4

    Página da transmissão

    Até o evento, a sala de espera. No dia, a transmissão em português e em inglês.

As duas páginas

As medidas já estão marcadas em rosa em cada prévia. Clique numa prévia para abrir a página no tamanho real, onde dá para testar o formulário e ver cada estado.

Página de cadastro

Header, topo com a arte do evento, nome, data e local, formulário ao lado, informações do evento e rodapé.

Abrir a página

Desktop · tela de 1440 px

Celular · tela de 390 px

Medidas desta página

Header
80 px de altura no desktop e 64 px no celular
Logo
até 200 × 48 px no desktop e 140 × 36 px no celular
Arte do topo
1920 × 700 px no desktop; 1080 × 1080 px no celular, sem texto
Área de conteúdo
1200 px no centro; nome, data e local à esquerda, em texto
Formulário
coluna de 480 px por cima da arte; no celular, largura total
Informações e rodapé
em texto, com o logo do evento

Página da transmissão

Header, escolha de idioma, capa da transmissão com a data em texto por cima e rodapé. Quem chega pelo link do e-mail entra com e-mail e senha.

Abrir a página

Desktop · tela de 1440 px

Celular · tela de 390 px

Medidas desta página

Header
80 px de altura no desktop e 64 px no celular
Logo
até 200 × 48 px no desktop e 140 × 36 px no celular
Capa da transmissão
1920 × 1080 px (16:9), sem data e hora escritas na imagem
Data e hora
em texto, por cima da capa, no canto de baixo à esquerda
Idioma
botões Português e English, em texto
Tela de entrar
coluna de 420 px, no mesmo estilo do formulário do cadastro

Telas

As páginas se adaptam à tela. A medida que importa é a largura; a altura é livre, a página rola.

Desktop

1440px de largura
  • Conteúdo centralizado em 1200 px
  • Header com 80 px de altura

Celular

390px de largura
  • Margens de 20 px dos dois lados
  • Header com 64 px de altura

Fundos e banners que vão de ponta a ponta: 1920 px de largura. Em telas menores aparece a faixa central, por isso o que é importante fica dentro dos 1200 px do meio.

Peças e medidas

Cada gabarito vem em SVG (camadas "arte" e "guias") e em PNG, com a medida no nome do arquivo.

PeçaMedidaObservaçõesGabarito
Header, desktop80 px de alturaLogo em até 200 × 48 px. Menu, idioma e botão ficam em texto.SVGPNG
Header, celular64 px de alturaLogo em até 140 × 36 px. O menu vira ícone.SVGPNG
Logo do eventoSVG ou PNG transparenteVersões para fundo claro e para fundo escuro.sem gabarito
Topo do cadastro, desktop1920 × 700 pxTexto e logo na parte esquerda da área central de 1200 px; a direita fica para o formulário. As laterais podem ser cortadas em telas menores.SVGPNG
Topo do cadastro, celular1080 × 1080 pxImagem sem texto. Nome, data, local e formulário vêm logo abaixo, em código.SVGPNG
Capa da transmissão1920 × 1080 pxFormato 16:9, aparece até o evento começar. Sem data e hora escritas na imagem.SVGPNG
Imagem de compartilhamento1200 × 630 pxPrévia do link no WhatsApp e no LinkedIn. Logo e nome no quadrado central.SVGPNG
Ícone da aba do navegador512 × 512 pxPNG transparente, só o símbolo.SVGPNG
Topo do e-mail convite1200 × 500 pxSó se o disparo for nosso. Aparece com 600 px de largura.SVGPNG
Fontes e coresArquivos ou nomesNome ou arquivo das fontes e cores em HEX.sem gabarito

Regras para a arte

O que vale para todas as peças

  • Textos, campos e botões ficam em código, não dentro da imagem, para funcionar no celular e nos dois idiomas.
  • As medidas são de referência; o layout final é ajustado pela nossa equipe na montagem.
  • O layout da transmissão ao vivo (player, idiomas e interação com o público) será definido depois do briefing. Por enquanto, a página mostra a sala de espera.
  • Formulário: basta o estilo de um campo, de um botão e de uma caixa de seleção. Os campos ainda serão definidos.
  • Cores, fontes e logo destas páginas de exemplo são provisórios. As marcações em rosa são só guias.

Como enviar

  • Ideal: link do Figma. Se não der, PSD (Photoshop) ou AI (Illustrator) com as camadas abertas, evitando a página inteira num JPG só.
  • Logo em SVG, fotos em JPG, elementos com transparência em PNG.
  • Nome ou arquivo das fontes e cores em HEX.