Tudo o que você precisa saber sobre design de ícones

Os ícones são pequenos, mas poderosos, e é por isso que é importante pensar cuidadosamente no design dos ícones. Designers de todos os lugares testemunharão a quantidade de criatividade e esforço necessários para criar um bom ícone. Isso porque tem que ser expressivo, mas também simples ao mesmo tempo.

Um plano de fundo em ícones

Um design de ícone é, na verdade, apenas uma pequena imagem que representará um objeto ou um programa. São imagens realmente simples que comunicam uma mensagem poderosa. Os ícones geralmente são muito fáceis de lembrar e também são um recurso principal em quase todas as interfaces gráficas.

Curiosidade: A origem da palavra ícone vem do trabalho grego 'eikona' que significa imagem. Ícones digitais começaram a aparecer quando os primeiros sistemas operacionais GUI, como Macintosh e Microsoft, foram lançados.

Quais são os diferentes tipos de ícones?

Existem três tipos principais de ícones que você deve conhecer. Aqui estão algumas informações sobre cada um deles e o tipo de impacto que eles trazem para a experiência do usuário.

Ícones universais

Estes são ícones universalmente reconhecidos. Por exemplo, os ícones para pesquisa, impressão, casa ou carrinho de compras são esses ícones. Mas há apenas um pequeno problema. Ícones universais são bastante raros. Quando queremos dizer raro, queremos dizer que, além dos exemplos dados aqui, a maioria dos ícones é ambígua e pode diferir em significado com base na interface.

Ícones com significados diferentes

Assim como o nome sugere, esses ícones têm vários significados que podem torná-los conflitantes ou contraditórios. Por exemplo, os ícones que são um coração e uma estrela são conflitantes. A funcionalidade desses dois ícones mudará de um aplicativo para outro e, às vezes, eles também podem competir entre si. Por causa disso, esses ícones se tornam bastante difíceis de interpretar com precisão. Mesmo em um aplicativo, esses símbolos podem se tornar confusos, quando o usuário clica neles esperando um resultado específico e, em vez disso, obtém outra coisa.

Ícones exclusivos

Como você pode descrever um objeto único ou uma ação usando um ícone? Usando um design de ícone exclusivo. Mas é importante notar que há muitos exemplos de onde isso falhou. Por exemplo, o significado foi perdido quando a Apple decidiu representar seu centro de jogos através de um monte de círculos coloridos. O que esses círculos significam e como eles estão relacionados ao centro do jogo?

Quais formatos de ícone você pode usar?

Existem vários tipos de formatos de ícones que você deve conhecer ao solicitar um design de ícone.

• SVG – estes são gráficos vetoriais escaláveis ​​e fornecem o formato base perfeito. Por ser escalável, significa essencialmente que você pode alterar o tamanho do ícone sem perder a qualidade.
• PNG – O formato gráfico de rede portátil é a opção a ser usada se você deseja compatibilidade completa. Este é um formato raster, o que significa que é baseado em pixels e você não pode fazer o upscale sem afetar a qualidade. PNG funcionará no Word, PowerPoint e em e-mails. Eles podem ser adicionados em cima de qualquer fundo colorido sem edição.
• ICO – o formato de ícone do Microsoft Windows é ótimo se você quiser usar seu ícone para qualquer aplicativo do Windows ou até mesmo como favicon para seu próprio site.
• ICNS – este formato é usado para fins muito específicos. Este é um formato específico da Apple que pode ser usado com documentos do Mac OS X, bem como aplicativos.

Dica do Kimp: Mantenha o design do seu ícone o mais simples possível. Tente usar itens do mundo real em seu design que representem claramente o significado pretendido. Por exemplo, você pode usar um gráfico de barras para indicar finanças. Você poderia usar uma bolsa de trabalho para significar negócios. Para ajudar seu designer a criar os ícones certos, dê a eles o máximo de contexto possível. Deixe-os saber exatamente como seus ícones serão usados.

O que torna um ícone eficaz ou ineficaz?

Como agora você tem uma ideia sobre os formatos de ícones e os tipos de ícones, vejamos também o que torna um ícone eficaz ou ineficaz. Dessa forma, quando você trabalha com seu designer, pode observar essas propriedades.

Clareza

