Identidade visual: logótipo, cores, tipos de letra e menu

Módulo 4: Páginas, aspeto e funcionalidades · Tempo de leitura: 8 minutos

Objetivo de aprendizagem: Depois desta lição, saberá configurar no painel Identidade visual o nome e o logótipo, o favicon, o estilo, o design do menu, as cores, os tipos de letra, o modo escuro e o movimento, e saberá verificar se o texto do seu site é bem legível.

Conceitos chave: identidade visual, estilo (look), logótipo, símbolo, marca nominativa, favicon, barra de menu, cor principal, contraste, rácio de contraste, WCAG, licença web, modo escuro, movimento

Porque é que a identidade visual é mais do que estética

Uma identidade visual é a combinação fixa de logótipo, cores e tipos de letra pela qual as pessoas o reconhecem. Num website, garante o reconhecimento (as mesmas cores na carrinha, no orçamento e no site) e tem de continuar legível: texto cinzento claro sobre branco parece calmo, mas muitos visitantes leem-no mal, sobretudo num telemóvel ao sol.

Tudo no painel Identidade visual é gratuito e fica imediatamente visível na pré-visualização. Só quando clica em Guardar passa a ser uma nova versão (lição 3.5). Se quiser voltar atrás, clique em Repor ou reponha uma versão anterior.

O painel tem estes blocos: Estilo, Cores, Tipos de letra, Barra de menu, Nome e logótipo, Imagens, Forma e espaçamento, Tipos de letra e tamanhos, Modo escuro e Movimento.

Nome, logótipo e favicon

Em Nome e logótipo encontra o nome do seu site, tal como aparece no cabeçalho e no rodapé. Por baixo, o logótipo:

• Carregar o seu próprio logótipo: PNG com fundo transparente, SVG, JPG ou WebP, até 2 MB. Um logótipo horizontal funciona melhor numa barra de menu.
• Se não tiver logótipo, o construtor criou uma marca nominativa: o seu nome no seu próprio tipo de letra e nas suas cores. Esta adapta-se automaticamente quando os altera.
• Deixar a IA criar um logótipo: descreve brevemente a sua empresa e o ambiente pretendido ("empresa de pintura numa aldeia, artesanal e de confiança") e clica em Criar três logótipos. Recebe três símbolos (um sinal sem texto) nas suas cores, com o seu nome ao lado no seu tipo de letra. No total, isso custa 1 edição. Escolha um com Utilizar, ou escreva o que pode ser melhorado ("o primeiro, mas mais arredondado") e clique em Criar três novos logótipos; essa é uma nova ronda de 1 edição.
• Apresentação no menu e no rodapé: Logótipo e nome, Apenas logótipo ou Apenas nome, e o Tamanho (Pequeno, Normal, Grande).

O construtor avisa quando um logótipo tem linhas finas ou pouco contraste com a sua barra de menu: em tamanho pequeno na barra, pode deixar de se ver.

Verifique pessoalmente um logótipo criado pela IA: não se parece demasiado com o logótipo de outra empresa?

O favicon é o pequeno ícone no separador do navegador e nos marcadores. Escolha Automático: letra inicial nas suas cores, O seu logótipo ou Ficheiro próprio (quadrado, PNG, SVG ou ICO, até 512 KB).

Estilo e barra de menu

Um estilo (no construtor também look) define com um único clique os tipos de letra, as formas, os botões, os cartões, o menu e a decoração. Existem doze, como Fresco, Acolhedor, Profissional, Natureza, Atelier e Noite. As suas próprias cores mantêm-se quando muda de estilo; se também quiser as cores do estilo, clique em Usar também as cores deste estilo. O estilo Noite é sempre escuro.

Em Barra de menu escolhe a forma da barra no topo de cada página, entre quinze designs: largura total, centrada, dividida, duas linhas, barra de cor, contornada, pílula, com barra superior, transparente, minimalista, flutuante, rubricas, segmento, ecrã inteiro e menu lateral. O conteúdo do menu (lição 4.1) mantém-se igual. Alguns pontos de atenção da explicação do próprio construtor:

