Mundo Tech

Como criar ícones para Apps do Android e iOS

Publicidade



Um ícone para Android e iOS é um elemento gráfico usado para representar um app em uma tela de um celular ou tablet. Quase todos os objetos na interface de um telefone celular ou tablet são identificados por meio de ícones: eles simplificam o reconhecimento e a pesquisa visual. Uma rápida olhada neste elemento gráfico costuma ser suficiente para tomar uma decisão sobre o download de um aplicativo. Idealmente, o ícone deve explicar o propósito do programa sem que haja necessidade de se ler a descrição do aplicativo.

 

Como criar ícones para apps: dicas

Um ícone para um app faz parte da cobertura de elementos gráficos necessários nas plataformas móveis. Portanto, ele deve estar em harmonia com a interface e os ícones vizinhos, mas mantendo sempre a sua singularidade. A primeira regra é: leia as instruções para desenvolvedores do Android e iOS:

  1. O site oficial  para designers de produtos do Android fornece uma lista de preferências de estilo, componentes, animações e outros elementos visuais. Existem materiais de apoio.
  2. A Apple tem instruções sobre como criar elementos visuais para os aplicativos do iPhone e iPad.

Existem recomendações gerais.

Simplicidade e Clareza

Seja amigo do minimalismo: quanto menos detalhes e “decoração” na imagem, maiores são as chances de reconhecimento. O ícone ideal é aquele que simboliza a essência e a finalidade do software. Você não precisa pensar muito para encontrar inspirações: basta olhar para os símbolos de apps de todas as redes sociais populares.

Escalabilidade

Os ícones não podem ser redimensionados ou esticados. Contudo, eles devem ser legíveis nas características de tamanho, que são determinadas pelos desenvolvedores dos sistemas operacionais móveis. Normalmente, o ícone é exibido na tela principal, bem como, em um submenu em uma versão um pouco menor. A exibição muda em diferentes dispositivos: dependerá da resolução e de outras características da tela. Seja qual for o caso, os usuários devem precisar forçar a sua visão para entender o significado da imagem. Portanto, a imagem finalizada precisa ser testada em diferentes tipos de telas.

Reconhecimento

Simplicidade (veja a primeira regra) e estilo reconhecível fazem com que os usuários possam focar na ideia sem a necessidade de elementos adicionais. O número de apps no Play Market é maior que 2 milhões. A App Store tem aproximadamente o mesmo número. Imagine 2 milhões de ícones lutando pela atenção do usuário. Opções para tornar seu ícone exclusivo:

  •  use um elemento reconhecível da sua marca (por exemplo, a primeira letra do nome com uma fonte de marca registrada);
  • demonstre o recurso funcional do programa (por exemplo, desenhar uma nuvem de mensagens para um app de chat);
  • use um símbolo que o seu público-alvo reconheça assim que bater o olho;
  • não copie os concorrentes. Se um determinado nicho de mercado estiver cheio de ícones coloridos, dê ao seu uma aparência monocromática;
  • analise o resultado e experimente novas ideias. É impossível prever exatamente qual opção de design vai “estourar”.

Coerência

O ícone é um dos elementos visuais da marca. Portanto, ele deve ser coerente com o estilo geral da marca. O ícone perfeito:

  • é feito no estilo e nas cores da marca;
  • descreve visualmente o aplicativo, indica sua finalidade;
  • corresponde ao esquema de cores e elementos de design do aplicativo;
  • é claramente visível contra fundos claros, escuros e coloridos (dada a variedade de papéis de parede personalizados).

Singularidade

Existem muitos requisitos para ícones. Os tamanhos, regras de arredondamento, grau de transparência e outras sutilezas devem estar dentro das normas. Porém, você pode implementar qualquer ideia na sua “tela de pintura”, desde que seja feito de acordo com os requisitos para desenvolvedores. Experimente: escolha planos de fundo, mude de perspectiva, experimente formas diferentes e nunca repita ou copie as ideias dos concorrentes.

Texto

Levando em consideração o tamanho, você não conseguirá escrever muito dentro de um ícone. Letras pequenas são complicadas de ler. É melhor que o design do ícone seja universal. Se as inscrições forem em inglês, elas serão legíveis na maioria dos países, o alfabeto cirílico ou os hieróglifos causarão problemas para os estrangeiros. O ideal é não usar letras ou usar apenas 1 ou 2 que representam a marca.

A Unidade do Design e a Funcionalidade

O ícone ideal é aquele que faz com que o usuário nem precise ler o nome ou descrição do app. Um exemplo de visual bem feito é a imagem de câmera do aplicativo “Câmera”.

Ícones para os apps do iOS

Fonte – https://www.sketchappsources.com

Requisitos de tamanho

Cada ícone feito para iPhone e iPad deve possuir uma variante pequena e outra grande. O ícone menor será usado na tela principal (também nos ajustes e pesquisa do Spotlight). Já o grande será usado na App Store.

 

Características iPhone6s Plus & iPhone 6Plus iPhone6s, iPhone6, & iPhone5 iPhone4s iPad & iPad mini iPad2 & iPad mini iPad Pro
Um ícone para um app 180×180 120×120 120×120 152×152 76×76 167×167
Para a App Store 1024×1024 1024×1024 1024×1024 1024×1024 1024×1024 1024×1024
Para a busca Spotlight 180×180 For iPhone 6s & iPhone 6 use 120×120

For iPhone 5 use 80×80

