UpVoter logoUpVoter.io
Volver a documentación

Branding e personalização visual no UpVoter

Branding e personalização visual no UpVoter

O que é branding no UpVoter?

Branding permite que você personalize a aparência da sua sessão para refletir a identidade visual da sua organização ou evento. Você pode configurar independentemente logos, cores e imagens de fundo para duas visualizações diferentes:

  • Projection View: a tela grande (TV, projetor) que o público vê na sala.

  • Participant View: a tela do smartphone de cada participante.
  • Isso significa que você pode ter, por exemplo, o logo do evento na projeção e o logo da sua organização na interface móvel, ou cores de fundo diferentes para cada visualização.


    Acesse o painel de branding

    Dentro do painel de gerenciamento de sessão, abra a seção Branding no menu da barra lateral.

    O painel tem duas abas:

  • Projection: configura a aparência da tela grande.

  • Participant: configura a aparência do dispositivo móvel do votante.
  • As alterações em uma aba não afetam a outra. Cada aba tem seu próprio botão Guardar e seu próprio botão Reset values.

    > As personalizações não são aplicadas até que você pressione Guardar. Se você fechar o painel sem salvar, as alterações serão descartadas.


    Aba Projection

    Projection logo

    A imagem que aparece no canto superior esquerdo da tela de projeção, visível em todas as perguntas e slides da sessão.

    Para fazer upload do logo:

  • Clique em Upload logo.

  • Selecione um arquivo PNG ou JPG. Um PNG com fundo transparente oferece o melhor resultado sobre qualquer cor de fundo.

  • A imagem é enviada e salva imediatamente.
  • Para removê-lo, clique no ícone de lixeira ao lado da imagem.

    Background image

    A imagem usada como fundo para toda a projeção. Ela é dimensionada automaticamente e centralizada para cobrir toda a tela sem distorção.

    Background opacity

    Um controle deslizante de 0 a 100 que controla a intensidade da imagem de fundo. O valor padrão é 30, que fornece um efeito sutil que não compete com o conteúdo. Um valor de 0 torna a imagem invisível; um valor de 100 a mostra com intensidade total.

    Show title in projection

    Controla se o texto da pergunta aparece na tela grande. Se desativado, a projeção mostra apenas as barras de resultados e as opções, ocultando o prompt principal.

    Projection colors

    | Campo | Para que serve |
    |---|---|
    | Background color | Fundo sólido da tela (visível quando não há imagem de fundo ou ela tem baixa opacidade) |
    | Primary color | Cor das barras de resultados e da borda dos cards de Q&A |
    | Font color | Cor do texto na projeção (títulos, rótulos, percentuais) |
    | Correct bar color | Cor da barra da resposta correta quando revelada (verde por padrão) |
    | Points / ranking color | Cor dos números de posição e pontos nos slides de ranking (laranja por padrão) |


    Aba Participant

    Welcome screen

    Quando a sessão tem o toggle [UI_REQUEST_NAME] ativado (solicitando um alias ao participante), o branding da aba Participant também é aplicado à tela de boas-vindas onde o participante digita seu nome antes de entrar. O fundo, cor primária, cor da fonte e logo permanecem consistentes com o que ele verá durante o resto da sessão.

    Participant logo

    A imagem que aparece no aplicativo web móvel do participante. Este logo é completamente independente do logo de projeção. Não há fallback entre os dois: se nenhum logo de participante for enviado, a visualização do participante não exibirá nenhum logo (permanecerá vazio), mesmo que um logo tenha sido enviado na aba de projeção.

    Show title to participant

    Controla se o tópico da enquete ou o prompt da pergunta aparece nas telas móveis. Pode ser útil desativá-lo se o prompt já estiver projetado na tela grande e você quiser que os participantes mantenham os olhos voltados para frente.

    Participant colors

    | Campo | Para que serve |
    |---|---|
    | Background color | Fundo da aplicação móvel |
    | Primary color | Cor dos botões de confirmação de voto e elementos de ação |
    | Font color | Cor do texto na interface móvel |


    Salvar e resetar

    Guardar: aplica as alterações da aba ativa. A projeção e os telefones móveis dos participantes refletirão as novas cores e logos em questão de segundos, sem necessidade de atualizar.

    Reset values: reverte todos os campos dessa aba (e apenas dessa aba) para seus valores padrão: cores neutras, sem logo, sem imagem de fundo, opacidade 30.


    Recomendações por tipo de evento

    Evento corporativo

  • Logo em PNG com fundo transparente, mínimo 400px de largura.

  • Cor primária: a cor corporativa exata de suas diretrizes de marca.

  • Fundo: imagem com logo desfocado (opacidade 15-25%) ou sem imagem.

  • Cor da barra correta: verde se houver respostas corretas; mesma cor primária para enquetes de opinião.
  • Assembleia

  • Sem logo ou logo da entidade.

  • Cores neutras e profissionais. Evite cores altamente saturadas em votações formais.

  • Sem imagem de fundo para forçar máxima clareza e legibilidade da tela.
  • Evento dinâmico / gamificação

  • Logo do evento ou nome do jogo.

  • Cor primária marcante (laranjas, roxos, verdes intensos).

  • Imagem de fundo com textura sutil, opacidade 20-40%.

  • Cor de pontos em laranja brilhante para destacar os números de ranking.

  • Limitações atuais

  • Sem preview em tempo real: as alterações de cor são apenas visualizadas quando você salva e observa a projeção real ou o dispositivo móvel do participante diretamente.
  • Sem verificação automática de contraste: o sistema não avisa se sua combinação escolhida de cores de fundo e fonte é difícil de ler. Verifique visualmente antes do evento começar.
  • Sem templates predefinidos: o organizador configura tudo do zero em cada nova sessão, embora uma sessão possa ser duplicada para reutilizar sua configuração.
  • Imagens não são automaticamente comprimidas: se você enviar imagens muito grandes, o carregamento inicial pode ser lento. É altamente recomendável otimizá-las antes de enviar.
  • Branding e personalização visual no UpVoter — UpVoter.io