A marca é o passo com melhor retorno pelo esforço. Vinte minutos aqui mudam todos os ecrãs que um membro alguma vez verá, da página de acesso à fatura.
A pré-visualização em direto
O painel da direita mostra as suas alterações à medida que as faz. Alterne entre computador e telemóvel com os ícones por cima, porque os seus membros chegam pelos dois e um logótipo que se lê bem num portátil pode ser ilegível num telemóvel.
Nada fica público enquanto não guardar.
O seu logótipo
Carregue duas versões: uma para o modo claro e outra para o escuro. Os membros escolhem o próprio modo, e um logótipo escuro sobre fundo escuro desaparece.
- Formato: SVG ou PNG. O SVG mantém-se nítido em qualquer tamanho, o PNG precisa de píxeis suficientes.
- Proporção: cerca de 5:1, ou seja um logótipo largo em vez de quadrado.
- Tamanho: 1000 x 200 px funciona bem em PNG.
Use uma versão com fundo transparente. Uma caixa branca à volta do logótipo nota-se no instante em que um membro muda para o modo escuro.
Se o seu logótipo é uma marca quadrada com o nome ao lado, é essa a versão a carregar. Uma marca sozinha perde-se num espaço largo.
O seu favicon
O favicon é o ícone pequeno no separador do navegador. Carregue 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 a marca do seu logótipo, não o nome completo. A dezasseis píxeis uma palavra é uma mancha, enquanto uma única letra ou símbolo ainda se lê.
As suas cores
Quatro cores, definidas em separado para o modo claro e o escuro:
| Cor | Onde aparece |
|---|---|
| Principal | Botões, ligações, estados ativos, tudo o que quer que seja clicado |
| Texto | O texto corrente em toda a plataforma |
| Destaque | Acentos que chamam a atenção sem serem um botão |
| Fundo | A superfície onde tudo o resto assenta |
A principal é a que importa. Tire-a da marca que já tem e verifique-a contra o fundo nos dois modos. Um amarelo pálido que fica elegante sobre branco torna-se texto ilegível sobre branco.
Teste os dois modos antes de dar por terminado. O modo escuro aqui não é uma ideia de última hora, e uma cor que só funciona num deles parecerá partida a metade dos seus membros.
Tipografia
Escolha um tipo de letra para toda a plataforma. A lista tem famílias que carregam depressa e se leem bem no ecrã em tamanhos pequenos, que é a maior parte do que os seus membros fazem.
Uma família neutra costuma ser o acerto. O logótipo carrega o carácter, o texto carrega as palavras.
Para além da marca
Os separadores no topo da página de design vão mais longe:
- Esquema para a forma da área de membros.
- Login & Registro para o ecrã de início de sessão.
- Tela de carregamento para o que se vê durante o carregamento.
- Comunidade para o cabeçalho da comunidade.
- Cursos para o cabeçalho do curso.
- Leitor de vídeo para os controlos dos seus vídeos.
A marca primeiro. O resto merece uma vista de olhos assim que o logótipo e as cores estiverem no lugar.