Um design de ícone deve comunicar uma mensagem imediatamente quando você a vê. Se a metáfora que você usa em seu ícone for desconhecida ou obscura, as pessoas ficarão confusas sobre o que isso significa. Por exemplo, o ícone usado para Home é conhecido por todos – isso é clareza. Agora imagine o que aconteceria se o ícone de Home fosse representado como um círculo com um ponto no meio? Isso tornaria confuso certo? Ícones confusos são ineficazes.

Legibilidade

Depois de classificar o fator de clareza, você deve garantir que o ícone seja facilmente legível. Se você observar o exemplo abaixo, o primeiro ícone é difícil de entender porque o detalhamento é muito fino, tornando-o um borrão. Um bom exemplo de ícones pequenos bem feitos, seriam os do Google Maps onde há excelente legibilidade. Usar traços mais finos, não deixar espaço suficiente e adicionar muitos detalhes a ícones pequenos os tornará ineficazes porque perdem a legibilidade.

Alinhamento do ícone

Um design de ícone deve ter um senso de equilíbrio e isso pode ser alcançado alinhando todos os elementos opticamente. Isso significa que o design precisa ser alinhado de acordo com a forma como o espectador perceberá os elementos.

Brevidade de um ícone

A brevidade do ícone será determinada com base na quantidade de detalhamento que você adicionar. Mantenha seus ícones o mais simples possível e evite adicionar linhas e detalhes desnecessários que os tornarão ilegíveis e embaçados.

Consistência

Se você estiver fazendo o design de ícones para um aplicativo ou uma interface específica, certifique-se de que todos os seus ícones mantenham a mesma consistência. Se alguns ícones parecerem mais detalhados ou mais nítidos do que outros, você perderá consistência. Isso fará com que a interface sofra em termos de experiência do usuário.

Personalidade do projeto

Novamente, com a interface ou aplicativo para o qual você está projetando, você deve garantir que cada ícone incorpore a personalidade da marca. Você pode ir de profissional a divertido e formal com base no tipo de estilo de marca e voz que você tem. Esta é uma parte muito importante do briefing que você deve fornecer ao seu designer ao criar ícones.

Seu ícone deve ser fácil de usar

Mesmo depois que o desenho foi feito com um 't', o ícone está longe de estar completo. O ícone que seu designer fez precisará de teste e preparação antes que você possa permitir que os clientes o usem. Este teste e preparação garantirão que o ícone seja fácil de usar. Os sinais de um ícone fácil de usar são que ele é:

• Bem organizado – aqui você precisa ter certeza de que seu designer colocou os arquivos mestre para o design de uma maneira bem organizada para que você possa consultá-los mais tarde, se necessário. Você pode pedir que eles sejam colocados em ordem alfabética ou em outra ordem para que possam ser encontrados facilmente quando você precisar deles.
• Bem documentado – peça ao seu designer para comunicar os princípios-chave da família de ícones e também o layout das regras técnicas. Você também pode tornar esta documentação pública assim que estiver completa, para que as pessoas possam consultar se quiserem.
• Testado – certifique-se de executar isso com o designer. Faça com que eles coloquem todos os ícones projetados um ao lado do outro, o que ajudará você a ver sua consistência e a relevância que eles têm.
• Suportado por ferramentas personalizadas, como um gerenciador de ícones. Se você puder fornecer ferramentas personalizadas que ajudarão no uso dos ícones, você deve torná-los acessíveis.

O que seu briefing para design de ícones deve incluir?

Considere todos os casos de uso

Saiba onde seus ícones serão usados ​​e o que eles precisam representar. Você também precisaria diferenciar entre quais ícones precisarão de uma metáfora e quais ícones serão feitos com base em objetos da vida real. Uma vez que você esteja claro sobre esses fatores, você pode comunicar isso ao seu designer por meio do briefing.

Brainstorming de conceitos e metáforas

Primeiro, faça uma lista de todas as representações que podem ser usadas para descrever o ícone da melhor maneira possível. Recursos como conjuntos de palavras e dicionários são úteis para encontrar coisas como palavras-chave, palavras semelhantes e definições do conceito que você deseja transmitir por meio dos ícones. Você pode então começar a simplificar essas ideias para que o ícone (que precisa ser abstrato e simples) envie a mensagem de forma clara e eficaz. Tente realizar o máximo possível de pesquisa e brainstorming por conta própria e, em seguida, peça o apoio de seu designer para o resto.

