Processo de criação de ícones

Depois de ler o maravilhoso O Livro do Ícone de William Horton, fiquei craque no assunto. Não digo um especialista, mas lido com a tarefa com velocidade e sem tropeços. Apesar do livro ser antigo (1994), tudo as recomendações e dicas ainda tem validade e não só para o campo dos ícones, mas também para toda a interface gráfica. O autor analisa gestalt, teoria da cor e principalmente o processo criativo. Vou dar uma pequena amostra do que aprendi.

Não me perguntem onde achar esse livro. O que li desenterrei de uma prateleira da Biblioteca Pública do Paraná. A editora Berkeley foi comprada pela Siciliano e o livro não teve novas edições em português. Na Amazon tem a edição em inglês, para quem estiver mesmo muito afim.

Primeira dica no processo: pare de olhar para o PC. Sim, o papel ainda é o melhor suporte para rabiscar idéias e é assim que você deve começar. A vantagem é que você não precisa se preocupar com os enfeites, ganha velocidade e pode pirar mais. Ninguém vai olhar torto se você tiver uma idéia fraca desenhada de forma tosca. Porém, se você tiver uma idéia fraca desenhada de forma cuidadosa, eu serei o primeiro a atirar a pedra.

O autor do livro recomenda criar pelo menos três opções de cada ícone, mesmo que a primeira pareça fantástica. Depois quando for montado o mapa de pixels, pode ser que a idéia fantástica simplesmente não caiba na moldura. Ah, sim, antes de começar qualquer ícone, tenha certeza do seu suporte. Vetorial ou bitmap? 16px, 32px ou 48px? 256 ou 16 milhões de cores? Várias versões?

Isso tudo tem que ser planejado para que você tenha a noção de quando terá encontrado a essência do ícone. Quanto menor e menos cores tiver o ícone, mais você terá que se esforçar para lapidar a idéia em busca da essência. Essa é a palavra-chave do desenho de ícones. Encontrar o que torna o conceito único e dar ênfase no desenho. Uma técnica bem eficaz usada pelo autor é usar as linhas do contorno mais grossas. Assim, o ícone ganha uma "silhueta", o que facilita a memorização.

Na verdade, o esforço na hora de criar o ícone deve ser na memorização e não no embelezamento de uma interface gráfica. Apesar de essa ser uma consequência desejável, não deve ser o objetivo principal, do contrário, com certeza os ícones irão prejudicar a usabilidade.

Os textos de usabilidade recomendam usar ícones somente para funções frequentes, como por exemplo o botão de salvar dados, abrir arquivos e etc. Eu já tenho uma posição menos radical. Acredito que os ícones podem ser usados para tornar a interface mais rápida de entender e divertida. Quem é que não gosta de abrir um aplicativo e dar de cara com belos ícones que explicam melhor do que rótulos o que eles fazem quando clicados? A suíte Corel usava muito bem isso há alguns anos, com sua tela de boas vindas.

É claro que usuários avançados desligam essa tela o mais rápido possível, mas na Web todo usuário pode ser considerado como um iniciante. Existem exceções, mas a maioria das aplicações e websites que vamos projetar são feitas para serem usadas só algumas vezes, não temos a intenção de virar experts na sua operação.

Estamos acostumados a ver ícones e clicar neles, porem os ícones podem também não ter função. Desde que as interfaces gráficas foram popularizadas, designers tem usado cada vez mais ícones em materiais impressos quando querem resumir uma característica de algum produto ou simplesmente como adereço para dar aquele ar de modernidade que os ícones trazem. Desde que tomemos certos cuidados, podemos fazer isso nas páginas de websites também.

Comprovei que a dica de começar um layout pelo epicentro era boa justamente num projeto com ícones desse tipo. Website institucional básico cujo principal objetivo era dizer que a empresa fabrica estruturas metálicas dos mais variados tipos. Resolvi antes de fazer qualquer layout, desenhar os ícones que representariam cada um desses tipos. Projetei para que fossem o epicentro da página dos produtos & serviços da empresa. Acompanhe o desenvolvimento dos ícones:

Como meu objetivo era colocar isso aqui, preferi desenhar os rabiscos direto no Flash. Isso me freou um pouco a criatividade e não criei muitas versões dos ícones, mas assim vocês podem perceber melhor como os conceitos foram evoluindo da esquerda para à direita ou não. Existem certos padrões que não podemos fugir, como o ícone da casinha, já tão familiar.

Seria muito legal poder clicar nesses ícones e ver alguns exemplos de obras que a empresa realizou, mas infelizmente não dispomos de tanto material fotográfico assim e nem queremos adicionar tal gral de complexidade na arquitetura da informação. É um site simples, cartão de visita mesmo.

Fiz uns testes informais e quase todas as pessoas que viram essa página, gostaram tanto do ícone que passaram o mouse por cima para ver se dava pra clicar. Como sabiam que eu ainda estava fazendo o site, me perguntaram se ainda não tinha feito esses links. "Não, não é pra clicar mesmo", respondi. Apesar dessa frustração do usuário não ser tão prejudicial ao website, acho que não fui muito feliz nessa mesmo. Talvez se tivesse saturado menos os ícones e trabalhado com a cor azul (que é codificada como fundo), não parecessem tão clicáveis. Agora já foi.

Por falar em ícones azuis, neste outro projeto acertei mais:

Os ícones indicam as editorias (assuntos) que o site de notícas trata. Mais difícil do que pensar os rótulos para certos assuntos, me bati para encontrar uma figura que pudesse representá-los. O coração de "Comunidade" foi o pior (excluindo "Administração" que antes era "Opinião"), mas para minha surpresa era o ícone preferido das meninas do Jornalismo. Aliás, elas gostaram tanto que vieram me falar pessoalmente. "São tão bonitinhos... adorei!".

Mulheres em geral gostam bastante de ícones mas porque será? Talvez porque desde criança elas sejam treinadas para a vida num laboratório miniatura, vulgo "casinha de bonecas". Desde o enfeite do cabelo ao relógio, tudo na mulher deve ser pequeno. As gueixas do Japão tinham seus pés amarrados quando nasciam para que sempre fossem pequenos! Bem, talvez seja esse um dos fatores.

Já os homens nem se deram conta de que os ícone existiam. "Ah, aquilo era pra simbolizar a editoria, é?", perguntou um que ouvia minha conversa com as meninas. Como os ícones são pequenos e não fazem contraste com as cores da página, passaram desapercebidos. Porém, como sempre tem os machões que vêem tirar sarro e dizer que é boiolice desnecessária. Nem ligo. Não é argumento relevante do ponto de vista da ergonomia.

Bem, hoje me excedi. Entreguei de bandeja o capítulo sobre ícones do meu livro para vocês, queridos leitores. Por ora, guardarei os detalhes para ele. Quem quiser ler mais sobre o fascinante assunto, tem um artigo bem pragmático no Boxes & Arrows.

• Afinal, o que é ícone? Como criar ícones?
• Pelos poderes do ícone!
• Processo criativo coletivo

Você merece.

Assine nosso conteúdo e receba as novidades!

Atualizado com o Movable Type.

Alguns direitos reservados por Frederick van Amstel.

Apresentação do autor | Website internacional | Política de Privacidade | Contato