Referências de design para sua nova plataforma
Dicas práticas de identidade visual, capas e banners para deixar a área do aluno com cara de plataforma profissional.
Nesta página
Uma área do aluno bonita não depende de designer caro: depende de imagens no tamanho certo e de poucas decisões bem tomadas. Este artigo reúne as dicas que mais fazem diferença nas telas da sua plataforma, com as medidas que cada campo do painel espera.
Comece pela identidade
Em Configurações › Personalização › Área do aluno, seção Aparência:
- Cor de destaque: use a cor principal da sua marca. Ela aparece em botões, links e destaques. Prefira uma cor viva, que contraste bem com fundo escuro.
- Logo: versão horizontal, sem margens transparentes em volta. Ela é exibida com 35 px de altura, então logos muito altos ou com muito espaço vazio ficam pequenos demais. PNG até 600 KB.
- Ícone de Favorito (Favicon): PNG 150x150, até 100 KB. Use só o símbolo da marca, sem texto.
A área do aluno usa hoje o modo escuro com navegação em carrosséis. O Modo de exibição claro, o Modelo Educacional e o Tamanho da fonte ampliado já aparecem na tela, mas ainda não mudam a área do aluno.
Tela de login
Em Configurações › Personalização › Telas de acesso, a Imagem do painel visual aparece ao lado do formulário de login. Use JPG 1280x1024, até 850 KB.
- Escolha uma foto ou arte com o assunto principal no centro.
- Evite textos pequenos na imagem: em telas menores ela é recortada.
Os modelos de tela de login Aurora, Palco e Editorial ainda não estão disponíveis. Todas as telas usam o modelo Clássico.
Capas no estilo streaming (4:7)
O visual que mais funciona em plataformas de curso é o de catálogo de streaming: capas verticais, lado a lado, em carrossel. Para isso:
- Em Conteúdo › Produtos, abra a vitrine e clique em Configurar vitrine.
- Em Formato das miniaturas, escolha 4:7.
- Produza as capas em 600x1050 px, JPG ou PNG, até 1 MB.
Outros formatos disponíveis: 16:9 (horizontal), 4:4 (quadrado, 600x600), 4:5, 2:3 e Automático, que respeita a proporção de cada imagem.
Dicas para as capas:
- Mesmo padrão em toda a vitrine: mesma fonte, mesma posição do título, mesma faixa de cor. A vitrine passa a parecer um catálogo, e não uma colagem.
- Título grande e curto: a capa é vista pequena, principalmente no celular. Duas ou três palavras bem legíveis valem mais que uma frase.
- Respiro nas bordas: deixe o conteúdo importante longe das bordas para não ser cortado.
Capas de módulos e aulas
Quando a vitrine mostra miniaturas por módulo ou por aula, cada um usa a própria imagem. No produto, use Alterar imagem no menu do módulo ou da aula. A miniatura da aula aceita JPG ou PNG até 600 KB. Use o mesmo formato escolhido para a vitrine.
Trocar a Miniatura de um produto que já tem capa ainda não atualiza a capa do card na vitrine.
Banners
Em Conteúdo › Banners, cada banner tem duas imagens:
| Imagem | Tamanho | Peso |
|---|---|---|
| Desktop | 1920x1080 px (16:9) | JPG até 800 KB |
| Celular | 600x1050 px (4:7) | JPG até 800 KB |
- Monte as duas versões, em vez de reaproveitar a imagem de desktop no celular: o recorte automático costuma cortar o título.
- Se o banner tiver título, texto ou botão por cima, reserve uma área mais limpa da imagem para eles.
- Ligue Exibir sombra nos textos quando a imagem for clara ou cheia de detalhes.
Checklist rápido
- Logo horizontal, sem margens, legível com 35 px de altura.
- Favicon só com o símbolo.
- Capas de todos os produtos no mesmo formato e no mesmo padrão visual.
- Banner com versão para celular.
- Confira tudo com Ver como aluno e também pelo celular antes de divulgar.