# 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.

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.

:::embreve
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.

:::embreve
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:

1. Em **Conteúdo › Produtos**, abra a vitrine e clique em **Configurar vitrine**.
2. Em **Formato das miniaturas**, escolha **4:7**.
3. 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.

:::embreve
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.