• Transparente só fica bem se todas as páginas tiverem um hero escuro ou um hero com fotografia.
• Minimalista mostra apenas o seu nome e um botão; as ligações para as páginas ficam então no rodapé.
• Com barra superior coloca o telefone e o horário numa barra estreita por cima. Esse número de telefone está correto?

Em Cor da barra de menu escolhe Automático (segue o estilo), Branco, Cinzento claro, Escuro ou Cor de destaque. Outra cor pede-se no chat.

Cores e contraste

Em Cores define a cor principal (botões, destaques), uma segunda cor para gradientes e o fundo (branco, creme, frio, cinzento ou um tom da sua cor, ou escolhido por si). Com Botões com gradiente de cor, todos os botões principais recebem um gradiente de uma cor para a outra.

É aqui que entra o contraste: a diferença de luminosidade entre o texto e o fundo. Exprimimo-lo como rácio de contraste, de 1:1 (nenhuma diferença) a 21:1 (preto sobre branco). A diretriz internacional para websites acessíveis, as WCAG do W3C, exige no nível AA pelo menos 4,5:1 para texto normal e 3:1 para texto grande (cerca de 18 pontos, ou 14 pontos em negrito). Os botões e outros elementos de controlo devem atingir pelo menos 3:1 em relação ao que os rodeia.

O construtor vigia isso por si. Se escolher uma cor sobre a qual o texto não se lê bem, ele ajusta-a e informa o que mudou, por exemplo: "A cor do texto ... passou a ser ..., porque, caso contrário, o texto não se lê bem sobre ela." Se quiser manter exatamente as suas cores, ative Manter exatamente estas cores: as suas cores mantêm-se e o texto sobre elas recebe automaticamente uma cor legível. Também nas secções que a IA cria com formatação própria, o construtor corrige as cores de texto que fiquem abaixo de 4,5:1 (texto grande 3:1).

O que o construtor não avalia: texto numa fotografia ou no seu logótipo, e um título sobre uma fotografia carregada. Verifique isso pessoalmente, num telemóvel. Se tiver dúvidas sobre um par de cores, introduza os dois códigos de cor num verificador de contraste (consulte Para saber mais).

Armadilha: uma cor da identidade visual de uma gráfica ou de uma carrinha (por exemplo, amarelo vivo) raramente é adequada como cor de texto. Utilize-a como destaque ou superfície e mantenha o texto escuro.

Tipos de letra e tipo de letra próprio

Em Tipos de letra escolhe um tipo de letra para os Títulos e outro para o Texto corrido. Os tipos de letra ficam como ficheiros no seu próprio site; não há ligação a um serviço de tipos de letra de terceiros. Em Tipos de letra e tamanhos define com controlos deslizantes, para todo o site: o espaçamento entre linhas e entre letras do texto e dos títulos, os caracteres por linha, a largura do conteúdo e o peso dos títulos. Como o estilo repõe um controlo deslizante. Em Tamanho do texto escolhe Normal, Grande ou Muito grande; também o pode fazer no chat ("aumente o tamanho das letras").

Também é possível usar um tipo de letra próprio: carregue-o em Tipos de letra ou com o clipe no chat, como .woff2, .woff, .ttf ou .otf, até 2 MB por ficheiro (pode carregar vários pesos). Depois escolhe para quê: títulos, texto ou ambos. Não tem qualquer custo. Um tipo de letra de um serviço como o Adobe Fonts não é possível.

Importante: carregue apenas um tipo de letra para o qual tenha uma licença web. Um tipo de letra é software com uma licença. Uma licença para utilização no seu computador (para criar materiais impressos) nem sempre permite colocar o ficheiro num website, onde cada visitante o descarrega. Consulte nas condições da licença se a utilização na web é permitida. Os tipos de letra sob a SIL Open Font License podem ser incorporados e distribuídos.

Modo escuro e movimento

