A marca é o passo com o melhor retorno pelo esforço. Vinte minutos aqui mudam todas as telas que um membro chega a ver, da página de login à fatura.
Abrir as configurações de design
A pré-visualização ao vivo
O painel à direita mostra as alterações enquanto você as faz. Alterne entre computador e celular com os ícones acima, porque os membros chegam pelos dois, e um logotipo que se lê bem num notebook pode ficar ilegível num celular. A mesma linha alterna a pré-visualização entre o modo claro e o modo escuro e a abre em Tela cheia.
Nada fica público até você salvar.
O seu logotipo
Envie duas versões: uma para o modo claro e outra para o modo escuro. Os membros escolhem o próprio modo, e um logotipo escuro sobre um fundo escuro desaparece.
- Formato: SVG ou PNG. O SVG fica nítido em qualquer tamanho, o PNG precisa de pixels suficientes.
- Proporção: cerca de 5:1, ou seja, um logotipo largo e não quadrado.
- Tamanho: 1000 x 200 px funciona bem em PNG.
Use uma versão com fundo transparente. Uma caixa branca em volta do logotipo aparece no momento em que um membro muda para o modo escuro.
Se o seu logotipo for um símbolo quadrado com o nome ao lado, é essa a versão a enviar. Um símbolo quadrado sozinho se perde num espaço largo.
O seu favicon
O favicon é o pequeno ícone na aba do navegador. Envie também uma versão clara e uma escura.
- Formato: SVG ou PNG.
- Proporção: 1:1, ou seja, quadrado.
- Tamanho: 512 x 512 px.
Use o símbolo do seu logotipo, não o nome completo. Com dezesseis pixels, uma palavra vira uma mancha, enquanto uma única letra ou símbolo continua legível.
As suas cores
Quatro cores, definidas separadamente para o modo claro e o modo escuro:
| Cor | Onde aparece |
|---|---|
| Principal | Botões, links, tudo aquilo em que você quer que se clique |
| Texto | O texto corrido em toda a plataforma |
| Destaque | O item de menu ativo, a aba selecionada e outros acentos que chamam a atenção sem serem um botão |
| Fundo | A superfície sobre a qual fica todo o resto |
A cor principal é a que importa. Tire-a da marca que você já tem e confira-a contra o fundo nos dois modos. Um amarelo pálido que fica elegante sobre branco vira texto ilegível sobre branco.
Quando você muda a cor principal, uma nota propõe Ajustar o fundo à sua cor primária. Aplicar mistura 2% da sua cor principal ao fundo da página, o que liga a superfície à sua marca sem mudar a legibilidade.
Teste os dois modos antes de terminar. Aqui o modo escuro não é um detalhe, e uma cor que só funciona num deles vai parecer quebrada para metade dos seus membros.
Tipografia
Escolha uma fonte para toda a plataforma. A lista inclui fontes sem serifa, com serifa, monoespaçadas, decorativas e manuscritas. Para texto corrido em tamanhos pequenos, que é a maior parte do que os membros leem, funciona melhor uma fonte sem serifa ou com serifa.
Uma fonte neutra costuma ser a certa. O logotipo dá o caráter; o texto corrido carrega as palavras.
Avatares dos membros
Avatares de membros define a forma dos avatares de membros e usuários em toda a plataforma: Arredondados ou Quadrado. O quadrado combina com uma marca de cantos retos, o arredondado é o padrão habitual.
Além da marca
As abas no topo da página de design vão mais longe:
- Layout para a forma da área de membros.
- Login & Registro para a tela de login.
- Tela de carregamento para a animação que aparece enquanto a plataforma inicia.
- Comunidade para o cabeçalho da comunidade.
- Cursos para o cabeçalho dos cursos.
- Player de vídeo para os controles dos seus vídeos.
Primeiro a marca. O resto merece uma olhada assim que o logotipo e as cores estiverem no lugar.