top of page
  • Agência Utopia Marketing

Entenda mais sobre design de ícones


Os ícones são elementos gráficos, ferramentas de comunicação, que representam alguma coisa e são usados para representar algo ou passar uma simples mensagem. Seu posicionamento esta ligado à uma função estratégica da comunicação visual.

Em vez de escrever “ligue”, podemos passar essa mensagem com um ícone do Telefone, por exemplo.

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

Podemos considerar 3 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óximas abordagens são de algumas características que os ícones precisam ter:

Simples

Usar formas geométricas básicas como círculos, retângulos e linhas que ajudam a manter a simplicidade de um ícone moderno.


Legível

Se o ícone existe para sintetizar uma mensagem e está no lugar de outro artifício comunicacional, ele precisa ser identificável e distinguido facilmente.


Claro

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 são precisos 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 dela.


Outro ítem 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.


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

Organização, flexibilidade e consistência.


Graças aos grids que conseguimos criar a identidade de um sistema de ícones nas minúcias e também compreender a flexibilidade de determinado ícone, além de restringir a á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 o responsivo. 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. Criamos e perguntamos: - “até onde esse ícone pode ser identificável?” Isso ajuda a entender o que é fundamental para cada função e projeto.


Quando falamos de formas orgânicas, devemos apresentar um raciocínio na leitura do ícone para oferecer fácil compreensão do objeto.


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 nossas necessidades. Utilizar ícones parecidos pode causar uma impressão errada no usuário, e essa dissonância pode prejudicar na percepção da marca. Porém, se os ícones encaixam com a proposta do projeto, utilize-os. Existe banco de vetores com pacotes completos.


Conclusão

Ícones são importantes ferramentas de comunicação e são utilizados para estar no lugar de algo. Eles são artifícios comunicacionais, mas não faça com que tudo dependa deles: saiba utilizar em equilíbrio com a mensagem. Faça um orçamento sem compromisso!

Somos uma empresa feliz, que trabalha com amor e tem o investimento justo para tempos emergenciais.


12 visualizações0 comentário

Posts recentes

Ver tudo
bottom of page