Ícones são elementos gráficos, ferramentas de comunicação, que representam alguma coisa. Se você conferiu meu artigo sobre semiótica, esse discurso pode parecer familiar, pois estamos nos referindo a uma ferramenta de comunicação que substitui ou agrega a algo.
Eles servem para estar no local de algo e passar sinteticamente uma mensagem. “Estar no lugar de algo” é estreitamente ligado a uma função estratégica da comunicação visual. Em vez de escrever “imprimir”, posso passar essa mensagem com um ícone de impressora, por exemplo.
Com uma aparência familiar (ou não), um ícone sugere a função de um objeto, por isso é importante que esse artifício visual expresse as características essenciais de algo.
Podemos entender os ícones em três níveis: imagem, diagrama e metáfora.
A categoria imagem é um ícone que possui semelhança com o objeto ao qual representa, o diagrama possui relações estruturais e a metáfora tem uma relação no significado do representante.
Tipos de ícones
Atualmente, podemos considerar três classificações principais para os ícones: solid, outline e two-tone, sendo a última a mescla das duas primeiras.
Características de um ícone
Quando acompanhamos a história dos ícones, entendemos um pouco sobre como chegamos nessas três categorias principais. O mundo pós revolução tecnológica está inundado em informações, que exigem maior processamento, que por sua vez gera fadiga, afinal, estamos nos referindo a seres humanos.
Esse excesso de informação gera uma demanda de estímulos visuais mais limpos, que impacta todas as áreas que se propõem a comunicar algo. Por isso, os próximos tópicos são de algumas características que os ícones precisam ter:
Simples
O modelo “flat” de ícones se opõe ao skeumórfico do começo do milênio, onde os ícones tinham que representar à fio o objeto ao qual se referia, com sombras, iluminação e textura.
Usar formas geométricas básicas como círculos, retângulos e linhas, ajuda a manter a simplicidade de um ícone moderno.
Legível
Um ícone precisa ser simples para se tornar mais legível. E com legibilidade, estou falando da capacidade de distinção. Se o ícone existe para sintetizar uma mensagem e estar no lugar de outro artifício comunicacional, este precisa ser identificável e distinguido facilmente.
Claro
A mensagem que um ícone se dispõe a passar precisa estar de acordo com o que ela efetivamente passa para a maioria das pessoas. Existe uma regra que diz que um ícone precisa ser interpretado corretamente por 80% das pessoas.
Anatomia de um ícone
Podemos entender a anatomia dos ícones em três partes principais: stroke, counter area e corner. Os nomes não importam tanto, o que importa é a ideia e os cuidados que é preciso ter com cada uma das partes.
O principal cuidado que deve ser tomado refere-se ao stroke, pois em qualquer software de criação vetorial nós temos 3 tipos de alinhamento que o stroke pode assumir: center, outside e inside. Isto é, imaginando uma linha primordial, um contorno pode estar para dentro dela, para fora ou no meio.
Quando falo para ter cuidado com o stoke e seus alinhamentos, estou recomendando que, caso seja um ícone outline, preste muita atenção na integridade da sua mensagem, que pode ser corrompida a depender do alinhamento. Por via de todas as dúvidas, sempre trabalho com formas para descrever linhas.
Outro item para ter muito cuidado é com o arredondamento. Softwares como o Illustrator têm a opção de arredondar “quinas” de forma simplificada, mas que para a manipulação posterior ela pode ser, digamos assim, adulterada.
O arredondamento é absoluto, isto é, 10px de arredondamento em um ícone de 50px tem uma anatomia completamente diferente dos mesmos 10px de arredondamento em um ícone de 500px.
Óbvio que existe uma opção que torna o arredondamento relativo, ou seja, que cresça junto com a transformação, mas prefiro sempre agir com cautela e fazer os arredondamentos com círculos de auxílio, me ajuda tanto nesse quesito como na parte da consistência com os grids.
Os grids
Com o decorrer deste texto, fica evidente a importância dos grids em vários aspectos, sobretudo na flexibilidade e consistência.
Graças aos grids que conseguimos injetar a identidade de um sistema de ícones nas minúcias e também compreender a flexibilidade de determinado ícone, restringir área de atuação e margem de segurança.
O que não fazer
Um ícone precisa ser pensado para funcionar em diversos tamanhos, do menor ícone para mobile, até uma placa de banheiro de bar. Pensar nessa flexibilidade de comunicação nos impede de tomar determinadas decisões, como por exemplo, trabalhar com excesso de elementos em um ícone ou utilizar formas orgânicas. Para um ícone, cada pixel importa.
Devemos pensar em um ícone moderno com elementos puramente essenciais. Gosto de fazer a pergunta “até onde esse ícone pode ser identificável?” Isso me ajuda a entender o que é fundamental, mas óbvio, depende de projeto para projeto.
E quando falo de formas orgânicas, é alertando que as formas orgânicas não possuem a flexibilidade e distinguibilidade como um símbolo geométrico, pois não existem maneiras de controlar o resultado das formas orgânicas como se tem nas formas geométricas. Mas como disse, depende de projeto para projeto.
Por que aprender sobre isso se já tem pronto na internet?
O ponto mais importante para você considerar o desenvolvimento de ícones é a expressão de uma marca.
Nem sempre as soluções disponíveis na internet se encaixam às mensagens que precisamos passar com a linguagem que precisamos usar. Utilizar ícones muito distintos pode causar uma impressão errada no usuário, e essa dissonância pode prejudicar na percepção da marca. Evidente que, se os sistemas de ícones encaixam com a proposta do projeto, use-os.
Existe uma série de sites gratuitos onde você pode buscar packets de ícones que podem se encaixar na sua mensagem.
Conclusão
Ícones são importantes ferramentas de comunicação e são utilizadas para estar no lugar de algo. Eles são artifícios comunicacionais, mas não faça com que tudo dependa deles, saiba utilizar com parcimônia e aproveite as convenções sociais. E esse repertório só é adquirido com muita observação e consumo crítico.
