Tudo o que um designer precisa para criar o fundo do popup e a landing das campanhas da Popconvert: tamanhos, onde ficam os textos e o jogo, o que pode ser cortado e gabaritos para baixar.
Os gabaritos usam as convenções do design gráfico, com valores medidos nas campanhas reais da Popconvert (e não valores genéricos de impressão).
Essa terminologia segue a prática de design: sangria é a parte da arte que se estende além da área final, para evitar vazios caso haja corte; zona segura é a área onde textos e logos ficam protegidos. (Adobe, Canva)
O popup passa por três telas e os elementos mudam de lugar em cada uma. O gabarito mostra as três ao mesmo tempo, com traços diferentes:
1. Opt-in
Título, subtítulo, jogo, campo de e-mail, botão e textos legais aparecem juntos. É a etapa mais cheia e a mais crítica para a arte.
2. Jogo
O formulário some. Título e subtítulo mudam de posição e o jogo (roda, máquina, ícones ou cartão) fica em foco.
3. Cupom
Só aparecem o título, o cupom grande e os botões para copiar o código ou fechar.
Na etapa do cupom existe uma opção da campanha para mostrar ou não a imagem de fundo do popup. Quando ela está desligada, aparece apenas a cor de fundo.
A imagem de fundo do popup vale para campanhas no site e para campanhas de QR Code. Ela preenche o popup e, se a proporção da imagem for diferente da do popup, é ampliada até cobrir e o excesso é cortado. Por isso, use sempre a proporção exata do gabarito.
| Jogo | Desktop · Popup | Desktop · Exporte em | Celular · Popup | Celular · Exporte em |
|---|---|---|---|---|
| Roleta | 85% da altura da tela, proporção 18:17 (972×918 em uma tela de 1080 px de altura) | 1944×1836 | 90% da largura e 80% da altura da tela (351×675 em 390×844) | 702×1350 |
| Slot Machine | 800×512 px | 1600×1024 | 320×720 px | 640×1440 |
| TNT | 480×672 px | 960×1344 | 320×592 px | 640×1184 |
| Raspadinha | 480×720 px | 960×1440 | 320×592 px | 640×1184 |
| Presente Misterioso (Pick a Gift) | 480×672 px | 960×1344 | 320×592 px | 640×1184 |
| Caça ao Tesouro (Treasure Hunt) | 480×672 px | 960×1344 | 320×592 px | 640×1184 |
No desktop, a roda ocupa a metade esquerda do popup e os textos ficam à direita; o popup tem 85% da altura da tela. Se a Roleta for configurada à direita, o posicionamento das zonas é espelhado (há um gabarito para esse caso). No celular, o popup ocupa 90% da largura e 80% da altura da tela e a roda fica na parte de baixo.
Máquina à esquerda e textos à direita no desktop; no celular a máquina fica em cima e o formulário embaixo. Tamanho fixo.
Os ícones (balões ou bombas) flutuam pela área do jogo e, depois do e-mail, passam a se mover por uma área maior: por isso o gabarito mostra as duas áreas. Tamanho fixo.
O cartão fica no centro, com o formulário embaixo. Tamanho fixo.
Mesmas proporções, dimensões e zonas da TNT; muda o ícone (um presente) e os elementos ficam parados em vez de flutuar. Informação da equipe Popconvert.
Mesmas proporções, dimensões e zonas da TNT; muda o ícone (uma arca de tesouro) e os elementos ficam parados em vez de flutuar. Informação da equipe Popconvert.
O fundo da landing existe somente nas campanhas de QR Code, que a Popconvert hospeda. As campanhas no site do cliente não têm fundo de landing, porque rodam na página do próprio cliente.
Se nenhuma imagem for enviada, a landing fica com um fundo cinza.
| Jogo | Posição no desktop | Popup (desktop) |
|---|---|---|
| Roleta | À esquerda (padrão) ou à direita | 972×918 px |
| Slot Machine | Centralizado | 800×512 px |
| TNT · Pick a Gift · Treasure Hunt | Centralizado (também Pick a Gift e Treasure Hunt) | 480×672 px |
| Raspadinha | Centralizado | 480×720 px |
Os gabaritos da landing mostram a área ocupada pelo popup e as linhas de corte calculadas para telas de outras proporções. No celular, a posição vertical do popup varia com a altura da tela: o topo fica a 18 px em 360×640, 41 px em 390×844 e 51 px em 430×932.
Os tamanhos de celular usados nas medições foram 360×640, 390×844 e 430×932 (iPhone e Samsung populares). Os gabaritos de celular partem de 390×844.
O popup da Raspadinha mede 480×720 no desktop e 320×592 no celular. Exporte a imagem de fundo em 960×1440 (desktop) e 640×1184 (celular).
O popup da Slot Machine mede 800×512 no desktop e 320×720 no celular. Exporte em 1600×1024 (desktop) e 640×1440 (celular).
O popup da TNT mede 480×672 no desktop e 320×592 no celular. Exporte em 960×1344 (desktop) e 640×1184 (celular).
No desktop o popup da Roleta ocupa 85% da altura da tela, em proporção 18:17 (972×918 em uma tela de 1080 px de altura); exporte em 1944×1836. No celular ocupa 90% da largura e 80% da altura da tela (351×675 em 390×844); exporte em 702×1350.
Sim. Segundo a equipe Popconvert, as proporções, as dimensões e as zonas são as mesmas da TNT: popup de 480×672 no desktop e 320×592 no celular. A diferença é o ícone do jogo e que os elementos ficam parados em vez de flutuar.
A landing da campanha de QR Code fica com um fundo cinza.
Não. O fundo da landing existe somente nas campanhas de QR Code. Campanhas no site rodam na página do cliente e só têm a imagem de fundo do popup.
No desktop, não: a Roleta fica encostada à esquerda (padrão) ou à direita, e ao escolher a direita o posicionamento das zonas é espelhado. Os outros jogos ficam centralizados.
A imagem é ampliada até cobrir o popup e o excesso é cortado nas bordas. Em um popup vertical, uma imagem horizontal perde as laterais. Use a proporção exata do gabarito.
Não. As medidas e os gabaritos cobrem desktop e celular.
Ainda não é cliente Popconvert?