80×80 120×120 60×60 120×120
Menu de ajustes 87×87 58×58 58×58 58×58 29×29 58×58
Painel de ferramentas ou barra de navegação 66×66 44×44 44×44 44х44 22×22 44х44
Guia 75×75 (max: 144×96) 50×50 (max: 96×64) 50×50 (max: 96×64) 50×50 (max: 96×64) 25×25 (max: 48×32) 50×50 (max: 96×64)

Regras de design

  1. O mais simples possível: pequenos detalhes não são distinguíveis em pequenos logotipos.
  2. Não usar transparência, fundo minimalista. Não deve suprimir elementos próximos.
  3. Não violar direitos autorais. Por exemplo, é impossível usar símbolos corporativos da Apple.
  4. Na interface, o ícone não precisa necessariamente ser duplicado. Basta usar o mesmo esquema de cores.
  5. Teste a imagem em diferentes tipos de fundos.
  6. Envie uma imagem com as bordas retas, pois o sistema arredonda os cantos automaticamente.
  7. Não há necessidade de marcar a borda da imagem. O próprio sistema adiciona recuo de pixel.

 

Ícones para apps Android: padrões de designer

Fonte – https://icon-library.net/

Como fazer um ícone para um app Android de acordo com as regras da empresa? Você precisa considerar o tamanho dos gadgets e a resolução de suas telas. Os elementos gráficos nos apps são medidos em pontos por polegada – DPI. Existem várias categorias de DPI:

  • baixa ou LDPI – 120;
  • média ou MDPI – 160;
  • alta ou HDPI – 240;
  • extra-alta ou XHDPI – 320;
  • extra-extra-alta ou XXHDPI – 480.

No Android você precisará desenvolver ícones específicos para este sistema, pois os padrões do iOS não se aplicam a eles. Regra: o ícone deve estar no formato PNGs, de 32 bits, e ter fundo transparente.

O tamanho no banco de dados é 48 dp + 1 dp por borda. Quanto maior for a densidade de pixels, melhor serão os detalhes. Você pode fazer vários ícones com opções de tamanhos diferentes usando a seguinte tabela:

  Tamanho básico MDPI HDPI 1,5x XHDPI 2x XXHDPI 3x
Ícone 48px 72px 96px 144px

Ícones para apps no Google Play

Requisitos de tamanho: 512х512, alta resolução. A imagem é necessária apenas para a loja do Google, e deve repetir a aparência da imagem usada para abrir.

Seção “Recomendado”

Esta seção demonstra os recursos gráficos do programa. Os tamanhos dos ícones são 1024×500 pixels, formato PNG, 24 bits, com fundo transparente.

Algumas recomendações

  • não coloque nada nas partes que serão cortadas, especialmente no terço inferior da imagem;
  • a melhor opção é colocar o logo ou imagem principal no centro;
  • o texto deve ser curto e com tamanho grande;
  • tente sempre usar uma forma única;
  • não use uma versão recortada de uma imagem maior;
  •  a imagem deve “pesar” como outros ícones.

 

Melhores Serviços de Logo para Aplicativos

Se você não tem um designer que possa desenvolver um elemento visual de acordo com as regras de cada sistema operacional, faça uso de serviços especializados.

Logaster

É um maravilhoso serviço para desenvolvedores de programas que não desejam se aprofundar nos meandros dos requisitos de criação de ícones e dos programas gráficos. O processo de criação de um logo para um app é extremamente fácil:

  • basta indicar o nome do programa;
  • escolher o tema e o esquema de cores;https://www.logaster.com.br/logo/
  • selecionar uma opção entre uma vasta gama de designs exclusivos prontos para uso;
  • depois basta pagar a taxa para baixar seu design preferido;
  • receba imagens prontas com especificações e tamanhos adequados para download.

IconsFlow

É um serviço onde você pode criar ou alterar um logo o deixando pronto para ser utilizado em seu app. Existem dois editores: o primeiro é o principal com uma paleta e uma lista de efeitos e estilos. A segunda possui ferramentas para alteração. É necessário certo nível de habilidades gráficas.

Fontawesome

Um conjunto de ícones e fontes no qual você pode criar seus próprios logotipos vetoriais para aplicativos móveis. É necessário baixar o programa e ter certo nível de habilidade em editores gráficos.

 

Conclusão

Apesar da criação de logos para app ser um pouco limitada devido a padronização a ser seguida, também é algo que exige bastante criatividade para se destacar. Por um lado, você precisa cumprir todos os requisitos exigidos pelos sistemas operacionais dos dispositivos móveis (caso contrário, o app não será liberado pela moderação). Por outro lado, é necessário implementar a sua ideia e criar uma imagem única que se destaque. Para alcançar o sucesso:

  •     utilize os serviços de designers profissionais ou serviços especializados online;
  •     se você já tem elementos visuais de marca, seja coerente à eles, para que o ícone siga os padrões do seu estilo corporativo;
  •     trabalhe com ideias de visualização onde a simplicidade é combinado com o alto reconhecimento e visibilidade;
  •     experimente variações e analise a resposta dos usuários.
  •     atualize regularmente o logo do seu app para corresponder ao design geral do sistema operacional móvel, às tendências gerais e corporativas.

 

BIO – Ihor é um comerciante da Logaster.com.br, um criador de identidade de marca online que tem ajudado milhões de pequenas empresas com branding. Ihor se interessa por SEO, Design, SERM e está sempre pronto para uma nova festa com os amigos.