Design de ícones em 2020: as principais tendências
Os ícones podem ser um dos exemplos mais importantes - e subestimados - de design em seu portfólio. Aqui está uma olhada no design de ícones com alguns exemplos inspiradores.
Os elementos dos ícones são mostrados em quase todos os lugares, mas às vezes são produzidos como uma reflexão tardia. Esse não deveria ser o caso. O excelente design de ícones pode ser distinto e adicionar requinte e elegância a um projeto.
Vamos dar uma olhada nas novidades e novidades do design de ícones em 2020!
Explore o Envato Elements
1. Linha de ícones com formas coloridas
Os ícones de linha são sempre uma escolha popular, graças a um estilo versátil que fica bem com quase qualquer outro elemento de design. A tendência adiciona um pouco mais de interesse visual com um toque de cor, geralmente na forma de um círculo ou quadrado, atrás do ícone da linha.
A forma da cor pode preencher uma parte do design do ícone da linha, mas na maioria das vezes está apenas flutuando no fundo. Esse minúsculo interesse visual pode unir um ícone, enfatizar a cor de uma marca ou apenas atualizar um site antigo de ícones de linha.
A parte complicada do design do ícone é o posicionamento e o tamanho do elemento de forma da cor. Se sua cor é muito grande ou muito brilhante, ela pode tirar o ícone. Se a forma for muito pequena, você corre o risco de parecer um erro.
Embora não haja tamanho perfeito, a maioria dos ícones que usam essa tendência mantém a forma da cor em cerca de um quarto do tamanho total do ícone.
2. Formas abstratas de ícones
Não sabe ao certo qual ícone representa seu conteúdo? Uma forma abstrata de ícone pode ser a resposta.
Mais designers estão criando ícones de estilo abstrato para uso em sites. O bom desse estilo - e das tendências em geral - é que os estilos abstratos criam uma sensação de capricho e admiração que correspondem a algumas das maiores tendências gerais do design.
A chave para trabalhar com formas abstratas é garantir que você não esteja replicando algo por engano e que os ícones sejam realmente abstratos. (Não tente criar ícones semelhantes ao seu logotipo, por exemplo, eles podem parecer apenas erros.) Para algo que realmente corresponda, use a mesma paleta de cores para ícones e materiais de marca.
3. Cores Primárias
As paletas de cores primárias são uma escolha arrojada, brilhante e envolvente para pequenos elementos de design.
Essa tendência de design de ícone usa vermelho, azul, verde e amarelo (junto com roxo e laranja) para criar um conjunto básico de regras de cores. O que faz esse estilo funcionar é um foco na cor para chamar a atenção para pequenos elementos na tela. As cores primárias também se destacam de todos os brilhos "materiais" que dominaram as paletas nos últimos tempos.
Suavize o design com gradientes (ou gradientes de ombre-falso, como o exemplo acima) para evitar que a paleta de cores pareça muito elementar. Não exagere ao trabalhar com cores primárias. Eles podem ser um toque esmagador. Considere uma paleta primária silenciosa ou esquema monocromático.
4. Ícones com ícones de fundo
Alguns ícones populares têm ícones próprios. A sério!
Para usos mais elaborados de ícones - não estamos usando pequenos ícones aqui - os ícones podem ser empilhados e em camadas para criar mais um elemento de arte.
Essa tendência geralmente usa cor e sombreamento para diferenciar entre o ícone focal principal e os ícones de fundo. O ícone principal geralmente é em cores ou em um ícone preenchido. Os ícones de plano de fundo são quase sempre estilo de linha e podem ter paletas de cores claras.
Você pode criar esse efeito com muitos kits de ícones pré-fabricados misturando e combinando ícones de maneiras diferentes. Crie profundidade e interesse visual com ícones de um tema semelhante e atenha-se a apenas alguns elementos para evitar que a cena fique muito ocupada. Não tenha medo de usar e reutilizar elementos e use os mesmos ícones (linha alternada e preenchida) em planos de fundo e em primeiro plano.
5. Ícones de duas cores
Outra tendência de design de ícone que se baseia nos estilos populares de ícone de linha é criar elementos de duas cores.
Os ícones de duas cores podem criar sua paleta de cores ou cores de marca existentes ou combinar quase qualquer outro par de cores. Ao projetar usando a tendência de ícone, procure pares de cores que se destacam do plano de fundo em que você planeja usá-los.
No que diz respeito ao design, escolha uma cor primária para a maior parte do ícone. Use uma cor secundária para acentuar um elemento do ícone. (Pense em usar a cor primária para 70% a 80% do design e a cor secundária para o restante.)
Isso cria um destaque no design do ícone que ajudará a chamar a atenção para o elemento do design e, esperamos, também para o conteúdo circundante.
6. Ícone "Taquigrafia"
Se você navegar por qualquer loja de aplicativos, verá muitas marcas comuns - envelopes para aplicativos de correio, verificações para aplicativos de produtividade, bloqueios para aplicativos de segurança.
Este atalho de ícone fornece uma mensagem visual rápida que informa aos usuários o que o aplicativo faz. Esse mesmo atalho se aplica quase universalmente a todo o design de ícones. Enquanto os designers experimentam ícones em seu próprio estilo, há uma tendência a usá-los para um significado específico.
E isso é uma coisa boa. Um ícone deve ser fácil de ver e entender rapidamente. Um ícone deve ajudar os usuários a saber o que devem fazer e como devem interagir com o design. Essa abreviação de ícone comum é uma boa evolução de como fazer exatamente isso.
7. cor brilhante
As opções de cores brilhantes têm sido um grande negócio em todos os aspectos do design. Isso não é diferente com os ícones. Uma cor brilhante é uma maneira atraente de chamar a atenção para o ícone.
As cores estão sendo usadas de várias maneiras diferentes quando se trata da tendência de design de ícones:
- Como pano de fundo com um ícone de estilo de linha branco ou preto
- Para elementos de ícones em cores com uma aparência mais realista
- Para elementos de ícone com um design mais plano, gradiente ou super brilhante
As escolhas populares de cores da família brilhante incluem amarelos, azuis, verdes e roxos. Essas cores tendem a ser positivas e a criação de uma paleta de cores com três a cinco matizes para um conjunto de ícones é popular.
Não sabe por onde começar? A Paleta de materiais apresenta cores que são uma grande parte da tendência de design do ícone de cor.
8. Ícones nos logotipos
Anote quantos logotipos apresentam ícones. Depois de começar a pensar sobre isso, não será difícil ver todos os pequenos ícones no design de logotipo.
O legal de um ícone em um logotipo é que ele funciona com o nome da marca e, com algum tempo e valor da marca, pode permanecer sozinho. Pense no exemplo acima, Spotify. Embora o provedor de música não exista há tanto tempo (no escopo das marcas), o círculo com três linhas é altamente identificável.
O ícone funciona em cores e sem - uma chave de um ícone forte - e pode ficar sozinho ou com letras. Essa versatilidade facilita ver por que os ícones são um elemento popular no design de logotipo.
9. Círculos
Os círculos são uma das formas mais harmoniosas. E quando se trata de design de ícones, eles são bastante populares. De ícones contidos dentro de uma esfera a círculos dentro de objetos, a criação de uma marca de design usando círculos pode estabelecer a sensação certa para os usuários.
(Quer saber mais sobre círculos no design? Temos isso aqui.)
Parte da influência do círculo no design de ícones pode se conectar a algumas das diretrizes estabelecidas pelo Google com o Material Design. Todos esses botões circulares são perfeitos para tocar em telefones celulares. E essa mesma filosofia se aplica ao design de ícones. (Pense na frequência com que um ícone é um elemento tocável ou clicável.)
A parte que pode ser um pequeno truque sobre essa tendência de ícone é agrupar círculos em todos os lugares onde outras formas são usadas. Os ícones de aplicativos tendem a ser quadrados; perfis de mídia social são circulares (e quadrados).
Ao criar um ícone redondo, verifique se o conteúdo do design do ícone é fácil de entender em tamanhos pequenos, pois é necessário reduzi-lo com frequência para caber em outros lugares.
10. Design de ícone de estilo de linha
Os ícones de estilo de linha parecem ser a tendência que nunca envelhece.
Parte do motivo é que esse estilo de ícone pode funcionar praticamente em qualquer lugar em qualquer tipo de plano de fundo. Muitos dos populares pacotes de ícones para download geralmente incluem um design de estilo de linha devido a essa versatilidade.
É fácil ver isso no exemplo acima. Cada ícone é fácil de ver e entender em praticamente qualquer tamanho.
11. Elementos e representações simples
Como na maioria das outras tendências de design em 2020, a simplicidade também faz parte do design de ícones. Formas e geografia simples se combinam para criar representações quase simplistas para ícones.
O resultado é um design bastante artístico que faz os usuários parecerem.
No exemplo usando ícones de comida acima, cada ícone usa o segmento comum de um círculo no ícone. Essa pode ser a forma geral do próprio ícone ou uma parte do design do ícone. Essa forma conecta cada ícone um ao outro no projeto.
12. Ícones com gradientes
A tendência de cores gradientes que se tornou um dos temas dominantes de 2019 também é um fator no design de ícones. De gradientes simples em traçados de linha (como o exemplo acima) a cores de degradê completo a ícones brancos em um fundo de degradê, esse esquema de cores é popular.
Talvez seja o mais atraente sobre o uso de gradientes em ícones (e no geral) - existem muitas maneiras diferentes de usar a tendência. Você pode adicionar um gradiente e ainda não ter um projeto parecido com outra coisa.
13. Concentre-se em cores simples
Os designers de ícones estão adotando a abordagem oposta com a cor e adotando paletas de cores simples, mais limitadas e mais básicas para esses pequenos elementos de design.
Usar uma paleta limitada é uma ótima idéia. Com um design tão pequeno, muita cor ou detalhes podem sobrecarregar o espaço rapidamente e causar fadiga nos olhos.
Você não quer que os usuários pensem sobre o que é o ícone ou que cor significa. Limitar a quantidade de detalhes - incluindo cores elaboradas - pode tornar cada ícone um pouco mais fácil de ver e entender. Isso é mais importante com os ícones que serão usados nos tamanhos menores.
14. Tudo em estilo de aplicativo
Uma das razões pelas quais os ícones cresceram tanto em popularidade é que já os estamos projetando para quase tudo. De ícones de aplicativos a ícones de estilo de aplicativo para ícones favoritos ou ícones da área de trabalho, esse estilo está praticamente em todo lugar.
Os ícones no estilo de aplicativo têm um estilo distinto quase próprio. Isso inclui:
- Forma quadrada
- Bordas arredondadas
- Fundo colorido (geralmente uma cor)
- Forma simples dentro do ícone
- Muito contraste entre o ícone e a cor do plano de fundo
- Nenhum texto ou letras
15. Cursos grossos e uniformes
Os ícones de estilo de linha não são apenas populares, mas os ícones com traços grossos são especialmente populares.
Projetados frequentemente para aplicativos de uma única cor, esses ícones são frequentemente usados em branco ou preto sobre fundos coloridos ou fotográficos.
Ícones com traços grossos e uniformes são usados com mais frequência por conta própria, como um ícone de carrinho ou ícone de contato. Eles não são frequentemente usados em uma coleção de ícones.
16. Ícones planos continuam populares
Embora grande parte do foco no design plano tenha evaporado, o design de ícones ainda é bastante plano (ou pelo menos quase plano).
Provavelmente, isso se deve à natureza super simples do design plano e à idéia de que esse visual pode se integrar a vários outros estilos com bastante facilidade.
Mesmo observando alguns dos exemplos e tendências de design de ícones apresentados aqui, você verá que muitos deles são planos. (Os ícones de estilo de linha quase sempre são planos, por exemplo.)
17. ícones de emoji
Os emojis quase se tornaram sua própria linguagem - uma forma mais visual de comunicação que é cada vez mais aceita no mundo todo.
O design de ícones também está assumindo um toque emoji. Esses ícones são identificáveis devido ao foco no formato da cabeça de uma pessoa ou criatura. (Os ícones emoji inspirados em Star Wars acima são um ótimo exemplo de como se divertir com o design dos ícones.)
Esse estilo do ícone pode funcionar muito bem para uma página de contato ou para representar pessoas ou personas em um design.
Como criar um ícone melhor
Criar um bom ícone ou conjunto de ícones é mais do que apenas entrar em algumas das últimas tendências em design de ícones. Devido ao tamanho pequeno dos ícones, a atenção aos detalhes e a precisão são uma parte importante do processo de design.
As regras simples ainda são válidas para o design de ícones em 2019. Emparelhe estas diretrizes com algumas das ideias de tendências acima para criar algo que você vai adorar:
- Comece com uma grade
- Construir com geometria
- Crie uma forma única
- Dê bastante espaço aos ícones
- Atenha-se às cores da sua marca
- Use divots consistentes
- Projete para o menor tamanho necessário
- Não decore
Diretrizes de design de ícone
Uma boa maneira de acompanhar o que está dentro é observando os padrões gráficos e os guias de estilo. Cada vez que a Apple ou o Google muda sua abordagem, o mesmo ocorre com todos os outros. Parcialmente porque eles precisam e parcialmente porque o novo estilo geralmente reflete os tempos e as tendências no design de ícones.
Você pode encontrar diretrizes aqui:
- Ícones de aplicativos da Apple
- Ícones de aplicativos para Android
- Ícones de produtos de design de material
- Ícones do sistema de design de material
Conclusão
Os ícones são uma ferramenta de design útil. Do uso como ícones de aplicativos às marcas ou ícones do site, aos divots que podem ser usados em um logotipo ou em um projeto de design, o ícone é uma marca que veio para ficar.
Aborde o design de ícones da mesma maneira que faria com quase qualquer outro projeto, mas pense realmente na simplicidade e no tamanho. Os ícones são criados para serem visualizados rapidamente e geralmente são pequenos. Isso pode ter um grande impacto no design.
