Guia de Dimensões e Identidade Visual da Plataforma Engage

Para garantir que a sua plataforma tenha uma interface impecável, profissional e com excelente resolução em qualquer dispositivo, preparamos este guia com as medidas exatas de cada componente visual do Engage.

Ao produzir as peças, lembre-se de que os fundos de tela seguem proporções específicas para telas (como 16:9 ou 9:16), enquanto os demais elementos da interface — como logos, ícones e botões — possuem formatos próprios adaptados para blocos quadrados (1:1) ou horizontais (3:1).

1. Fundos de Tela e Capas

Estes componentes ocupam áreas amplas da plataforma e definem a atmosfera visual do seu ambiente. Certifique-se de centralizar as informações principais das imagens para que fiquem visíveis em diferentes tamanhos de monitor.

• Fundo da Tela de Login (Desktop): 1920 x 1080 px (Proporção 16:9)

• Fundo da Tela de Login (Mobile): 1080 x 1920 px (Proporção 9:16 — Vertical)

• Fundo da Tela de Competição: 1600 x 1200 px (Proporção 4:3)
  
  
  
  

Configuração das Trilhas

O tamanho do fundo da trilha no desktop varia de acordo com o modelo de visualização ativado nas configurações do seu painel de administração:

• Fundo da Trilha (Desktop - Visualização Padrão): 713 x 500 px

• Fundo da Trilha (Desktop - Tela Expandida): 889 x 500 px

• Fundo da Trilha (Mobile): 414 x 736 px

• Capa do Módulo (Trilha Galeria): 854 x 480 px (Proporção 16:9)

Elementos de Interface e Botões

Para evitar que as imagens fiquem distorcidas, cortadas ou com espaços vazios nas laterais, utilize rigorosamente as proporções e formatos indicados abaixo.

• Logo da Tela de Login: 410 x 186 px

  • Dica: Este é um campo exclusivo para a página de entrada e aceita formatos mais robustos.

• Logo do Ambiente / Perfil: 240 x 80 px (Proporção 3:1)

  • Dica: Dimensão ideal para o topo da barra de navegação interna.

• Botões de Mapas / Rankings: 210 x 80 px

• Fundo do Avatar: 240 x 160 px (Orientação Horizontal)

3. Ícones e Detalhes Gráficos

Componentes menores exigem precisão para manter a nitidez. Recomendamos o uso do formato PNG com fundo transparente para estes itens.

• Ícones da Loja / Conquistas: 256 x 256 px (Proporção 1:1 — Quadrado)

• Favicon: 96 x 96 px (Proporção 1:1)

  • Dica: É o ícone que aparece na aba do navegador do usuário.

4. Dicas Avançadas de Customização

Banner do Topo da Trilha (Nome do Ambiente)

Se você deseja personalizar o topo da trilha onde o nome do ambiente é exibido, a dimensão oficial para criar essa faixa de cobertura é de 889 x 160 px.