Logo
Logo é uma representação visual composta de símbolos e palavras que tem como objetivo identificar uma marca específica.
Quando usar?#
Deve ser usado para identificar a qual empresa/grupo/indivíduo/produto a aplicação ou página da Web pertence, ou quando for preciso fazer referência a alguma empresa, grupo, produto ou indivíduo, quando este último possuir um logo.
Quando não usar?#
Considere não incluir ou remover o logo de um layout, quando:
- Quando a versão utilizada viole as especificações de uso apresentadas no manual de marca.
- Quando não houver consentimento de uso/aplicação por parte da empresa/grupo/indivíduo a qual o logo pertence, pois isso pode trazer consequências legais, caso assim a entidade proprietária da marca deseje.
Boas práticas no uso#
- Verifique se o logo possui o tamanho apropriado para o objetivo em que está sendo aplicado. Exemplo: Logos que são muito grandes fazem com que exista espaço extra acima da barra de navegação principal e com que a aparência da página inicial pareça desordenada ou desequilibrada.
- Certifique-se de que o logo tenha um fundo transparente pois assim ele vai se adequar em cima de uma seção colorida ou bloco dentro da solução. Atenção para as regras de contraste do logo e fundo de aplicação no manual da marca e acessibilidade.
- Quando utilizado na barra de navegação e header, fica melhor quando aplicado em sua versão horizontal, pois assim ocupará menos espaço vertical.
- Utilize o formato do logo em SVG para que a mesma não perca qualidade quando houver mudanças de resolução de tela.
Importante
No manual de marca existem especificações sobre quais versões utilizar em determinadas situações, é imprescindível seguir tais determinações, pois sua não utilização implicam em mal uso de marca.
Recomendações de dimensões#
A recomendação de 15,625 x 6,25 em (250 x 100 px) é ideal para aplicação em uma página da Web ou aplicação. Os formatos/dimensões indicados abaixo são uma sugestão, ficando a cargo da pessoa designer determinar as dimensões que melhor atendem ao seu layout.
Dimensões paisagem:
- 15,625 x 6,25 em (250 x 100 px)
- 21,875 x 9,375 em (350 x 150 px)
- 25 x 6,25 em (400 x 100 px)
Dimensões quadrado:
- 6,25 x 6,25 em (100 x 100 px)
- 10 x 10 em (160 x 160 px)
Importante
Verifique no manual de marca se existe direcionamento sobre reduções mínimas viáveis para aplicação em cenários específicos.
Favicon#
É um pequeno ícone que representa o logo, pode ser a primeira letra do nome do logotipo (parte textual, normalmente é o nome da marca) ou o símbolo (imagem) que identifica seu negócio ou site.
Consulte a documentação dos ícones para utilizá-lo.
Posicionamento#
O logo serve como um marco que orienta os usuários quando eles chegam pela primeira vez em uma página e os ajuda a identificar o site que estão visitando. Sendo importante que seja exibida, em uma localização fixa, em todas páginas que fazem parte do site ou aplicação.
Faça#
- Prefira usar alinhado à esquerda no topo, pois é o padrão de design mais comum (leitura ocidental).
Não faça#
- Evite utilizar alinhado à direita ou ao centro, pois estes alinhamentos apresentam maior dificuldade para utilizá-lo como recurso para retornar à página inicial. E também pode afetar negativamente o SEO, resultando em uma taxa de rejeição e desistência mais altas, além de levar a uma possível diminuição nos acessos.
Acessibilidade em logos#
O logo é tratado como uma imagem funcional, sendo necessário informar ao leitor de tela na descrição a função desta imagem. Atua como um link que direciona para a página principal (Home) do site ou aplicação.
note
Desenvolvimento#
O logo deverá ser envolvido em um link para fazer redirecionamento para a página inicial do site.
Também deverá conter no atributo alt a informação da função desta imagem, que no caso é um link para a página inicial, como no exemplo abaixo:
Para mais informações, você pode consultar o Tutorial de imagens feito pela W3C.