Encontrar ícones não é problema. Milhares de designers desenham ícones diariamente e centenas de sites os oferecem, muitas vezes de graça. A variedade é enorme. Com essa variedade, entretanto, vem o problema.
Um aplicativo típico precisa de 10 a 20 ícones. Alguns ícones são usados em todo lugar, como em “configurações” e “editar”, enquanto outros são únicos para cada projeto.
Se você começar a entrar em sites de ícones e baixar os que mais gosta, sua interface rapidamente se tornará uma refeição exótica. Não do tipo gostosa e surpreendentemente prazerosa. E sim do tipo “eu nunca mais vou comer isso nesse país de novo”.
Você pode amar cada um desses ícones separadamente, mas juntos eles simplesmente não “encaixam”.
Então como se combina ícones de diferentes designers e pacotes de ícones para que pareçam consistentes e agradáveis em nosso site, aplicativo ou qualquer UI que use esses ícones?
Cor
A primeira e mais proeminente coisa que você vê nos ícones são suas cores. E a maneira mais fácil de combinar ícones de diferentes sets é colocá-los em uma única cor.
Pensando assim é mais fácil usar uma única cor, mas ícones feitos em uma paleta de cores consistentes também funcionam muito bem:
Se você realmente gosta dos ícones que encontrou, mas eles estão todos em diferentes cores, é possível editá-los você mesmo.
Tenha em mente, que as licenças mais criativas e comuns permitem pequenas edições como alteração de cor e tamanho. Alguns serviços (como o Icons8) têm até como recolorir internamente. Uma mão na roda!
Estilo
A batalha entre Flat Design e Skeumorfismo durará uma eternidade.
Por enquanto, o Flat Design está ganhando. Mas eu não faço ideia quanto tempo isso durará, assim como não faço ideia que roupa as pessoas estarão usando daqui 5 ou 10 anos.
Tudo que sei é que você tem que escolher um lado. Você pode escolher o Design Liso (Flat) ou o completo (Skeumórfico).
Veja esse set, por exemplo. A paleta de cores é consistente. Mas…
Combinar ícones lisos e skeumórficos leva a muitas coisas: interface bagunçada, tons errados e, algumas vezes, total negligência dos botões como “botões”.
Claro, Seja no estilo Flat ou Skeumórfico, existem muitos “sub-estilos”. Por exemplo, no estilo liso mais famoso está Guia da Apple para Humanos para iOS e Material de Design da Google. Eles são bem documentados, até mesmo especificando a largura da linha do ícone:
Combinar ícones que foram feitos especificamente para determinado sistema operacional é a maneira mais óbvia de ter um UI ser consistente. Esses guias são bem populares e muitos designers seguem eles em seu trabalho.
Portanto, ser consistente com a cor e estilo é primordial, ainda que eles seja detalhes sutis, embora importantes. Um designer experiente apontará os defeitos instantaneamente. E o usuário sentirá o clássico “eu não posso falar exatamente o que é, mas algo não está certo pra mim.”
Perspectiva
Dê uma olhada nestes 5 ícones. Todos foram feitos em skeuomorfismo e eu ajustei um pouco da cor, para que pareçam mais consistentes. E ainda sim, eles parecem 5 ícones de diferentes aplicativos. (e são, atualmente).
Todos os cinco objetos de ícones podem ser incorporados em uma só imagem:
Mas,entre eles, utilizados em um lugares diferentes, não terão consistência alguma. E no mundo dos ícones, consistência é tudo.
Ícones devem parecer como fossem parte de um painel, ou interface. Não esqueça que os ícones foram primeiramente usados em interfaces “offline”, e nossa percepção deles no mundo “digital” é fortemente afetada por este fato.
Sombras
Outro sinal de consistência é a luz. Ou a sombra, tanto faz. Dê uma olhada nesses dois ícones:
Parece que o sol está brilhando apenas para um dos ícones. A direção da luz é um elemento importante para que os ícones possam estar encaixados juntos. Ou o sol é igual para todos, ou não tem sol pra ninguém. *Pausa Dramática…*
Nota: Embora sombras são usadas frequentemente no estilo Skeumórfico, algumas vezes elas são incorporadas no Flat Design também. Mas o principio permanece – mesma sombra para todos ícones do grupo.
Peso Visual
Peso visual é quão grande, denso, e pesado o ícone é percebido. A teoria é explicada em peso aqui. Resumidamente, ícones devem ter aproximadamente o mesmo tamanho.
Veja esses dois ícones:
Agora, treine seus olhos para ver apenas duas formas bem cruas:
Vê a grande diferença entre o tamanho dessas duas formas? Isto é um grande NÃO! Este exemplo é bem extremo, então vamos dar uma olhada na comparação entre outros dois objetos de sets similares:
Em termos de tamanho visual, o set de cima está claramente fora de balanço. E tudo que você precisou fazer para perceber isso foi olhar atentamente.
Detalhes
O diabo mora nos detalhes, eles dizem. Bem, “detalhes” são um tópico complexo, então tente ser bem específico.
Elementos Repetitivos
Algumas vezes designers incorporam alguns elementos ou traços em seus projetos, assim o set parecerá único.
Dê uma olhada no elemento pixelado no canto direito de todos ícones. Algum ícone subsequente deve tê-lo também. Outro exemplo de elemento repetitivo seriam os ícones de usuários:
Aqui está – Qualquer elemento de estilo “repetível” deve ser, obviamente, repetido.
Muitos Detalhes
Outro caso: consistência pode também ser perturbada pelo diferente número de detalhes nos ícones.
Simplesmente decida se todos os ícones serão simples ou complexos. Combinações misturadas agem com um pouco de imprevisibilidade. OS usuários podem não saber o que é um botão ou o que é uma imagem. Isso resulta em uma má experiência (UX).
Pensamentos Finais
Como eu apontei repetidamente, a única coisa que você tem que lutar para combinar ícones de diversos pacotes é a consistência. Consistência. Consistência. Consistência.
Designers experientes decidem quando os ícones encaixam bem juntos e nem sempre intuitivamente. A lista de possíveis atributos (sombras, estilos, linhas) pode não ter fim.
Portanto, nesse artigo eu tentei apontar os mais importantes, e geralmente ignorados, então todos nós nos tornamos melhores “encaixadores” de interface.
Espero que tenha gostado do artigo. Se tiver alguma coisa a adicionar fique à vontade para dar seu feedback nos comentários.
