Um ícone é uma representação gráfica de um objeto, conceito ou ação. Ele é um elementos de interface, então ele deve ser desenvolvido para ser apreciado, mas criar interação com o usuário também.

Ao longo dos anos a tecnologia vem evoluindo e os monitores estão com a resolução cada vez mais elevada, os celulares usando telas grandes com ícones interativos (iPhone), e com isso a criação de ícones está cada vez mais importante dentro do conceito de Design de Interface, passando a receber atenção especial.

Com toda essa evolução, no momento em que se está planejando um web site, deve ser levada em conta a criação dos ícones que farão parte da interface. Para isso, levante uma lista com todos os ícones que farão parte daquele layout.

Quando fazemos uma lista com ícones que serão necessários, evitamos ter ao final do projeto uma série de ícones avulsos, que não tem uma unidade com o layout. Essa lista prévia dos ícones a serem utilizados farão com que se perca menos tempo no projeto.

Após ter a lista é preciso iniciar os esboços dos ícones, e para isso é preciso ter conhecimento do público-alvo do site onde os ícones serão utilizados, pois é baseado nele que os ícones serão criados.

Use metáforas e conceitos conforme o grau de informação do público-alvo, uma vez que os ícones são representações visuais de alguma palavra ou objeto, e ao serem vistos devem ser compreendidos.

Existem alguns conceitos que já são utilizados no mercado durante muito tempo, e estão muito difundidos. O “globo”, por exemplo,  é um ícone que significa Web, o “envelope” significa E-mail, e vários outros com significado já conhecido por muitos.

Desenvolva no papel os conceitos, metáforas e primeiros traços dos ícones e só depois de tudo pronto vá criá-los em um software.

No momento em que se está criando os ícones de um projeto, é preciso que esses ícones tenham unidade de estilo, e para que isso aconteça veja algumas dicas:

Cores: as cores devem ser usadas para contar a história do ícone, não as use apenas para deixá-lo mais colorido.

Sombras: elas dão profundidade aos objetos, e causam um efeito realístico, evitando que o ícone se pareça apenas uma colagem ou ilustração.

Iluminação: escolha um ponto de luz e sombra, mantendo este mesmo ponto para todos os ícones.

Perspectiva: todos os ícones de um mesmo projeto devem ter a mesma perspectiva. Caso queira uma visão do alto, use-a para todos os ícones. Se for uma visão lateral, use também para todos os ícones.

Depois de todo o trabalho de definição das metáforas, conceitos e esboços, é hora de abrir um software de ilustração vetorial (Corel Draw ou Illustrator) e fazer a finalização dos ícones.

Quando se trabalho com arquivos em forma de vetor você tem uma liberdade maior para alterar o que não funcionar, tendo também um arquivo fonte, livre de resolução e tamanho.

Após desenhar o ícone é hora de exportá-lo e isso requer atenção, uma vez que os ícones possuem tamanhos quase que padronizados (menor que 32 x 32 pixels), mas isso não o impede de ter ícones em tamanho maior em seu projeto.

Na hora de fazer a exportação, faça já no tamanho em que o ícone será utilizado no projeto, esse procedimento evita que os ícones “estourem”.

E para finalizar faça um teste com todos os ícones visualizando em painéis com diferentes cores de fundo, isso serve para que você veja com quais cores cada ícone combina melhor.

Na hora de criar um ícone, lembrem-se: MENOS É MAIS!