10 dicas para criar ícones que não sugam
Quase todo designer está pensando em design de aplicativo atualmente. Um dos menores recursos de todos os aplicativos é o ícone usado para representá-lo na tela de todos os dispositivos móveis e nas lojas de aplicativos. Criar um ótimo ícone é mais do que apenas colocar um logotipo em uma caixa. Você precisa de algo que se destaque entre todos os outros ícones de aplicativos existentes.
Um bom ícone pode ser usado de várias maneiras - para aplicativos, mídias sociais e até mesmo em projetos impressos menores ou cartões de visita. E basta um pouco de design e planejamento.
1. Facilite a leitura
Um ícone precisa ser fácil de ler. (E não estamos falando de texto.) Legibilidade visual é fundamental.
O ícone deve incluir um visual altamente reconhecível por causa da marca ou porque é fácil de entender. Pense nos ícones na área de trabalho do seu computador, por exemplo. Você sabe onde as coisas estão localizadas devido à natureza simples dos ícones - os documentos são armazenados em pastas, a música é tocada em um botão na forma de uma nota musical e as imagens são armazenadas em um local que se parece com uma foto Polaroid.
Quando se trata de legibilidade visual, a marca é uma grande parte da consideração. Marcas grandes e domésticas geralmente têm ícones que fazem parte do logotipo ou de uma imagem icônica. As pessoas tendem a reconhecer esses elementos imediatamente, mesmo em tamanhos pequenos. Isso pode ser um pouco mais difícil para marcas novas ou menores ou conceitos de ícones, e os designers podem optar por seguir outras técnicas para obter um impacto ideal.
2. Pense no ícone, não na imagem
Um ícone não é uma foto em uma caixa. Um ícone pode incluir uma imagem, mas também pode ser uma representação de texto, logotipo ou combinação desses elementos.
Ele só precisa ser altamente visual e reconhecível. A maioria dos logotipos não inclui fotografias reais, mas é uma representação mais gráfica de uma ideia. (Esse conceito é enfatizado pela necessidade de criar um ícone baseado em vetor.)
Uma imagem também pode se tornar difícil de ler em tamanhos pequenos e se perder no mar de outros ícones no telefone ou outro dispositivo do usuário. Uma representação mais gráfica geralmente pode ter mais peso visual.
O ícone do aplicativo móvel da loja de departamentos Macy's acima é um bom exemplo disso. A grande estrela branca no centro de uma caixa vermelha é fácil de identificar. O ícone varia de acordo com o tratamento padrão do ícone de assinatura da empresa, na medida em que a cor é invertida para dar ênfase ao ícone. Um fundo vermelho provavelmente se destacará mais do que um branco contra uma variedade de papéis de parede de usuários.
3. Evite Palavras
Uma coisa que você não verá nos ícones é o uso de palavras. Simplesmente, não há espaço suficiente para um ícone cheio de coisas para ler e compreender.
Como regra geral, evite o texto completamente, a menos que faça parte do seu logotipo. Mesmo o texto que faz parte de um logotipo deve ser cuidadosamente considerado antes de usar no design de logotipo principal.
O ícone deve ser projetado de forma a criar identidade sem palavras. Além disso, lembre-se de quantos ícones são realmente usados no contexto dos dispositivos em que aparecem. A maioria inclui uma linha de texto descritor sob o bloco de ícones real.
O ícone Design Shack, por exemplo, é aquele que usa uma única letra “d” com tratamentos de cores e tipos consistentes com o site. Essa marca unificada e a letra de fácil leitura criam um vínculo visual e uma conexão, sem palavras.
4. Use cores vibrantes
Quer que seu ícone se destaque? Vá em negrito com cores. Uma opção de cores vibrantes ajudará você a se destacar em vários fundos e chamará a atenção dos usuários.
A última coisa que você deseja de um design de ícone é combinar com todas as outras opções disponíveis. Isso torna o azul - especialmente os tons do céu e da marinha - uma cor que você provavelmente desejará evitar, porque muitos outros ícones a usam.
Se o azul é o seu logotipo principal ou a cor da marca, tente emparelhá-lo com algo mais brilhante para causar impacto. Considere um "novo neutro", como o verde limão, ou opte por um tom sazonal, como laranja brilhante no outono ou rosa brilhante na primavera.
5. Desenvolva um símbolo ou logotipo simples
Você provavelmente tem um logotipo para sua marca, mas quando se trata de ícones, um símbolo também é importante. Um símbolo pode ser uma representação gráfica simples ou um trecho de um logotipo ou imagem.
Só precisa ser nítido e memorável. Mais marcas estão incorporando símbolos icônicos em suas marcas e logotipos padrão para criar uma conexão completa entre ícones menores e projetos de design maiores.
Pense no aplicativo de mensagens e compartilhamento de fotos Snapchat. O símbolo fantasma se tornou tão reconhecível que pode aparecer à medida que os usuários estão familiarizados, em outros esquemas de cores e formas e até como uma imagem independente em um outdoor. Este é um excelente exemplo de um símbolo que funciona.
6. Lembre-se da escala
Enquanto a maioria de nós pensa nos ícones como pequenas coisas em nossos telefones ou computadores de mesa, um ícone nem sempre é pequeno. Ele deve ser projetado de maneira a torná-lo utilizável, independentemente do tamanho.
Isso é especialmente importante devido ao cenário digital em constante mudança, ao surgimento de mais telas de retina e porque plataformas e dispositivos diferentes podem renderizar ícones em tamanhos diferentes.
Construiu grande e depois reduza.
7. Crie em um formato vetorial
Quando se trata de escala e tamanho, o formato também é uma consideração importante. Um ícone precisa ser criado usando um design baseado em vetor.
Ter uma imagem vetorial lhe dará a liberdade de fazer alterações e salvar o ícone para uma variedade de dispositivos, tamanhos e viewports sem criar muitas imagens individuais. Como a realidade é que você precisará de várias versões de um ícone dimensionado para uma variedade de projetos.
O benefício do vetor é a flexibilidade. Mas há um porém. Para muitos aplicativos ou plataformas, você provavelmente precisará salvar uma cópia em um formato não vetorial para upload.
8. Pense Fora da Caixa de Design
Nos últimos meses, houve muitos ícones que usam fundos de cor única com um ícone branco, técnicas de design planas e longas sombras. Embora essas tendências possam ser muito divertidas, não fique preso na caixa de design. Faça algo diferente com o seu ícone.
Se todo mundo estiver trabalhando com arestas quadradas, considere algo mais arredondado. Adicione uma pitada de textura ao fundo para se destacar de todas as cores planas. Não pense que você deve modelar seu ícone no que todo mundo está fazendo.
9. Torne monocromático
Há um truque divertido que os designers usam há anos para testar a eficácia de projetos de pequena escala - torná-lo monocromático. Se o seu design comunicar a mesma mensagem com ou sem cores, provavelmente funcionará. Se o ícone precisar da cor para ser lida, continue trabalhando nas revisões.
Pessoalmente, inicio quase todos os projetos de design em preto e branco e depois começo a adicionar cores. É o esboço em um conceito de computador. Se você o esboçar no papel e funcionar antes de realmente começar a adicionar cores, a ideia provavelmente terá uma estrutura sólida.
10. Pense quadrado
Seu ícone e todas as partes dentro da moldura quadrada também precisam se ajustar perfeitamente. Isso não significa que o desenho ou a imagem tenha que ter exatamente a forma quadrada, mas a proporção básica para cada ícone tem altura e largura iguais.
Portanto, se você tiver um símbolo super vertical ou horizontal, precisará de uma maneira de preencher o espaço ao seu redor para que não se perca no fundo. Opte por um conceito que preencha uma parte significativa de um espaço que será principalmente quadrado. (Mesmo um ícone circular e arredondado tem altura e largura iguais.)
Conclusão
Pode parecer clichê, mas a chave para um bom design de ícone é ser ... bem ... icônico. É simples assim.
Projete com simplicidade, cor e reconhecimento visual em mente. Pense em interfaces e tendências atuais para que seu design se encaixe nos padrões. (Você não projetaria um ícone ckeuomórfico para um aplicativo móvel iOS atualmente, não é?) E divirta-se; um ícone é a porta de entrada do usuário para sua interface digital.
Fontes da imagem: Ash Kid, Casey Fleser, Roland Tangalo, Gustavo da Cunha Pimenta e Microsiervos Geek Crew.
