Iconografia

Conceito

Os ícones são representações visuais de interações, comandos, dispositivos e diretórios. Os ícones do sistema são projetados para serem simples, modernos e de fácil compreensão. Cada ícone deve aceitar reduções sem perder sua legibilidade.

Eles tem como objetivo facilitar o entendimento e diminuir o esforço cognitivo ao realizar uma ação. Além disso, devem ser usados em situações especificas, ícones em excesso muitas vezes podem atrapalhar mais do que ajudar.

BrandBook_VERT

Para as apresentações, use os ícones disponíveis no banco Noum Project da coleção LAFS.
https://thenounproject.com/LAFS/collections É preferível o uso de os ícones, sem preenchimento, como a coleção exemplificada acima.

material design icons

Para a programação de sites e aplicativos, faça download da fonte Material Design Icons e use os ícones disponíveis. https://materialdesignicons.com/

  • Entre no link acima e clique em download para instalar a fonte em seu computador.
  • Acesse https://pictogrammers.githu b.io/@mdi/font/5.4.55/ para visualizar todos os ícones.
  • Ao clicar em cima da figura do ícone, esse já está copiado.
  • Cole o ícone como texto.

Os ícones podem ter diferentes interpretações, são poucos os que tem o significado bem difundido, sendo assim, é importante usar sempre um texto de apoio para reforçar que a comunicação seja satisfatória.

Concluído

Certo

Use ícones com texto de apoio.

Errado

Ícones sem texto de apoio podem não ser claros.

Os ícones devem auxiliar a informação, sendo assim, evite usá-los em excesso para não gerar mais esforço cognitivo ou simples efeito visual.

Certo

Use um único ícone para maior clareza.

Errado

Muitos ícones na interface criam ruído visual.

O ideal é usar ícones bem difundidos que sejam de fácil compreensão ao usuário, isso facilita o entendimento e associação ao seu conceito. Lembrando que não é bom estender muito seu significado.

  • Download
Certo

Use apenas um ícone por funcionalidade.

  • Download fonte
  • Download ícones
  • Download PDF
  • Download arquivos
Errado

Muitas variações aumentam o esforço cognitivo.

Tamanhos

Utilizamos três tamanhos de icones no nosso design system:

8px (pequeno)
Ícones pequenos são usados em casos específicos. Geralmente em espaços menores que dos inputs, o que os torna bem circunstâncias. Um exemplo de sua aplicação são em tags.

16px (médio)
Ícones médios são usados em inputs, selects, tooltips, menus e componentes.

24px (grande)
Ícones médios são usados em botões, modais e cards.

32px (extra grande)
Ícones extra grandes são usados em casos específicos. Geralmente em informações que necessitam de um destaque maior. Um exemplo são os ícones de aplicativos.

Cores

Nossos ícones estão disponíveis para uso nas seguintes cores. (#00747A) para os ícones verdes, (#AAAAAA) para os ícones cinzas e (#E9E9E9) é usa do para estados desabilitados.

Nos casos de componentes que contêm confirmações, alertas, informações e reconhecimentos usamos o (#F07363) para erros, (#41D394) para conclusões, (#E6CF42) para avisos e (#E6F1F2) para mensagens padrões.

Espaçamentos

O espaço adequado deve envolver os ícones do sistema para permitir legibilidade e toque.

Ícones de 8px podem usar uma meta de toque de 16px.

Ícones de 16px podem usar uma meta de toque de 32px.

Ícones de 24px podem usar uma meta de toque de 48px.

Ícones de 32px podem usar uma meta de toque de 64px.