Se você trabalha com produtos digitais já precisou criar ou escolher quais ícones usar em seus layouts e se deparou com um universo de possibilidades, certo?
Para que você consiga entender a diferença que os ícones trazem para os projetos, como funciona o processo de desenho e quais são os atributos que devem estar presentes nesse tipo de construção, preparei este artigo.
Aqui, trago algumas boas práticas que podem auxiliar na criação desses ícones e aprimorar suas interfaces digitais.
Em semiótica compreendemos que o ícone é um signo visual (uma imagem) que representa objetos por semelhança. Muito antes deste post - e até mesmo da escrita - a comunicação por meio de imagem era utilizada e compreendida para transmitir mensagens.
Essas formas intuitivas e muitas vezes simples foram acompanhadas por séculos e estabeleceram padrões que ganharam espaço também no meio tecnológico, auxiliando assim na interação e na experiência do usuário com os produtos digitais.
A utilização de ícones em interfaces digitais contribui positivamente quando eles são bem reconhecidos, facilitando a interação humana com o computador. Os elementos visuais auxiliam também no entendimento de textos, diminuindo o tempo de compreensão do usuário e resultando numa experiência mais rápida. Mas cuidado! Ícones mal feitos podem atrapalhar o propósito da interface, confundindo quem a utiliza.
Alguns atributos são importantes para garantir a qualidade dos ícones. Entenda abaixo os três principais:
O formato do ícone, seja um objeto do mundo real (como um cartão) ou uma representação metafórica (como uma seta) deve ser facilmente reconhecido pelo usuário. Para isso é preciso evitar ícones com muitos detalhes ou finos demais. Aposte na simplicidade.
Ícones do design System da IBM
O ícone precisa ser compreensível a ponto de transmitir a funcionalidade com clareza para o usuário. É interessante utilizar ícones ‘universais’, pois a rápida compreensão desses ícones reduz a curva de aprendizagem de novos usuários. Outra opção é agregar palavras junto aos ícones, estabelecendo certa confiança a usuários mais receosos.
Imagem retirada do design System do Material Design
O apelo estético do ícone deve ser atrativo e satisfazer as expectativas do usuário.
Avalie a paleta de cores do seu projeto e não utilize mais que 3 cores no mesmo ícone. Confie em elementos geométricos e que possam ser redimensionados com facilidade, trazendo harmonia para a interface. Não se esqueça: seja consistente com o resto do layout.
Imagem retirada do design System do Material Design
Outra dica é pensar bem e testar ao escolher ou confeccionar um ícone. Não deixe lacunas para outras percepções que possam ser insensíveis e ofensivas para uma parcela dos usuários.
Para confeccionar ícones é recomendado o uso de grids e linhas guias. Essas ferramentas são essenciais e um excelente ponto de partida para estabelecer consistência e padrão.
Veremos abaixo alguns desses grids.
A grade de pixels estabelece regras claras de posicionamento. Com essas diretrizes você pode estabelecer proporções visuais flexíveis e consistentes para os ícones. Além disso, o encaixe dos pixels ajuda a renderizar ícones nítidos em telas de baixa resolução.
As formas fornecem alguns modelos com formatos de círculo, quadrado, retângulo retrato e retângulo paisagem. Assim é possível delimitar uma estrutura padrão para os seus ícones, sem perder espaço para flexibilidade e criatividade.
As linhas ortogonais são linhas-chave que cruzam o ponto central do ícone e criam vértices adicionais para usar em conjunto com o Pixel Grid e as Keyshapes.
A área de segurança mostra onde o conteúdo importante do ícone deve estar, enquanto a área inversa é a área a ser evitada.
Espero que as boas práticas citadas neste artigo contribuam e acrescentem valor em suas interfaces. Aproveito este espaço para compartilhar exemplos de bons ícones de grandes marcas como Apple, Google e IBM.