8 passos simples para melhorar o design do ícone
Ícones estão por toda parte. Desde ícones de aplicativos nas telas iniciais até representações gráficas que levam os usuários através de um design, o design de ícones é um grande negócio.
Há uma boa arte para um bom design de ícones. O elemento não só precisa renderizar reconhecidamente no menor dos tamanhos, mas também bons ícones baseados em vetor podem ser dimensionados para usar em proporções superdimensionadas. Alguns designers estão até usando imagens em estilo de ícone para visuais dominantes.
Então, onde você começa? Aqui está um guia para projetar um ícone melhor em oito etapas (um pouco) simples.
1) Comece com uma grade
Um bom design de ícones começa com uma base sólida. Uma grade simples de bloco quadrado é tudo que você precisa para começar a esboçar um ícone.
Use o mesmo papel quadriculado com o qual você trabalhou na escola para criar esboços de ícones com lápis e papel ou comece com uma grade de pixels quadrados no software de design. Você provavelmente deve projetar em uma tela quadrada, como a maioria dos ícones acabam precisando se encaixar em espaços quadrados. (Isso inclui tudo, desde ícones de aplicativos a ícones em designs de sites ou perfis de mídia social.)
Depois de ter uma grade, certifique-se de dar a si mesmo um elemento de espaço em branco ao redor do perímetro. Isso lhe dará flexibilidade suficiente para adicionar um plano de fundo, se necessário, e evitar que o ícone seja cortado em aplicativos que possam ter bordas arredondadas ou outros tipos de chanframento.
Só porque sua grade é quadrada não significa que seu ícone tem que ser. Pode ser redondo ou mais retangular. Lembre-se: ao projetar algo que não seja quadrado, ele deve se alinhar horizontalmente e verticalmente na grade para facilitar o uso posterior. Ele também ajudará você a manter uma escala consistente para um conjunto de ícones.
A grade é apenas para ajudá-lo a criar uma estrutura onde você possa projetar consistentemente. Como bônus, você também pode usar a grade para ajudar a desenhar elementos do ícone; use linhas de grade para desenhar ângulos retos ou determinar o posicionamento dos traços dentro do desenho.
2) Construa com geometria
Os ícones costumam ser pequenos, então é importante criar elementos que os usuários reconheçam rapidamente. É por isso que tantos ícones estão enraizados em formas geométricas.
Círculos, quadrados e triângulos são as combinações mais populares de formas. Os usuários não precisam pensar neles ou questionar o que são. Cada forma é simples e identificável. Em seguida, eles podem ser mesclados e conectados para criar outros elementos com o mesmo estilo geométrico.
Veja o ícone do Dropbox, por exemplo. Não são mais do que alguns quadrados unidos para formar uma caixa. O conceito é criativo, simples e fácil de ler em qualquer tamanho.
Outra opção popular “geométrica” é usar uma única letra de bloco como parte da iconografia. Embora isso não funcione bem para aplicativos amplamente difundidos, ele pode servir como um identificador de marca funcional. O Facebook é um exemplo primário desse uso de ícones em ação.
3) Crie uma forma única
Embora começar com círculos e quadrados seja útil, você deseja criar uma forma que seja sua. Isso é mais importante se você estiver trabalhando com um ícone de identificação de marca. Mesmo ícones aparentemente complicados geralmente começam com formas simples que são transformadas em algo mais exclusivo.
Quando se trata de exclusividade, existem alguns elementos de design para se pensar.
- Fique longe de imagens. Eles não vão ficar bem pequenos.
- Fique longe do texto. Os usuários não poderão lê-lo.
- Algumas tendências valem a pena. Os estilos de ícones planos e quase planos fazem maravilhas.
- Trabalhe com linhas retas e ângulos conectados por pontos na grade. Curvas podem ficar estranhas rapidamente.
- Os melhores ícones funcionam em cores, mas também são reconhecidos como contornos em preto e branco.
4) Dê bastante espaço
Ícones precisam de muito espaço para respirar. Pense em como os ícones são usados. Particularmente, se você está projetando um ícone de aplicativo que os usuários verão em cima de papéis de parede mal-intencionados em seus dispositivos, o design precisa ser definido dentro do quadro um pouco para torná-lo mais legível e distinguível.
Dentro da sua grade, crie uma borda consistente ao redor da borda. Pense neste espaço quase como você faria quando se trabalha com um sangramento no design de impressão. A cor precisa se estender para essa parte da tela, mas provavelmente não será vista.
5) Stick para cores da marca
Não fique louco com paletas de cores de ícones só porque você pode. Se você está criando algo para o trabalho da marca, atenha-se à sua paleta de cores. Embora você possa divergir do logotipo da marca normal para um ícone, a cor deve permanecer consistente.
Se você estiver trabalhando em um conjunto de ícones para um pacote de design da Web ou outro uso, comece com ícones pretos ou brancos primeiro. Em seguida, adicione cor ao aproximar-se da conclusão do design. Ao trabalhar com elementos simples com alto contraste - preto sobre branco ou branco sobre preto - você realmente tem uma ideia de como cada ícone fica no espaço. Se ele funciona independentemente da cor, as chances são maiores de que ele funcionará bem com a cor adicionada também.
6. Use divisões consistentes
Preste atenção a todos os detalhes no design do ícone. Você cortou um canto angulado no design? Então considere fazê-lo em todos os cantos.
Embora esses pequenos detalhes possam não parecer importantes - eles podem nem ser completamente visíveis nos tamanhos menores - eles podem adicionar um toque clássico aos ícones usados em telas mais gráficas.
Mais designers estão usando ícones como botões em todo o design e para ajudar a levar os olhos entre mais elementos pesados de texto. Ícones cuidadosamente criados podem ajudar a encantar o usuário e incentivar conversões de websites.
7. Design para o menor tamanho
Embora os ícones possam ser usados em quase todos os tamanhos, você deseja criar o design para que ele funcione no menor dos tamanhos. Comumente ícones favicon são enviados em apenas 16 por 16 pixels. Seu ícone é decifrável nesse tamanho?
Se a resposta for não, você tem duas opções:
- Comece de novo com o design do ícone.
- Crie um ícone alternativo para espaços minúsculos, como favicons.
8) não decorar
Finalmente, mantenha-o simples. Resista ao desejo de decorar o design do seu ícone. Alguns dos melhores aplicativos ainda sofrem de ícones desajeitados. (Wunderlist imediatamente vem à mente. Basta pensar em como seria mais bonito sem as sombras e delineando.)
A decoração acaba parecendo estranha nesses espaços pequenos. Também pode sobrecarregar o design. Pense em ícones como marcas de acento de design, eles não são o foco principal. Se um usuário demorar em um ícone por muito tempo, porque está tentando descobrir o significado disso, ele pode perder a noção do que deve fazer. Os ícones devem sinalizar interações rápidas.
Conclusão
O design do ícone pode ser muito divertido se você tiver tempo para aprimorar essa habilidade. Mas se você não é um especialista, não se preocupe. Há uma abundância de grandes lojas por aí que lançam conjuntos de ícones para você usar em seus projetos.
Se você está apenas começando com o design de ícones, vale a pena baixar um desses conjuntos. Jogue os ícones em uma grade e separe-os. Você pode aprender muito sobre como criar melhor suas próprias formas simples a partir deste exercício.