Iconografia e ilustração

As diretrizes dos ícones e das ilustrações, desenhados à mão e ligados ao processo: a mão de quem desenhou fica à vista. Os catálogos completos estão em Recursos.

Ícones

Tudo desenhado à mão, do mesmo jeito que os cantos: a linha passa do canto, o círculo não fecha, o ponto não é redondo, e o desenho inteiro inclina um pouco.

Como se desenha um ícone do Feitio

Grade de 24

todo ícone num quadro de 24 por 24

Traço de 2,3

pontas e juntas arredondadas

Inclinado 3°

como quem desenha rápido

Cor do texto

nunca uma cor fixa

Só traços

nenhum círculo ou retângulo perfeito

Nenhum ícone é uma linha só

Toda junção é um cruzamento de dois traços: as duas pernas do certo, os dois arcos do círculo, os dois lados da seta. Uma linha contínua tem cara de computador.

O ícone acompanha a palavra

Ele ajuda a reconhecer; quem explica é o texto. Sozinho, só onde o significado é universal, e com nome para o leitor de tela.

Nada de ícones de outro conjunto

Um ícone geométrico pronto ao lado dos desenhados denuncia a costura. Ícone novo se desenha, com as regras acima.

Marca de terceiros entra como é

O logo do GitHub, de uma loja de aplicativos, de um pagamento: nunca redesenhado à mão nem trocado por um ícone do Feitio, porque a marca é do dono e as regras dele pedem o desenho original. Só a cor pode seguir a tinta, quando a marca aceita uma cor só.

Ilustração

Desenhos pequenos para telas vazias e erros grandes, na mesma mão dos ícones: tinta na cor do texto e um toque de laranja. Vão dentro da página, não como imagem, para seguirem o tema.

• Quando: tela vazia, erro grande, uma boas-vindas. Momentos sem conteúdo, em que o desenho faz companhia.
• Quando não: como enfeite de cartão, de cabeçalho ou de cada item. O desenho é raro como o laranja.
• Nas fachadas de fora, a ilustração é do cliente: os desenhos do Feitio não aparecem.