Carregando...
Serviços

Manual de identidade visual para websites: como fazer do zero?

identidade visual para sites

A agência Ciclo separou um conteúdo especial sobre manual de identidade visual, e como fazer do zero. Mesmo sendo uma agência de performance para e-commerce, compartilhou seu know-how com ótimas dicas para vocês leitores. Por isso, aproveite o conteúdo abaixo!

identidade visual para sites

Por que é necessário definir um manual de identidade visual para seu site?

A resposta é simples: sempre que for preciso fazer uma alteração, criar uma landing page, ou acrescentar uma nova página ao seu site, por exemplo, tudo deve seguir um padrão de comunicação visual que corresponde ao que já está sendo usado.

Sem isso, o webdesigner ficará perdido em seu trabalho e não saberá que elementos usar para que tudo permaneça harmônico e equilibrado, sem falar na possibilidade de causar problemas até de navegação e de usabilidade aos usuários.

Para se evitar isso, deve ser criado o manual de identidade visual do site, que é um documento que apresenta todos os parâmetros que devem ser empregados pelos profissionais que forem alterá-lo.

Nesta postagem, você verá os elementos básicos que devem constar neste manual e como definí-los adequadamente.

O que deve constar do manual de identidade visual de um site

Aplicação de logotipo

O logotipo é uma das peças fundamentais de toda identidade visual. Trata-se de uma representação visual da marca, facilmente reconhecida pelo público, e que pode conter símbolos e letras, em conjunto, ou apenas um destes dois tipos de representação.

O famoso logo da Coca-Cola, por exemplo, só tem letras, enquanto o da Apple é apenas um símbolo.

A primeira providência a ser tomada é decidir se este logotipo, que na maioria dos casos é colorido, também poderá ser representado somente em preto e, em versão negativa, somente em branco.

Se estas representações forem permitidas, o manual de identidade visual deve conter as 3 versões de logotipos para que os designers possam usá-las como parâmetro.

Além disso, o manual de identidade visual deve deixar mem claro como o logotipo poderá ser usado, normalmente, os seguinte pontos devem ser definidos:

Tamanho mínimo e máximo do logotipo: em pixels.

Guarda do logotipo: a distância mínima (sempre em pixels) que ele pode ficar da margem ou de outro elemento na página.

Aplicação sobre fundos: dependendo da cor e de outras características do logotipo, ele pode ficar ilegível sobre determinados fundos. Por isso, deve-se determinar sobre quais cores de fundos ele pode ser aplicado e, no caso das cores proibidas, que procedimento adotar.

Usualmente, algumas empresas definem uma “caixa branca” que deve ser colocada entre o logotipo e acor de fundo vetada. Pode-se também optar pelo uso do logotipo em preto ou em branco, aqueles que nos referimos mais acima.

Por fim, é preciso definir o mesmo tipo de procedimento em relação a aplicação do logotipo sobre imagens.

Paleta de cores

Todo website usa uma determinada combinação de cores cuja psicologia foi estudada para passar seu posicionamento. Por esse motivo, o manual de identidade visual deve deixar bem claras quais são as cores principais e secundárias.

Normalmente são 2 ou 3 cores principais, que compõem o fundo, os botões, menus, ícones e tipos de letras.

É necessário definir quais elementos levam quais cores e como elas podem ser combinadas. Em alguns casos, as cores podem significar categorias de assuntos ou tipos de produtos, ou, em outros, definem a hierarquia das informações. Tudo isso deve ser definido.

Além das cores principais, uma paleta de cores secundárias é estabelecida para dar mais possibilidades criativas aos designers.

Formas

Os botões, ícones, caixas, pop-ups e outros elementos do seu site terão bordas arredondadas ou em ângulo?

É preciso determinar detalhes como esses e se, na verdade, alguns elementos, como botões e ícones usam caixas redondas e outros usam retangulares.

Fontes

As fontes, ou tipografias, também costumam ser definidas em 2 ou 3 principais e algumas secundárias, mais raras de usar, no entanto, importantes de se ter como alternativa.

O ideal é definir as tipografias dos título e dos subtítulos, dos textos principais e dos secundários.

Excesso de tipografias em um site podem gerar confusão, mas não deixe de definir essas alternativas, pois em alguns momentos certas fontes escolhidas como principais podem não ser reconhecidas por alguns dispositivos ou aplicativos.

Estilo de ilustrações e imagens

As imagens podem conquistar clientes e, por isso, o manual de identidade visual deve definir seu estilo. Veja um exemplo hipotético: usar sempre imagens com pessoas, nunca usar pessoas de costas, evitar referência a sujeira ou barro, preferir imagens claras e bem iluminadas, etc.

O mesmo vale para as ilustrações: o tipo de traço, cores, se podem ser mais engraçadas ou se devem ser sérias e outros aspectos como estes.

Ícone

Ícones são muito usados em sites e o ideal é criar um pequeno banco de ícones no manual de identidade visual e solicitar que caso seja necessário criar mais, que sigam aquele mesmo estilo, principalmente a espessura dos traços e o graus de verossimilhança com  a realidade.

Comportamento do botões

Quando o mouse passa por eles ou são clicados, que cores devem assumir? Como diferenciar quando estão ativados ou já foram usados? É necessário deixar tudo isso muito claro.

Estes foram os aspectos principais que um manual de identidade visual para sites deve conter. Agora que você já sabe a importância deste documento, que tal criar o seu, antes que alguém faça uma alteração inadequada em seu site?