Estudo sobre Iconografia para Aplicativos

Rodrigo Chimello
4 min readAug 21, 2015

Nosso objetivo com a padronização para o design de ícones dos aplicativos é uniformizar. Tornar agradável a idéia juntamente com a concepção, padrões de cores e características que podem ser agregadas e destacadas nos produtos CPB.

A melhor maneira para conseguirmos identificar a característica da marca é destacando itens visuais que contenham semelhanças.

Vejamos alguns exemplos abaixo.

Google

Apps Google

Semelhança de cores e padrões de identidade. Pouco uso de sombras nas formas.

Apple

Apps Apple

Podemos observar uso de gradientes e formas sem sombra.

Microsoft

Apps Microsoft

Conceito Metro, utilizado nos sistemas da empresa. Cores chapadas, formas em perspectiva.

Yahoo

Apps Yahoo

Nos ícones do Yahoo existe uma predominância com a cor roxo. As formas podem ou não ser coloridos, simples sem sombra.

CPB

Apps CPB Digital

Diante dos diversos aplicativos que temos instalado em nossos aparelhos, utilizar uma linguagem única poderá trazer uniformidade para a marca, destacando o design característico dos Apps da CPB.

Uma estratégia seria montar o Material Design para os ícones e interfaces. Da mesma forma que trabalhamos um padrão visual para o Livro Digital, esse padrão poderia ser montado para os aplicativos, evitando perder a identidade.

Proposta Sugerida 1

A proposta abaixo foi pensada dentro do padrão de cores para o fundo e formas. Logo original com destaque de cor e fundo gradiente claro.

Padrões de cores e formatos

Por padrão poderá ser trabalhado a forma/logo do ícone como destaque principal ao que se refere o aplicativo.

A cor da forma principal poderá ser a cor de destaque que o aplicativo foi trabalhado. Laranja para CPB Store, Verde para Esperança, e assim por diante.

Ou também a cor da forma poderá traduzir a marca apenas. Azul para Escola Sabatina, Amarelo para Educação Adventista.

Claro que dependendo do caso, as cores poderão ser aplicadas em formatos neutros, como preto ou branco.

No Background do ícone, poderá ser destacado sempre a cor principal que foi trabalhado a forma. Com gradiente do branco para a outra cor, com opacidade de 25%.

Proposta Sugerida 2

Logo mantendo a cor braco, se houver duas cores, manter cor de destaque. Fundo escuro predominante da cor do app ou logo.

A forma do logotipo foi trabalhada para representar o destaque do ícone, sempre predominado a cor branco. O fundo chapado na cor principal do app ou logo e efeito Gradiente em Overlay 75%.

Proposta Sugerida 3

Semelhante a proposta 1 apenas deixando o fundo mais limpo em branco e destaque exclusivo para o logo/forma.

Fundo branco, destaque para logo com cor característica do App.

A viabilidade do estudo pode ser rapidamente analisada com a aplicação de cores em logos e fundo.

Nada impede alguma mudança nas características das cores, pois elas podem se adaptar de acordo com a estratégia trabalhada no app.

Aplicações para iOS e Android

Para as aplicações iOS será trabalhado com destaque também para o fundo, pois por padrão o sistema se utiliza deste formato para correta exibição dos ícones.

No caso do sistema Android os ícones podem ser diferenciados (recomendável) pois conseguimos manter as características do sistema e aparelho. Neste formato os ícones podem ser trabalhados somente com a forma/logo do App. Utilizar somente o ícone com cores na forma.

Material Design CPB Mobile

Todos os arquivos trabalhados devem estar documentados para seguir um padrão de design e características únicas.

Os materiais utilizados aqui estão documentados em formato .psd e .sketch.

Seria também ideal montar esse padrão para a construção dos Apps, pois nada adianta apenas os ícones estarem em ordem e o layout dos aplicativos não correspondem a uma linha de design e pensamento.

--

--

Rodrigo Chimello

A researcher with a background working in the marketing and market research industry. Creating next-level insights.