10 truques de design para criar ótimos ícones de aplicativos

Os ícones de aplicativos são a primeira coisa que seus usuários percebem quando se deparam com seu aplicativo. Com bilhões de aplicativos disputando a atenção na loja de aplicativos, um ícone de aplicativo se tornou um diferencial importante que quebra a desordem e traz os 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.

Neste post, vou sugerir alguns truques de design que podem ajudá-lo a criar ícones de aplicativos legais que podem se destacar na loja de aplicativos e possivelmente destacar seu aplicativo entre outros concorrentes por instalações.

Antes de falar sobre os pontos, você deve entender que o propósito fundamental de um ícone de aplicativo é desenvolver uma conexão imediata e criar pistas cognitivas. Tudo sugerido neste post fundamentalmente volta para alcançar isso.

Aqui estão alguns dos truques de design para criar ótimos ícones de aplicativos

A regra dos 70%

Há um consenso entre os designers sobre o uso de 70% do espaço do ícone para destacar o objeto principal conectado ao aplicativo. Um objeto pode ser qualquer coisa relacionada ao aplicativo. Se você estiver projetando 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 maioria (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. Uma vez que eles chegam na página do aplicativo que tem uma descrição, fica muito mais fácil para você adquirir o usuário.

No entanto, apenas permitir um espaço maior para o 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 deixe de ser sensato para sem sentido. Reduza até que o objeto mantenha sua forma universal e seja 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. Feito isso, você pode ser minimalista no design, jogando inteiramente com as cores para criar efeitos 3D para a forma “fechadura e chave” usada no ícone.

Opaco sobre brilhante e brilhante sobre maçante

A próxima coisa que destaca um ícone de aplicativo é o uso apropriado de contraste. Os designers geralmente empregam contraste entre o objeto e o plano de fundo do ícone do aplicativo. Se você puder executar as duas etapas mencionadas acima, poderá pousar automaticamente aqui.

Criar contraste também tem muito a ver com cores. Comece com uma paleta de cores predeterminada em sua mente e vá avançando. Basta lembrar que a ideia é criar vibração e contraste entre a cor de fundo e os elementos do objeto. Se você é iniciante nisso, pode consultar alguns designs no Dribbble e baixar 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 aos seus olhos. Após o iOS 7, muita ênfase em cores frescas com tons mais fortes de branco nelas.

Não se deixe enganar pelo seu grande Mac

Uma vez instalado em um dispositivo, o ícone do seu aplicativo é exibido em várias resoluções. Para que pareça significativo mesmo em seu menor avatar, é preciso projetá-lo mantendo as proporções em mente. Muitas vezes, os designers trabalham em grandes telas de Mac nas quais até os menores detalhes também podem ser descobertos. No entanto, quando o mesmo ícone é testado em um smartphone com tamanhos variados de ícones, 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 sutis, 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 fazer o trabalho. Abrace a simplicidade e concentre-se em um único objeto. De preferência, uma forma ou elemento único que mantenha seus contornos e detalhes apesar da escala. Dessa forma, seu ícone ficaria adequado em todas as resoluções sugeridas nas diretrizes fornecidas pela Apple e pelo Android.

Experimente seu ícone em uma infinidade de papéis de parede

Os usuários têm gostos e preferências variados 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 começar.

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 UIs, a idade do peso mudou muito para a abstração, mas não se pode simplesmente acabar com uma representação real de um objeto. Objetos reais ou ícones skeumó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 skeumó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ê definitivamente pode sair com um ícone plano. No entanto, se o aplicativo estiver conectado a algo obscuro, mantê-lo real ou skeumórfico será melhor.

Outra ótima maneira de chegar a um bom design de ícone é fazer várias iterações com skeuomórficos e planos. Você pode manter o segundo ponto em mente ao fazer isso. Faça várias iterações retirando 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 criando um. Em meio a isso, 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, então Faces de personagens do próprio jogo pode fazer um ótimo trabalho. Na verdade, essa é a razão pela qual os rostos dos personagens são tão comuns em ícones para aplicativos de jogos.

Se você está fazendo um jogo, você 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 um forte recall para o jogo. E, pelo mesmo motivo, também pode se tornar o ícone do aplicativo do seu aplicativo de jogo.

Você pode decidir uma paleta de cores e construir o ícone do seu aplicativo em torno delas. Francamente falando, torna-se muito mais fácil se você for para um rosto. Mas, ao mesmo tempo, você pode precisar 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 desenhar o ícone também. Você também pode fazer o mesmo com determinados 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 do seu aplicativo entre os usuários.

A criatividade salva o dia

Faça uma pesquisa por "aplicativos a fazer" no Google Play e você encontrará uma grade cheia de marcas de seleção. Sim, a maioria dos designers de aplicativos de tarefas só conseguiu marcar 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 a fazer". Observe que o ícone do Evernote se destaca entre outros.

A ideia do ícone é derivada do fato de que um Elefante nunca esquece. Ele é acoplado a uma brilhante execução 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 cognição forte.

Outro exemplo de ótimo design de ícones pode ser atribuído ao Pocket. Para começar, a ideia do app é única. Embora o bookmarking exista há muito tempo, ele não conseguia fazer com que os usuários voltassem para ler o conteúdo que salvaram.

O Pocket, por outro lado, usava miniaturas para criar uma memória visual clara. O aplicativo desencadeia uma emoção de “salvar este conteúdo” e é representado de forma clara e inteligente pelo próprio ícone. A forma vermelha refere-se a um “Bolso”, enquanto a seta para baixo representa “baixar” 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 se você indicar 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 parecer um clichê, mas você precisa manter seu design limpo. Já mencionei sobre misturar mais branco ou preto às cores para chegar no tom de cor perfeito que você deseja. Isso é realmente ú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 um pode reconhecer e os seguintes truques 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.