O Guia Super Simples de Iconografia

Publicados: 2022-03-11

Em média, quanto tempo você leva para criar um ícone personalizado?

Alguns minutos? Dez minutos? Mais tempo? E se lhe mostrássemos como fazer 10 ícones incríveis em menos de 10 minutos?

A iconografia é uma forma de comunicação que agrega à linguagem visual de uma marca, portanto, um conjunto de ícones personalizados é mais significativo e envolvente do que um simples e genérico. A maioria dos designers nunca se preocupa em aprender a criar ícones personalizados, principalmente porque esse é mais um curso para adicionar à nossa fila de aprendizado.

Então resolvi criar um guia super simples para te ajudar a aprender o básico da iconografia em menos de 10 minutos (eu falo sério).

Ser capaz de criar ícones personalizados abrirá um mundo totalmente novo para você começar a criar formas complexas para seus projetos, o que o distinguirá do resto da multidão, dando a você uma vantagem competitiva como designer.

Originalmente, fui inspirado para criar este guia por este GIF de Morgan Allan Knutson mostrando como criar um ícone de serviços de localização em poucos segundos. Achei refrescante, inteligente e rápido. Desmistifica o processo de criação de ícones personalizados e mostra como pode ser simples. Um ícone é na verdade uma forma geométrica que pode resultar de uma combinação ou deformação de formas básicas, como quadrados, triângulos ou círculos. Uma regra prática no design de logotipos ou ícones é manter as coisas simples.

O objetivo deste artigo é criar 10 ícones em 10 segundos cada, usando apenas formas simples.

Nota importante: Estaremos usando o Adobe Illustrator neste post, mas você pode obter os mesmos resultados usando o Sketch ou até o Figma. Sempre que precisarmos adicionar ou remover um ponto em uma forma, usaremos a “Ferramenta Caneta (P)”. Selecionar e mover pontos ao redor será feito com a “Ferramenta de Seleção Direta (A)”.

Ícone de olho

Centralize quatro círculos, indo do maior para o menor com cores alteradas, como mostrado. No círculo maior, para trás, puxe os pontos esquerdo e direito para longe do centro. Por fim, mova o círculo interno menor para a borda do círculo seguinte para criar um efeito de iluminação na íris.

Dica: Em vez de usar um círculo branco, simplesmente subtraia (usando o painel Pathfinder) os dois círculos do círculo abaixo de cada um deles. Ele cria um resultado mais limpo no fundo.

Ícone de seta

É tudo sobre onde você adiciona esses pontos extras nas bordas do quadrado inicial. Dica: Como alternativa, você pode simplesmente desenhar uma linha fina em forma de seta.

Ícone da bateria

Usando um quadrado com um traço e dois com preenchimento. Simplesmente brinque com as proporções, incluindo um quadrado preenchido na forma do traço e mantendo o segundo do lado de fora para formar a ponta da bateria.

Dica: Jogue com a espessura do traço e o preenchimento para manter um bom equilíbrio visual.

Ícone de lista de marcadores

Comece com um quadrado simples; duplique-o uma vez à sua direita; e remodelá-lo como um retângulo longo. Selecione a coisa inteira e duplique duas vezes, mantendo um espaço de tamanho quadrado no meio.

Dica: Substitua o quadrado por círculos para criar uma aparência mais suave.

Ícone de nuvem

Desenhe três círculos de tamanhos diferentes. Alinhe na parte inferior os dois círculos menores para ter uma base e coloque o círculo maior no meio, em uma posição mais alta. Crie a base da nuvem deformando um dos pequenos círculos.

Dica: use diferentes tamanhos de círculo para obter uma nuvem com aparência mais orgânica.

Ícone de reprodução avançada

Desenhe um retângulo comprido. Adicione um ponto ao centro da borda esquerda e remova o ponto superior e inferior. Agora que você tem um triângulo, simplesmente duplique essa forma uma vez para a direita para completar o ícone.

Dica: Para fazer isso ainda mais rápido, basta começar com um triângulo em vez de um quadrado.

Ícone de funil

Comece com um retângulo longo. Adicione um ponto ao centro das bordas esquerda e direita. Agora, estique horizontalmente a borda superior e pronto.

Dica: Coloque dois quadrados de ponta a ponta e simplesmente estique a borda superior horizontalmente.

Ícone Reproduzir/Pausar

Comece com três retângulos longos em paralelo. Remodele o retângulo mais largo em um triângulo.

Dica: Alternativamente, simplesmente desenhe um triângulo, seguido por dois retângulos paralelos.

Ícone de seta de posição

Este é um remix do ícone do serviço de localização do Morgan. Simplesmente desenhe um quadrado e puxe o ponto inferior esquerdo em uma direção diagonal, movendo-se para cima até passar pelo ponto oposto.

Dica: No Illustrator, pressionar a tecla Shift enquanto arrasta o ponto ajuda a manter a simetria enquanto mantém o ângulo diagonal correto.

Ícone de pino de posição

Derrube um círculo dentro de um maior (usando o painel Pathfinder). Arraste o ponto mais baixo para baixo e afie o ângulo formado - mude para a "Ferramenta Caneta (P)" e, enquanto segura a tecla "Shift", clique no ponto.

Dica: Use o canto arredondado nesse ponto de inflexão para suavizar a aparência - ajuste o valor do "raio do canto" no painel de opções "Transformar" enquanto o ponto estiver selecionado.

Ícone de som

Assim como o ícone do funil, mas com uma rotação de 90 graus.

Dica: basta copiar e colar o ícone do funil e girá-lo no sentido horário.

Ícone de onda

Desenhe uma linha reta e adicione pontos a uma distância igual ao longo de seu comprimento. Arraste para baixo os pontos de alteração e arredonde cada canto ao máximo, até que esteja tudo suave.

Dica: Arredonde as pontas da linha para uma aparência ainda mais suave.

Ícone total

Este é o ícone de bônus.

Desenhe um quadrado com um traço grosso o suficiente. Usando a ferramenta tesoura, corte os pontos superior direito e inferior esquerdo. Isso dividirá a forma em duas. Mova a metade inferior para cima e gire tudo 45 graus no sentido anti-horário.

Dica: Preste atenção na espessura das linhas e no espaço em branco formado dentro do logotipo.

Um ícone vale mais que 1.000 palavras.

Muitas vezes ouvimos que uma imagem vale mais que mil palavras. Bem, isso se aplica muito aos ícones, que substituem frases e palavras longas para otimizar o espaço visual, a usabilidade e a estética. Saber como criar um conjunto de ícones simples e eficazes pode ajudar bastante. E acabamos de ver como isso pode ser rápido e fácil observando e utilizando um conjunto básico de formas.

Em resumo, as 10 principais regras da iconografia são:

Torná-lo simbólico e significativo.
Você já ouviu: Mantenha-o simples. O estilo não deve comprometer a legibilidade.
Seja intencional e ponderado. Pense antes de criar.
Certifique-se de que funciona em tamanhos diferentes.
Mantenha a uniformidade em mente.
Somente vetores, por favor!
Use cores apenas quando necessário, e faça-o com cuidado.
Ajuda a conhecer a geometria básica.
Pense em “acessibilidade” para garantir que o ícone projetado ajude no design geral.
A iconografia é uma linguagem que deve ser universal.
Bônus: O alfabeto é apenas um conjunto de 26 ícones.

Jogue junto e veja o que você pode fazer em menos de 10 segundos.

• • •