Design de ícones

Porque é que ícones misturados parecem baratos

A maioria dos produtos começa com uma biblioteca de ícones gratuita e depois depara-se com um conceito que ela não cobre. Alguém encontra o ícone em falta noutro conjunto, com um traço ligeiramente mais espesso, cantos mais arredondados ou uma perspetiva diferente. Repita uma dúzia de vezes e a interface parece montada a partir de peças, mesmo que ninguém saiba dizer exatamente porquê.

Um conjunto personalizado resolve isto com regras. Cada ícone assenta na mesma grelha, usa a mesma espessura de traço, o mesmo raio de canto e o mesmo nível de detalhe. Uma vez definidas essas regras, podem acrescentar-se novos ícones anos mais tarde e continuam a combinar.

Desenhado para 16 píxeis, não para a apresentação

Os ícones são muitas vezes desenhados em grande e admirados em grande, e depois entregues a 16 ou 24 píxeis, onde o detalhe se transforma em desfoque. Um delicado desenho linear de um edifício torna-se numa mancha cinzenta numa barra de navegação. Alguns conceitos também se revelam ambíguos quando reduzidos.

Verificamos cada ícone no seu tamanho real dentro de capturas de ecrã da sua interface. Quando um ícone é usado em tamanhos muito diferentes, o pacote maior inclui versões ajustadas separadamente para uso pequeno e grande.

Os programadores recebem SVGs limpos e otimizados com nomes consistentes, além de uma biblioteca de componentes Figma para designers. Isso mantém os ícones consistentes entre os ficheiros de design e o produto em produção.

• Grelha, espessura de traço e estilo de cantos partilhados
• Verificado em tamanho real na sua interface
• SVG otimizados com nomes de ficheiro previsíveis
• Componentes Figma para a sua equipa de design