Usabilidoido: Menu Principal

English Website


Processo de criação de ícones

Perfil no LinkedIn
Perfil no Youtube
Perfil no Twitter
Perfil no Instagram
Perfil no Spotify
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:

Processo de criação de ícones para Palmifer

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.


Autor

Frederick van Amstel - Quem? / Contato - 30/08/2004

Redes

Siga-me no Twitter, Facebook, LinkedIn ou Instagram.

Citação

VAN AMSTEL, Frederick M.C. Processo de criação de ícones. Blog Usabilidoido, 2004. Acessado em . Disponível em: http://www.usabilidoido.com.br/processo_de_criacao_de_icones.html

Relacionados



Comentários

Discussão
Cássio
14/12/05 às 15:12

Aeeee... cara não tem como duvidar que os ícones aparentamente! são muito importantes em qualquer desenvoltura. Em questão á isso eu lhe peço uma dica ou sugestão de qual aplicativo usar para criar ícones, pois eu trabalho em um ramo de desenvolvimento de sistemas para gestão empresarial e queria saber um pouco sobre ícones para que eu possa, no entanto, criar os novos aqui na empresa entende? por enquanto obrigado! e por favor me responda, preciso agilizar o meu processo aqui hahaha, um abraço.


Discussão
Fred
14/12/05 às 15:24

Nesse caso eu usei o Flash, mas já trabalhei com o Microangelo e funcionou legal!


Discussão
Rafael
15/12/05 às 01:58

Você poderia colocar o target dos links do texto como _blank heheheheh valeus abraços.


Discussão
sandra
04/01/06 às 18:26

Gostaria de saber o preço do livro icone de wilian horton? e onde achar moro na penha no rj.
se eu for comprar quero comprar dependendo do preço direto na livraria. sandra. Indique por favor as livrarias mais próximas.


Discussão
Andréa Kristian
27/06/06 às 15:44

Achei muito interessante mais aqueles ícones mas sofisticatos como são elaborados, qual é programa para cria-los. Meu e-mail: [email protected] se puder me ajudar aguardo sua resposta.


Discussão
Carlota
11/10/06 às 14:52

Oi, Gostava de saber de um programa fácil de trabalhar para fazer icons para um autorun de um cd interactivo por exemplo... Obrigada


Discussão
fabiano
15/08/07 às 15:49

como vai vc


Discussão
Di
01/11/07 às 02:49

Não eram as gueixas que amarravam os pés e sim as chinezas. No Google procure por Chinese Foot Binding.


Discussão
Bruna Graziele.
20/10/09 às 15:11

Tenho que fazer um icone com um arco e 4 letras escritas na cor cinza. No desktop está muito bom, mas quando abro a pasta o logo indicado na barra de iniciar, fica borrado. É assim mesmo? Pois os outros icones aparecem normalmente.

Obrigada.


Discussão
Aaron David
30/04/10 às 12:44

Tem um volume do livro "O livro do ícone" na biblioteca da Universidade Positivo.


Discussão
vera bambach
29/07/10 às 15:13

oi gostaria de saber se vcs mandam sugestões de cartão de visita para estetica


Discussão
Rafael Daron
03/07/12 às 10:08

Bacana Fred!

Seu texto me instigou a comprar "O Livro do Ícone". Consegui um em versão Português pelo Estante Virtual.

Interessante a visão que você já tinha das coisas a long time ago. (=






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