Ir para o conteúdo
IconiseOficina de ícones
Português (Brasil)
Solicitar acesso

Guia do Iconise

Como comparar e escolher designs de ícone para aplicativo

Compare as propostas em vários tamanhos pequenos e sobre fundos diferentes. Escolha a silhueta e o contraste que melhor representam a ideia do produto.

Coloque as propostas lado a lado sobre o mesmo fundo e observe-as em 64, 32 e 16 pixels. Avalie silhueta, legibilidade, contraste, diferenciação e relação com o produto. Anote observações qualitativas, sem usar uma nota que finja medir a reação de usuários.

Preparar uma comparação justa

  1. Organize as propostas em uma grade e use nomes neutros, como A, B e C.
  2. Mostre todas no mesmo tamanho e fundo. Repita a conferência em um fundo claro e outro escuro.
  3. Reduza cada imagem para 64, 32 e 16 pixels. Esses tamanhos servem a este exercício, não são limites de conformidade de uma loja.
  4. Oculte os nomes dos arquivos na primeira leitura para manter o foco nas formas.

Perguntas úteis, sem notas artificiais

Registre uma observação por proposta. A última coluna justifica uma decisão; não é uma avaliação medida.
CritérioPerguntaObservação
LegibilidadeA forma principal continua visível a 16 px?Detalhe preservado, unido ou perdido.
SilhuetaAs opções continuam distintas quando os detalhes são ocultados?Contorno próprio ou forma comum demais.
ContrasteO símbolo se destaca em fundos claros e escuros?Área legível ou que se mistura ao fundo.
DiferenciaçãoAs propostas representam direções realmente diferentes?Diferença de metáfora e forma, ou apenas de acabamento.
Relação com o produtoA ideia combina com a função e o público do briefing?Relação clara, incerta ou ausente.

A, B e C são ilustrações da galeria pública do Iconise. Elas ajudam a observar as formas; não recebem prompts, classificações nem resultados de teste.

Uma decisão ilustrativa

Imagine que, ao reduzir as três ilustrações, A mantenha um contorno mais claro que B. Registre isso e confira se A também comunica melhor a função do aplicativo. Se B explicar melhor o produto, a silhueta sozinha não decide. Este exemplo descreve uma forma de raciocinar; não relata um teste desses SVGs nem uma preferência medida.

Confirmar a escolha no contexto

Uma prévia reduzida não substitui a conferência na interface e nos fundos em que o ícone aparecerá. Máscaras e regras variam entre sistema operacional, página da loja e navegador. Se os critérios continuarem divididos, mantenha duas opções e peça opiniões com o mesmo contexto para todas as pessoas; não apresente esse exercício como teste representativo com usuários.

  • Escolha uma opção principal e explique como ela atende ao briefing.
  • Mantenha uma alternativa somente se ela oferecer uma qualidade diferente.
  • Antes de preparar os arquivos, confira as saídas necessárias para iOS, Android ou web.

O guia de tamanhos e formatos explica esses usos e reúne fontes oficiais.