App Store Iconize Icon Size: Requisitos de Arquivo, Dicas de Design e Melhores Práticas

Qual é o tamanho certo do ícone da App Store? O que você deve retratar no seu ícone? Qual a diferença que tudo isso fará? Este guia de ícones de aplicação ajudará a responder estas questões importantes, oferecerá dicas e links para recursos.

Por que ícones de aplicação importam

O tamanho do ícone da App Store é minúsculo. Quando os ícones aparecem na tela do smartphone, cada um ocupa apenas um polegar de largura de espaço. Mas, na Apple App Store ou na Google Play Store, o design que você coloca neste pequeno tamanho de ícone de loja de aplicativos é tudo.

Como com capas de livros ou imagens de listagem de produtos na Amazon, os ícones de aplicativos para celular ajudam seus clientes em potencial a fazer um julgamento rápido em uma fração de segundos.

Antes de lerem o título ou descrição do aplicativo, eles vão ver o ícone. Seu ícone de aplicativo móvel precisa informá-los sobre seu aplicativo de uma forma atraente, levando-os a aprender mais. Depois que alguém clicar no seu ícone, é mais provável que eles instalem seu aplicativo. E é isso que você quer. Basicamente, o ícone do seu aplicativo é a porta de entrada para a instalação.

É por isso que é crucial para acertar.

Um ícone de aplicativo não é um logotipo

Pode parecer mais fácil apenas transferir o logotipo da sua marca para o seu ícone de aplicativo e chamá-lo de um dia. Não o faça. Um ícone de aplicativo não é um logotipo. Um logotipo representa a marca por trás do aplicativo, sim, mas o ícone do aplicativo representa o aplicativo em si.

Apenas porque você não usaria um logotipo no lugar de uma imagem do produto em uma listagem da Amazon, você não deve colocar um logotipo na loja do aplicativo e chamá-lo de ícone. Somente mega-marcas como Starbucks ou Target podem se safar com isso.

Se você é uma marca decentemente estabelecida e conhecida, no entanto, sinta-se à vontade para adicionar seu logotipo ao ícone do aplicativo de alguma forma, mas não faça dele o foco.

No exemplo abaixo, a conhecida editora de livros de viagens Lonely Planet inclui o seu logotipo no ícone do aplicativo para Guias por Lonely Planet. Mas o logotipo é apenas uma parte do design do aplicativo. A borda azul acalmante faz com que a paisagem urbana de tons amarelados seja um sucesso, convidando o espectador para a sua próxima aventura.

O slogan diz que este aplicativo é uma compilação de “guias de cidade curados”, e o ícone do aplicativo dá dicas para essa função.

Uma pessoa que adora explorar novas cidades e que executa uma busca na loja por “guias de viagem” será atraída para este quente mas excitante ícone do aplicativo.

Compare the Lonely Planet app to another travel guide app you will find under the same search.

mTrip tira o M de seu logotipo, adiciona um fundo verde, e se dá um polegar para postar o ícone na App Store.

Mas o ícone não diz nada sobre o que o usuário está recebendo, e o mTrip não é suficientemente conhecido para ser reconhecido por uma única letra. Netflix, abaixo, também pega a primeira letra de seu logotipo e a usa como um ícone de aplicativo, mas esta marca pode fazer isso porque todos sabem o que o Netflix é e o que faz.

Agora você saiba a diferença entre um logotipo e um ícone de aplicativo, vamos dar uma olhada nas perguntas importantes que você precisa fazer a si mesmo antes de começar a desenhar.

Aplica tamanho do ícone da loja: 4 perguntas a fazer antes de criar um ícone de aplicação

É verdade que o seu ícone de aplicação precisa de atrair o maior número de olhos possível. Você quer que ele se destaque de todos os ícones de aplicativos ao seu redor, e em um mundo saturado de aplicativos, isso não é tarefa fácil.

But aqui está um segredo: você não precisa fazer seu ícone de aplicativo apelar para todos no mundo. Em vez disso, concentre-se em torná-lo apelativo para as pessoas do seu público-alvo.

Então aqui está a primeira pergunta a considerar.

Pergunta #1: Quem é o público-alvo deste aplicativo?

