10 hacks de design para criar ótimos ícones de aplicativos
Os ícones de aplicativos são a primeira coisa que seus usuários notam quando se deparam com seu aplicativo. Com bilhões de aplicativos brigando por atenção na loja de aplicativos, um ícone de aplicativo tornou-se um importante diferencial que quebra a confusão e traz usuários ao seu aplicativo. Eles são, de fato, o primeiro ponto de contato que seus usuários encontram. Portanto, é extremamente importante aproveitar essa experiência imediatamente.
Nesta postagem, vou sugerir alguns hacks de design que podem ajudá-lo a criar ícones legais de aplicativos que podem se destacar na loja de aplicativos e possivelmente destacar seu aplicativo entre outros concorrentes para instalações.
Antes de contar os pontos, você deve entender que o objetivo fundamental de um ícone de aplicativo é desenvolver uma conexão imediata e criar pistas cognitivas. Tudo sugerido neste post remonta fundamentalmente para atingir isso.
Aqui estão alguns dos hacks de design para criar ótimos ícones de aplicativos
A regra dos 70%
Existe um consenso entre os designers sobre a utilização de 70% do espaço do ícone para destacar o objeto principal conectado ao app. Um objeto pode ser qualquer coisa relacionada ao aplicativo. Se você estiver criando um aplicativo de fotografia, o objeto pode ser uma câmera ou uma lente. Para um jogo, pode ser o rosto de um personagem e assim por diante.
Ou seja, o objeto deve ocupar a maior parte (70%) da área do ícone. A ideia é desenvolver cognição instantânea com os usuários e fazer com que eles naveguem até a página do aplicativo para a descrição. Depois que eles chegam à página do aplicativo com uma descrição, fica muito mais fácil para você adquirir o usuário.
No entanto, apenas permitir um espaço maior ao objeto não é suficiente. Deve estar livre de desordem também. Só então ele pode se conectar e criar uma cognição mais rápida, o que nos leva ao próximo ponto.
Corte a desordem até que o básico comece a desmoronar
Continue cortando a desordem até que a ideia fundamental do objeto dentro do ícone comece a aparecer. Em outras palavras, reduza seu ícone até um ponto em que o objeto no ícone passe de sensato a sem sentido. Corte até que o objeto retenha sua forma universal e identificável pela maioria das pessoas.
Por exemplo, se você estiver criando um aplicativo para ocultar imagens, poderá criar um ícone de aplicativo que tenha "chaves e cadeado" como objeto principal. Agora, você pode remover sombras ou contadores e optar por um ícone totalmente plano. Depois feito isso, você pode ser minimalista no design, jogando inteiramente com as cores para criar efeitos 3D para a forma de “chave e fechadura" usada no ícone.
Opaco sobre brilhante e brilhante sobre opaco
A próxima coisa que destaca um ícone de aplicativo é o uso apropriado de contraste. Os designers costumam empregar contraste entre o objeto e o plano de fundo do ícone do aplicativo. Se você puder executar as duas etapas mencionadas acima, poderá chegar aqui automaticamente.
Criar contraste também tem muito a ver com as cores. Comece com uma paleta de cores predeterminada em sua mente e vá avançando. Apenas lembre-se de que a ideia é criar vibração e contraste entre a cor de fundo e os elementos do objeto. Se você é um iniciante nisso, pode consultar alguns designs no Dribbble e baixar as paletas de cores de sua escolha.
Depois de terminar o corte final, você pode criar 2-3 versões com mais branco ou preto nas cores. Agora você pode escolher aquele que parece certo para seus olhos. Depois do iOS 7, muita ênfase em ser paga em cores frescas com tons mais fortes de branco nelas.
Não se deixe enganar pelo seu big Mac
Depois de instalado em um dispositivo, o ícone do aplicativo é exibido em várias resoluções. Para que pareça significativo mesmo em seu menor avatar, deve-se projetá-lo mantendo as proporções em mente. Muitas vezes, os designers trabalham em grandes telas de Mac, nas quais até mesmo os mínimos detalhes também podem ser descobertos. No entanto, quando o mesmo ícone é testado em um smartphone com tamanhos de ícones variados, os detalhes se perdem.
Se você estiver trabalhando em um Mac e criando a loja de aplicativos de ícones primeiro, poderá facilmente inserir alguns pequenos detalhes. Mas lembre-se de que o menor ícone destinado ao menu de configurações é uma imagem de 29x29px. Detalhes mais finos, como pequenos textos ou outros símbolos, não serão visíveis nele.
O que você pode fazer melhor é manter o tamanho em mente e empregar formas e padrões fundamentais para realizar o trabalho. Abrace a simplicidade e concentre-se em um único objeto. De preferência, uma forma ou elemento único que retenha seus contornos e detalhes, apesar do dimensionamento. Dessa forma, seu ícone pareceria apropriado em todas as resoluções sugeridas nas diretrizes fornecidas pela Apple e Android.
Experimente o seu ícone em uma infinidade de papéis de parede
Os usuários têm gostos e preferências variadas que se refletem na escolha de papéis de parede e temas em seus smartphones. Isso significa que o ícone do seu aplicativo terá que se destacar em uma infinidade de cores. Portanto, é sempre uma boa ideia testar a visibilidade do seu ícone em papéis de parede de sete cores básicas. Você pode aumentar ou diminuir a saturação de branco/preto nos papéis de parede que está usando para concluir um teste satisfatório.
Pode haver algumas situações em que o papel de parede interferiria na visibilidade. Papéis de parede como selfies podem não ter cores uniformes e podem interferir na visibilidade do ícone. Você não pode fazer muito aqui, mas como eu disse, você pode testá-los contra as sete cores básicas para continuar.
Decidir sobre a abstração e fazer iterações
Os designers sofrem de um dilema constante entre a abstração e a representação real do objeto principal dentro do ícone. Com o surgimento de ícones planos e interfaces de usuário, a era do peso mudou muito para a abstração, mas não se pode simplesmente eliminar a representação real de um objeto. Objetos reais ou ícones esqueuomórficos ainda estão fortes na loja de aplicativos e há razões válidas para isso.
Por exemplo, se você criar um aplicativo de aprimoramento de som, poderá desenhar um amplificador esqueuomórfico no ícone do aplicativo, em vez de achatá-lo ou criar um ícone de linha. Mas dado o fato de que um amplificador não é uma mercadoria familiar, sua cognição diminuiria se fosse achatada. Para coisas que são relativamente comuns e desfrutam de familiaridade universal entre as massas (uma câmera para um aplicativo de fotografia), você pode definitivamente sair com um ícone plano. No entanto, se o aplicativo estiver conectado a algo obscuro, será melhor mantê-lo real ou skeuomórfico.
Outra ótima maneira de chegar a um bom design de ícone é fazer várias iterações com skeuomórfico e plano. Você pode manter o segundo ponto em mente ao fazer isso. Faça várias iterações removendo alguns detalhes de cada vez. Empilhe todos eles lado a lado e decida qual você mais gosta e por quê.
Para jogos, identifique um personagem
Fazer ícones de jogos pode ser muito divertido, pois muitas coisas criativas podem ser realizadas ao fazer um. No meio disso tudo, você deve ter notado que os jogos costumam ter histórias e personagens. Se seguirmos a regra de construir cognição com os usuários, os rostos dos personagens do próprio jogo podem fazer um ótimo trabalho. Na verdade, esse é o motivo pelo qual os rostos dos personagens são tão comuns em ícones de aplicativos de jogos.
Se você está fazendo um jogo, precisa descobrir o personagem principal ou um personagem comum em todos os níveis. Devido à forte familiaridade do personagem com os jogadores, o personagem pode ser usado para criar uma forte lembrança do jogo. E, pelo mesmo motivo, também pode se tornar o ícone do aplicativo do seu jogo.
Você pode escolher uma paleta de cores e construir o ícone do seu aplicativo em torno delas. Francamente falando, fica muito mais fácil se você for para um rosto. Mas, ao mesmo tempo, pode ser necessário colocar alguns efeitos adicionais para destacá-lo.
Paletas de cores consistentes e convenções para ícones e interface do usuário
A interface do usuário do aplicativo terá um tema específico e o uso de determinadas cores. É melhor empregar as mesmas cores para projetar o ícone também. Você também pode fazer o mesmo com certos elementos que implementou na interface do usuário e usá-los no ícone. Isso torna seu design mais uniforme e leva a uma lembrança e familiaridade mais fortes de seu aplicativo entre os usuários.
A criatividade salva o dia
Faça uma pesquisa por “aplicativos para fazer” no Google Play e você se deparará com uma grade cheia de marcas de seleção. Sim, a maioria dos designers de aplicativos de tarefas só poderia criar uma marca de seleção como ícone do aplicativo – um ícone comum para tarefas. No entanto, no meio desse barulho, o ícone do Evernote se destaca confortavelmente.
Resultados da pesquisa para o termo "aplicativos para fazer". Observe que o ícone do Evernote se destaca entre outros.
A ideia do ícone deriva do fato de que um Elefante nunca esquece. É acoplado a uma execução brilhante de uma orelha de elefante dobrada que denota um bloco de notas. Ele diferencia o Evernote imediatamente de outros aplicativos de tarefas na loja e cria uma forte cognição.
Outro exemplo de excelente design de ícone pode ser atribuído ao Pocket. Para começar, a ideia do app é única. Embora os favoritos existam há muito tempo, eles não podiam fazer os usuários voltarem para ler o conteúdo que salvaram.
O Pocket, por outro lado, usou miniaturas para criar uma memória visual clara. O aplicativo aciona uma emoção “salve este conteúdo” e é representado de forma clara e inteligente pelo próprio ícone. A forma vermelha refere-se a um “Pocket” enquanto a seta para baixo representa “download” sem dúvida.
Não use fotos ou imagens
Além dos ponteiros mencionados acima, você também pode evitar a implementação direta de fotos e imagens no ícone do aplicativo. Mesmo que indique uma fotografia, você deve criar seus próprios vetores no Illustrator ou Photoshop. Só então parecerá autêntico e terá um efeito magnético.
Pode soar como um clichê, mas você precisa manter seu design limpo. Já falei sobre misturar mais branco ou preto às cores para chegar no tom de cor perfeito que você deseja. Isso é muito útil para organizar um ícone. Se algumas cores ficarem mais brilhantes ou vice-versa, o nível geral de ruído diminui em várias instâncias.
Os ícones de aplicativos devem se tornar como músicas populares que qualquer pessoa pode reconhecer e os seguintes hacks de design ajudarão você a criar um ótimo ícone de aplicativo. Espero que você tenha achado os pontos valiosos. Se você tem algo a acrescentar ou sugerir, deixe seus comentários abaixo.