2 erros que você deve evitar ao trabalhar com ícones.

11/09/2017 | Bastidores, Técnica

2 erros que você deve evitar ao trabalhar com ícones.

11/09/2017 | Bastidores, Técnica

Opa!
Tudo beleza?

O assunto hoje é iconografia! Eles são fundamentais não apenas em projetos de interface web, mas também quando queremos dar destaque para uma determinada informação ou tornar a leitura menos pesada em qualquer tipo de material de comunicação.

No início da minha carreira eu cometia alguns erros básicos na hora de trabalhar com ícones e notei que muitos designers também acabam cometendo os mesmos erros. Por isso, também vou compartilhar contigo algumas sugestões de como ter um resultado melhor na hora de definir a iconografia de um projeto.

Existem centenas de sites onde você consegue encontrar facilmente bons pacotes de ícones (e de graça). Ao mesmo tempo que isso é bom, pode deixar o designer um pouco preguiçoso a ponto de cometer esses dois erros:

Erro 1: Não definir um estilo

Nem sempre você encontra todos os ícones que precisa em uma mesma família, e daí pode acabar pegando ícones de estilos completamente diferentes para usar no mesmo projeto. Mesmo que deixe eles na mesma cor, a falta de um padrão será nítida.

Conjunto de ícones totalmente sem um padrão.

Conjunto de ícones totalmente sem padrão.

Mesmo deixando na mesma cor, dá pra ver que não fazem parte da mesma família.

Mesmo deixando na mesma cor, dá pra ver que isso aí não tá legal não…

Erro 2: Não manter consistência visual

Talvez até tenha sido definido um único estilo, como Outline, por exemplo, mas pode acabar pecando nos detalhes.

Todos os ícones no estilo Outline, mas ainda assim visivelmente desarmônicos.

Todos os ícones no estilo Outline, mas ainda assim visivelmente desarmônicos.

Por que devo me preocupar com os detalhes?

O que faz um projeto ser visualmente agradável é dar atenção aos pequenos detalhes. A soma de cada coisinha que você se preocupou em fazer bem feita vai dar ao layout final aquele TCHAN que o cliente tanto adora.

Os ícones podem ter uma importância maior ou menor, dependendo do tipo de projeto. Mesmo assim, eles sempre terão o papel de traduzir uma intenção ou informação para um formato visual mais agradável.

Os ícones sempre se destacam no conjunto do layout e é por isso que você deve prestar muita atenção neles.

Boas práticas na hora de definir os ícones do projeto.

Iconografia é uma linguagem universal. Quando você quer ilustrar um determinado tipo de informação com ícone, geralmente já existe um norte, uma convenção da melhor forma de se fazer isso.

Uma engrenagem sempre vai remeter a "Configurações" na mente das pessoas.

Uma engrenagem sempre vai remeter a “Configurações” na mente das pessoas.

Dá pra pegar um pacote de ícones prontos e só dar um tapa em alguns detalhes para adequar ao seu projeto. A seguir, vou mostrar como é o meu processo de criar ícones, na maioria das vezes.

Vou usar como exemplo os ícones que criei para uma empresa que trabalha com panificação francesa. O objetivo era ilustrar as seguintes informações:

• Tempo de Descongelamento
• Tipo de Forno
• Temperatura do Forno
• Tempo de Forno

Primeiro passo: Definir o estilo

O estilo de ícones que você vai adotar tem muito a ver com os objetivos que você terá com eles.

Nessa ocasião, os ícones tinham que ser funcionais. Era para indicar o local onde o padeiro devia preencher com as respectivas informações, em uma folha A4. Os ícones seriam utilizados em um tamanho bem pequeno, por isso acabei optando por trabalhar com o estilo Outline, bem minimalista.

Versão antiga do material.

Versão antiga do material.

Segundo passo: Separar os ícones que servirão como base

Como eram coisas bem específicas que eu precisava ilustrar, não encontrei uma família pronta de ícones que resolvesse meu problema logo de cara. O que eu fiz foi separar algumas ideias, de várias famílias do estilo Outline.

Ideias pré-selecionadas, em estilos muito semelhantes, mas ainda com detalhes desarmônicos.

Ideias pré-selecionadas, em estilos muito semelhantes, mas ainda com detalhes desarmônicos.

Terceiro passo: Redesenhar os ícones para garantir total harmonia e controle sobre eles.

Mesmo aproveitando as ideias de ícones prontos, redesenhei eles para ter o controle sobre a espessura dos traços e acabamentos. O ícone “Tempo de Descongelamento” Eu decidi criar um totalmente novo, pois não estava achando nenhum legal e que soasse harmônico ao lado dos demais.

Ícones finais.

Ícones finais.

Note que, depois de ajustados, todos os ícones ficaram com as mesmas características: espessura de traço, pontas de contorno arredondadas e uma porção de preenchimento em algum detalhe.

Abaixo, a aplicação final no material.

Se eu fosse trabalhar em um material informativo, com ícones apenas ilustrando uma explicação, eles poderiam ganhar umas “purpurinas” a mais.

Para ser usado em um outro contexto, poderiam ser adicionados alguns efeitos leves e um pouco de cor.

Para ser usado em um outro contexto, poderiam ser adicionados alguns efeitos leves e um pouco de cor.

De tudo o que falamos aqui, a palavra que você deve guardar é consistência. Sempre.

O que achou dessas dicas? Espero que tenha curtido, e se tiver algo mais pra acrescentar, é só deixar aí embaixo nos comentários. 🙂

Abração!

Nas redes sociais

VEJA TAMBÉM

Share This