O seu aplicativo é para pessoas que gostam de cozinhar? Pais com filhos pequenos? Amantes de jogos como Candy Crush e Angry Birds? Viajantes? Músicos amigos?

Desde que você já construiu a aplicação, você deve saber a resposta a esta pergunta. Mas faça dele o foco do seu design de ícones da aplicação, também.

Procure uma frase simples que defina o seu público alvo.

Vamos dizer, por exemplo, que a sua aplicação ensina as pessoas a tocar piano. Uma pesquisa por “aprender a tocar piano” na loja do Google Play traz à tona estas aplicações de topo.

Dos quatro ícones da aplicação, que você clicaria para aprender mais?

Para mim, um ex-pianista que adoraria reaprender o que eu já conheci, este ganha. Mãos para baixo.

Não acho o ícone da aplicação Flowkey nada apelativo porque não me diz nada sobre tocar piano. (Mais uma vez, é basicamente um logotipo e nada mais). Os outros dois apresentam teclas de piano dentro do ícone – esperado, talvez, mas totalmente bem.

Para mim, Real Piano Teacher ganha porque mostra as mãos tocando o piano em teclas rotuladas com uma folha de música na frente da pessoa que está tocando.

Você não pode aprender a tocar piano sem aprender notas, e aprender a ler notas musicais pode ser tão desafiador quanto aprender a ler uma língua escrita. Apenas pelo seu ícone de aplicativo, este aplicativo promete ajudar os usuários a aprender a ler notas, acelerando-os mais para alcançar o sonho de tocar belas músicas por conta própria.

Agora aqui está o senão: você, como um criador de aplicativos, deve se perguntar como posso tornar meu ícone de aplicativo ainda melhor do que aquele que eu mais gosto (Real Piano Teacher’s)?

Desenhar o seu ícone de aplicativo para subir acima de todas as suas escolhas competitivas de topo.

Questão #2: Que padrões de design atuais eu devo seguir?

Tendências de design mudam o tempo todo. Eu estou por aqui há tempo suficiente para me lembrar da mais recente mudança do logotipo da Starbucks em 2011. Eu senti um pouco triste que a sirene estava mudando, mas finalmente o design se tornou sinônimo da minha cafeteria favorita mais uma vez e eu não podia imaginar que ela voltasse ao seu design anterior.

Claro, algumas pessoas acham o novo logotipo muito sobressalente e brincam que eventualmente ele não passará de um ponto verde.

Aparte disso, é importante acompanhar as tendências atuais de design e como elas se relacionam com o design da sua aplicação. Tanto a Loja do Google Play como a Loja de aplicativos publicam diretrizes atualizadas que você pode (e deve) seguir.

Estas diretrizes ajudam você a criar um ícone de aplicativo com a sensação mais moderna e acessível.

O Google Material Design oferece um conjunto completo de orientações que cobrem os seguintes tópicos:

• Princípios de design, incluindo expressão de marca e abordagem de design
• Formas de grelha e linhas-chave
• Specs – uma descrição detalhada da anatomia do ícone do aplicativo e especificações de iluminação
• Tratamentos de ícones: informação sobre cor, camada, pontuação, sobreposição, acordeão e distorção da aplicação

Material Design tem como objectivo ajudar a criar um ícone de aplicação com uma sensação táctil através do meio de pixels. É material complexo, mas vale a pena estudar.

O guia da interface humana da Apple é lido de uma forma mais amigável e também fácil de seguir. Ele oferece dez dicas, tais como “Abrace a simplicidade” e “Teste seu ícone contra diferentes papéis de parede”, juntamente com instruções de como segui-los.

Após isso, a Apple oferece informações sobre como:

• Atributos do ícone da aplicação em formato
• Produzir o ícone da aplicação em vários tamanhos diferentes

• Prover ícones selecionáveis pelo usuário
• Criar ícones de destaque, configurações e notificação para iOS

Embora as Diretrizes de Interface Humana sejam mais curtas e, em muitos aspectos, mais simples do que as Diretrizes de Design de Materiais do Google, estas últimas oferecem mais dicas de design.

Pergunta #3: Como posso dar uma dica sobre o propósito do meu aplicativo?

Como vimos no caso dos aplicativos learn-to-play-piano, comunicar o propósito do seu aplicativo para o seu público é extremamente importante.