Em Modo escuro escolhe Desligado (sempre claro), Sempre escuro ou Como o dispositivo. Com esta última opção, um visitante com o telemóvel ou o computador em modo escuro vê uma versão escura das suas próprias cores. Pode escolher o fundo, o texto e a cor principal do modo escuro. Não existe um botão com o qual os visitantes possam alternar. A pré-visualização segue o seu dispositivo: coloque o seu telemóvel ou computador em modo escuro para ver a versão escura e verifique também o seu logótipo.

Em Movimento escolhe Ligado, Suave ou Desligado para todo o site e, se necessário, uma exceção por página. Também escolhe aqui o Efeito do rato num computador (nenhum, íman ou foco de luz). Na pré-visualização tudo fica parado; com Reproduzir animação vê-o uma vez. Se um visitante tiver definido menos movimento no seu dispositivo, tudo fica parado. Demasiado movimento distrai; numa página com muito texto, Suave ou Desligado é muitas vezes melhor.

No construtor: como fazer

1. Abra Identidade visual, bloco Nome e logótipo. Clique em Carregar o seu próprio logótipo ou em Deixar a IA criar um logótipo.
2. Em Favicon, escolha o seu logótipo ou a letra inicial automática.
3. Experimente dois ou três estilos em Estilo; veja também em Telemóvel.
4. Em Barra de menu, escolha um design e uma cor.
5. Em Cores, defina a sua cor principal. Leia as mensagens do construtor.
6. Verifique em Modo escuro e Movimento o que pretende.
7. Clique em Guardar e volte a colocar o seu site online.

Resumo

• O painel Identidade visual é gratuito; Guardar cria uma nova versão.
• Um logótipo criado pela IA custa 1 edição por três propostas; o favicon é criado pelo construtor ou carregado por si.
• Doze estilos e quinze designs de menu; o conteúdo do menu mantém-se igual.
• As WCAG exigem pelo menos 4,5:1 de contraste para texto normal e 3:1 para texto grande; o construtor vigia isso, exceto em fotografias e no seu logótipo.
• Um tipo de letra próprio só com licença web; o modo escuro e o movimento configuram-se de acordo com o que os seus visitantes precisam.

Questionário

Exercício

Exercício D4.2: A sua identidade visual e o contraste. Configure a sua identidade visual e meça o contraste dos seus pares de cores mais importantes.

Lista de verificação:

• [ ] logótipo carregado ou escolhido entre as propostas da IA;
• [ ] favicon definido e visto no separador do navegador do seu site online;
• [ ] estilo e design do menu escolhidos, vistos em Telemóvel;
• [ ] cor principal definida e mensagens do construtor lidas;
• [ ] contraste da cor do texto sobre o fundo e do texto do botão sobre a cor do botão medido com um verificador de contraste;
• [ ] modo escuro e movimento escolhidos de forma consciente;
• [ ] identidade visual guardada e site novamente colocado online.

Perguntas:

1. Que rácios de contraste mediu para o texto sobre o fundo e para o texto do botão sobre o botão, e atingem 4,5:1?
2. Em que parte do seu site há texto sobre uma fotografia, e é bem legível num telemóvel?
3. Utiliza um tipo de letra próprio? Onde é que a licença indica que a utilização na web é permitida?

Depois de "concluído", verá um exemplo de resposta: a Schildersbedrijf Example mediu cinzento-escuro sobre branco 14,5:1 e texto branco sobre o botão verde 5,1:1, ambos acima de 4,5:1; o título sobre a fotografia do hero lia-se mal, por isso escolheu uma fotografia mais escura; não usa tipo de letra próprio, por isso não precisa de licença.

Para saber mais

• Understanding Success Criterion 1.4.3: Contrast (Minimum) (W3C, em inglês): https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html
• Understanding Success Criterion 1.4.11: Non-text Contrast (W3C, em inglês): https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html
• Contrast Checker (WebAIM, em inglês): https://webaim.org/resources/contrastchecker/
• SIL Open Font License, texto oficial (em inglês): https://openfontlicense.org/open-font-license-official-text/