Encontre referências úteis

Invista sempre em pesquisas para encontrar referências de qualidade. As chances são de que em algum lugar, alguém já tenha feito uma versão fantástica do ícone que você deseja projetar. Se você pode encontrá-los, você também pode encontrar sua inspiração. Quando você fornecer essas referências ao seu designer, ele achará mais fácil entender sua perspectiva.

Escolha o estilo do ícone

Alguns dos estilos que são populares são glifo, plano, delineado, material e desenhado à mão. Ao finalizar o estilo, você precisará pensar em dois fatores importantes. Uma seria a interface do usuário na qual eles serão exibidos e o estilo dela. A segunda seriam os requisitos para essa interface, como se é Material ou iOS.

Discuta em detalhes com seu designer

Certifique-se de que seu designer mantenha a consistência em todos os ícones que você está projetando. Para deixar as coisas mais claras, peça que eles façam um esboço completo de todos os ícones a serem feitos.

Após aprovar os esboços conceituais de seus ícones, você deve solicitar versões vetorizadas. Então, finalmente, obtenha alguns modelos de seus ícones para que você possa ver se eles se adequam bem aos seus vários casos de uso.

Agora, analisamos o que você deve incluir em seu briefing para tornar seus ícones mais nítidos. Então, a seguir, vamos passar pelas principais coisas que precisam ser incorporadas aos ícones que você projeta, para que seu resultado final seja perfeito. Certifique-se de discutir isso com seu designer.

Lista de verificação para criar novos ícones

As etapas descritas abaixo serão executadas pelo seu designer para criar seu design de ícone.

Evite ícones desfocados

Para que os ícones pareçam nítidos, nítidos e estendidos, eles precisam ser posicionados em pixels. Isso eliminará quaisquer soluços embaçados.

Verifique dimensões e peso

Recomendamos que você use o teste de estrabismo para garantir que todos os seus ícones tenham o mesmo peso e dimensões. Basicamente, apenas aperte os olhos e dê uma olhada em como seus ícones aparecem em relação um ao outro. Se algum ajuste for necessário, certifique-se de obter a ajuda de seu designer. Uma dica aqui é usar um círculo perfeito e um quadrado para garantir que o peso seja o mesmo em todo o conjunto de ícones.

Usando formas geométricas

Faça com que seu designer use formas geométricas simples e firmes para desenhar seus ícones. Isso tornará os ícones claros e parecerão esteticamente atraentes.

Evite o excesso de detalhes

Remova todos os detalhes que fazem seus ícones parecerem ocupados e pesados, quando você os percorre com o designer. Em vez disso, mantenha apenas os detalhes básicos e simples, que farão com que os ícones pareçam limpos e claros. Os ícones são pequenos e podem se transformar em um blob com muitos detalhes.

Mantenha espaço

Todos os detalhes finos dentro de um ícone precisam de espaço para respirar. Se todos ficarem muito próximos, eles tornarão todo o design enlameado. Quando você olhar para os ícones, veja se todos eles têm espaço suficiente para que os detalhes fiquem claros e se o significado deles fica claro para você imediatamente.

Contraste nos ícones

Certifique-se de que haja contraste de cor suficiente nos ícones. O equilíbrio de preto e branco deve ser perfeito. Se não houver contraste suficiente, os ícones parecerão pouco claros.

Veja a unidade visual

Outro fator que você deve analisar é a unidade visual de um ícone. O que isso basicamente significa é que o peso das linhas, os tamanhos dos cantos, a paleta de cores usada, o nível de detalhes incluídos e os elementos do design permanecem consistentes através do conjunto completo de ícones. Certifique-se de conversar sobre isso com seu designer, pois é muito para acompanhar!

O design do ícone é divertido, mas difícil de acertar

Nós conduzimos você através de um monte de informações para que você possa começar com o design de ícones. É muito para assimilar e se familiarizar, portanto, certifique-se de trabalhar com um bom designer para obter seus ícones da maneira certa. E forneça a eles todos os detalhes necessários para entender como seus ícones serão usados ​​e quem os visualizará. E em breve você terá um grande conjunto de ícones que são fortes, claros e fáceis de usar projetados.