Vamos dar uma olhada em outro exemplo. Digamos que você esteja desenhando um ícone de aplicativo para um aplicativo que ajude os escritores a organizar seus pensamentos e idéias. Talvez seu aplicativo também estabeleça metas de contagem de palavras e permita que os usuários acompanhem o tempo diário de escrita. Além disso, talvez o seu aplicativo forneça citações de pontapé nas calças para que os escritores escrevam.

Então quem é o seu público?

Escritores, é claro. Escritores principiantes. Novelistas. Freelancers. Jornalistas. Todos os escritores podem usar a sua aplicação!

Agora dê uma olhada na sua competição.

Na App Store, procure “aplicações para escritores” e terá uma variedade de aplicações organizacionais.

Focalize os ícones das aplicações aqui. Primeiro, há um bigode com um fundo vermelho. Se você não visse o título, você não saberia que esta aplicação é mesmo dirigida aos escritores. Mesmo assim, não está claro o que a aplicação faz, exactamente, para ajudar os escritores a escrever.

O ícone da aplicação seguinte apresenta um fundo branco com um avião de papel vermelho…? Ponta da caneta? Cabeça de salmão? Não é super claro.

O ícone final da aplicação no nosso pequeno estudo apresenta uma caneta de lâmpada contra um fundo preto. Só de olhar para o ícone, você terá a sensação de que esta aplicação ajudará os escritores a formar idéias e manter essa inspiração fluindo até se transformar em um livro, artigo ou poema.

Emule este ícone, não os dois primeiros. Dica sobre a funcionalidade que o seu aplicativo oferece.

Note que a dica de funcionalidade deve parecer diferente para diferentes tipos de aplicativos.

Se você criou um aplicativo utilitário, por exemplo – como uma calculadora de dicas ou uma lanterna – o ícone do aplicativo deve fazer a pessoa que está navegando sentir como se já estivesse usando o aplicativo antes mesmo de clicar no ícone.

O ícone do aplicativo abaixo não atinge esse objetivo e, além disso, está lotado e é difícil de ler.

Por contraste, o ícone do aplicativo abaixo faz você sentir como se pudesse acessar rapidamente esta calculadora de dicas porque ela já está praticamente aberta.

Icons para jogos móveis também precisam de tratamento especial. Seu objetivo em um ícone de aplicativo de jogo é fazer o espectador sentir como se já estivesse imerso no mundo do jogo. Tudo que eles precisam fazer é clicar no ícone do aplicativo e eles terão a pressa de jogar algo novo, emocionante e recompensador.

Aqui está um ótimo exemplo de um ícone de aplicativo que realiza isso:

Você quase pode sentir a pressa de descer uma colina acidentada só de olhar para este ícone de aplicativo. É uma deliciosa emoção, no entanto, uma que te faz querer jogar o jogo.

Um exemplo não tão grande? Este ícone de aplicação para um jogo de basquetebol.

Você sente que está… a olhar para uma bola de basquetebol. Não estás a jogar um jogo. BORING!

Questão #4: Qual é o aspecto da minha aplicação?

Embora seja uma boa ideia exercitar a criatividade enquanto desenha um ícone de aplicação, não quer que a sua interface e ícone de aplicação tenham texturas diferentes. Eles devem trabalhar em conjunto em um sistema de design sem costura.

Aqui estão dois jogos de blocos de palavras cujos ícones combinam com o visual e a sensação dos jogos que eles representam.

Icone de maçãs com as mesmas cores de pôr-do-sol e blocos de palavras volumosos que o próprio jogo.

Icone de maçãs com o mesmo aspecto que o próprio jogo.

Você não quer levar o seu público a pensar que a sua aplicação é um tipo de jogo de blocos amadeirados, mas sim revelar um jogo de blocos de palavras espumosas e coloridas ao pôr-do-sol. O branding inconsistente é um design pobre.

Como um blogueiro escreve em 99designs, “Se o design da sua aplicação é plano, o seu ícone também deve ser plano. Se a sua aplicação contém skeuomorphism, o seu ícone também deve ter pelo menos algum elemento de skeuomorphism”.

Faça com que o seu ícone de aplicação reflita as cores, texturas, e sinta o máximo possível.

Dicas para ter em mente enquanto projeta seu ícone de aplicativo

Agora que você tenha respondido as quatro perguntas essenciais ao projeto do aplicativo, é hora de começar a criar várias variações ou projetos propostos para o seu ícone de aplicativo. Comece com um esquema básico de design e depois experimente com cores, bordas e gráficos diferentes.

Aqui estão algumas dicas para guiá-lo:

• Confie em apenas duas ou três cores. Mais de três e o ícone do seu aplicativo começa a parecer muito ocupado.
• Evite usar uma fotografia real. Você sempre pode transformar uma fotografia em uma imagem de ilustração/vetor, embora.
• Pense pequeno. O ícone do seu aplicativo pode parecer grande para você enquanto você o está desenhando, mas é pequeno em uma tela de iPhone ou Android. Certifique-se de que cada elemento esteja claro, mesmo na forma mais pequena do ícone.
• Guarde palavras para o título e tagline. Um ícone de aplicação destina-se a ter um impacto visual. Você pode dizer o que precisa dizer em palavras no título, tagline e descrição do aplicativo.
• Siga sempre os requisitos e diretrizes de tamanho do ícone da Apple e da loja de aplicativos do Google. Você pode encontrar os requisitos de tamanho do Google Play aqui e os da Apple App Store aqui. Tenha em mente que você precisará criar várias versões do seu ícone de aplicativo para cada loja. Observe também que, embora a App Store no iPhone tenha cantos arredondados, você deve enviar todos os seus arquivos de aplicativos de forma quadrada. O sistema Apple irá arredondar os cantos para você.

Embora você tenha dois ou três ícones de aplicativos em potencial para escolher, é hora do passo mais importante da sua jornada de criação de ícones de aplicativos: testar seus ícones para descobrir o que o seu público-alvo pensa.

Acima do tamanho do ícone da App Store: testes divididos de ícones de aplicativos no PickFu

A melhor maneira de saber o que o seu público-alvo pensa do seu ícone de aplicativo é dividi-lo – testá-lo no PickFu antes de você realmente publicar sua listagem de aplicativos na Loja do Google Play ou na App Store. Claro, você poderia fazer um teste A/B no aplicativo e executar várias variações na própria loja, mas esse é um processo lento que pode sugar seu tempo e dinheiro.

Por meio do teste de divisão para um grupo de respondentes no PickFu antes de publicar seu ícone de aplicativo ao vivo, você obtém o feedback necessário sem perder dinheiro no processo.

Leva apenas alguns minutos para configurar uma sondagem no PickFu. Lembra como eu disse que a escolha do público-alvo é crucial? PickFu torna isso fácil para você. Você pode atingir os membros do público pelo iOS ou dispositivo Android, se eles são um jogador móvel, e quanto eles gastaram na App Store, entre muitos outros traços úteis.

Um desenvolvedor de aplicativos levou recentemente para o PickFu para testar entre dois ícones para um aplicativo de namoro.

O primeiro ícone mostra o perfil rosa de uma mulher segurando um telefone, o título do aplicativo em duas cores diferentes, e um fundo avermelhado e laranja. Ao todo, este ícone do aplicativo apresenta cerca de seis cores diferentes.

A segunda opção elimina a mulher, mantém um fundo vermelho alaranjado mais ágil, e deixa as palavras, mas em branco com um pequeno coração enfiado na curva da letra M. Este ícone do aplicativo apresenta apenas três cores.

Respondentes votaram esmagadoramente a favor da opção B, mais simples e limpa. Ao contrário de um teste A/B tradicional ao vivo, os respondentes do PickFu dão-lhe um feedback escrito detalhado. Então podemos ver exatamente por que a Opção B ganhou.

Primeiro de todos, os entrevistados apreciaram o visual mais simples e profissional da Opção B, dizendo coisas como: “Eu só gosto da simplicidade desta e não destaca um gênero para uso” e “Eu realmente não gosto da cor roxa/rosa brilhante na Opção A – é muito difícil para os olhos”

esperadamente, o desenvolvedor do aplicativo foi com o segundo ícone do aplicativo, que é muito mais provável de atrair usuários em potencial do que a Opção A.