10 dicas para criar ícones impressionantes

Hoje, vou falar um pouco sobre o design de ícones a partir de uma perspectiva mais geral. Vou compartilhar com vocês dez dicas que eu apresentei depois de fazer algumas pesquisas tanto do meu trabalho quanto do trabalho de outras pessoas.

Então, se você gosta de ícones tanto quanto eu, pego uma xícara de café quente (eu já tenho a minha), já que no artigo a seguir, vamos dar uma olhada em algumas coisas que podem mudar / melhorar o seu processo criativo quando se trata de projetar essas pequenas peças de arte.

Além disso, antes de começarmos, eu queria que você soubesse que todos os pacotes de ícones usados ​​nesta peça, e milhares mais, podem ser encontrados no  Envato Market , onde designers de todo o mundo enviam regularmente novos trabalhos.

Eu sei que alguns de vocês provavelmente irão discordar, mas o fato é que não importa o que você faça na vida, seja você um designer ou um engenheiro mecânico (ou qualquer outra coisa com essa lógica), você deve sempre encontrar tempo e energia para coletar informações sobre o assunto, já que você não apenas deve sua carreira a essas pessoas, mas também descobrirá algumas coisas interessantes e educativas durante o processo.

Agora, você realmente não precisa ficar louco na pesquisa, mas pelo menos deveria tentar encontrar uma resposta para essas três perguntas simples:

  • Quem?
  • Quando?
  • Por quê?

O “Quem” representa os primeiros criativos que criaram a ideia de usar ícones como símbolos digitais. Este aspecto é geralmente ignorado e eu realmente não entendo o porquê, já que sem os “criadores” originais, o design de ícones pode nem ter sido o que é hoje; essas pessoas estabeleceram a base para tudo o que usamos agora. Então, abra uma aba e faça uma homenagem lendo o que você puder encontrar sobre eles. Você provavelmente entenderá porque essas pessoas são tão importantes para o nascimento e a evolução do design de ícones e das interfaces de usuário.

O “quando”, como você provavelmente já adivinhou, significa “aquela janela específica no tempo” quando a necessidade real de ícones como símbolos visuais digitais apareceu. Para aqueles que não sabiam, o design de ícones só apareceu em 1981 com o nascimento da Xerox 8010 Star , que foi basicamente o primeiro computador que tinha uma GUI ou Interface Gráfica com o Usuário, o que significa que a própria forma de arte em si não é velha se comparada a outros. Mas também não é “jovem”, uma vez que evoluiu incrivelmente rápido ao longo dos anos e ainda não atingiu o seu pleno ímpeto.

O “Porquê” é provavelmente o mais importante dos três, pois explicará como tudo aconteceu, mas, para ser honesto, todos eles estão profundamente interligados, porque as três variáveis ​​influenciaram-se mutuamente em alto grau.

Vamos tirar um minuto e considerar como as coisas poderiam ter sido diferentes se as razões por trás do nascimento da GUI fossem diferentes, ou se as pessoas por trás do projeto nunca tivessem nascido. Nós provavelmente ainda estaríamos usando interfaces de linha – bem, provavelmente não, mas ei! as coisas seriam um pouco diferentes, acredite em mim!

Agora, eu não vou te deixar tão fácil, dando-lhe todas as respostas, já que eu realmente não quero estragar a jornada para você. Mas vou deixar um link para um belo site interativo que contém todas as informações reunidas em um único lugar e as apresenta de uma forma muito boa.

No final, este é apenas um exercício destinado a ajudá-lo a entrar em contato com as raízes do design de ícones, que eu recomendo fortemente que você faça, pois entenderá porque algumas coisas são como são hoje. Também comparando o que foi feito até este ponto, você deve ser capaz de ver como os ícones evoluíram em termos de estilo e complexidade, e captar a direção de onde as coisas estão indo, ou quem sabe até mudar essa direção produzindo algo novo e inovador.

Agora, se a primeira dica foi um bom exercício que eu pensei que você poderia fazer para aumentar o seu conhecimento sobre o design de ícones, este é, na minha opinião, uma regra que você deve tentar aderir, já que o ajudará a definir o estilo e linguagem visual dos elementos que você deve projetar dentro de cada novo projeto.

Vindo de um background em ciências sociais, consegui entender e apreciar os benefícios de desenvolver e aplicar uma fase inicial de pesquisa em quase tudo o que faço, mesmo no design de ícones, já que isso me permite entender melhor o “assunto” e como isso pode afetar tanto eu quanto as outras pessoas / usuários finais com os quais ele deve se cruzar.

Agora, no nosso caso, o “assunto” é na verdade um produto digital que é criado para sustentar uma conversa visual com os usuários que, no final, interagem com ele. Essa interação deve ser fácil de estabelecer e, o mais importante, ela deve ser natural, no sentido de que o símbolo precisa falar claramente e desencadear uma emoção / palavra específica nos corações e mentes daqueles que a visualizam, não importa que seja a primeira ou a trigésima vez que eles estão de olho nela.

Então, os grandes ícones têm que ser universais, e eles têm que ir além das barreiras como gênero, raça, idade, etc., e comunicar a mesma mensagem, não importa quem seja o usuário final.

Agora, como acontece com qualquer outro produto, os ícones geralmente são criados com um certo papel em mente. Se eles serão usados ​​em um site ou exibidos em um aplicativo, você deve sempre levar algum tempo para pensar sobre as diferentes variáveis ​​que você deve considerar ao criar cada uma delas, desde o estilo até “sentir”quase certamente o que será afetado por esses fatores.

Isso pode ser facilmente conseguido passando algumas horas e se engajando em um estágio de pesquisa onde você tem que descobrir as respostas para essas três perguntas curtas:

  • Quem?
  • O que?
  • Como?

O “quem” significa “usuário” e descreve todas as variáveis ​​que o definem. Essa questão é essencial, pois, dependendo do público-alvo, você precisa adaptar seus padrões de projeto para que eles satisfaçam algumas condições que podem variar de um projeto para outro.

Em outras palavras, você precisa descobrir quem é seu usuário, construindo uma lista exaustiva de características que, no final, podem afetar sua experiência com os ícones e a própria interface do usuário.

Geralmente essas características são:

  • Idade (usuários mais jovens versus idosos)
  • Gênero (usuários masculinos versus femininos)
  • Raça (diferenças culturais)
  • Educação (usuários instruídos versus usuários sem educação)
  • Habilidades Técnicas (usuários experientes em tecnologia versus usuários que temem a tecnologia)

Vamos dar um exemplo rápido e pensar em como a idade como uma variável sociodemográfica afeta a maneira como as gerações mais jovens interagem com as IUs em comparação com as mais antigas.

Se o usuário final for mais jovem, é provável que seus olhos estejam mais preparados para lidar com ícones menores, mas, para um usuário mais antigo, as coisas podem ser diferentes. Com a idade vem a deterioração da visão, o que representa um problema sério se você criou uma interface super pequena.

Então você tem o problema de usuários mais velhos terem medo de mudar e usar novas tecnologias, já que é mais difícil para eles entenderem e descobrirem como as coisas novas funcionam em comparação com as antigas que eles usaram no passado.

O estilo do ícone real pode ser percebido e aceito de forma diferente por usuários mais velhos, especialmente em casos em que usamos cores brilhantes e saturadas que podem não ser atraentes, já que seus olhos reagem de maneira diferente a esses estímulos comparados aos olhos de pessoas mais jovens .

exemplo de cores brilhantes usadas com os mais escuros

 

Agora, se colocarmos a “educação” como uma terceira variável, então teremos uma divisão ainda maior, já que dentro de ambos os grupos de idade haverá usuários que tenham uma educação básica e usuários que não tiveram a chance de participar de um aprendizado adequado.

Embora eu não pense necessariamente que há uma regra geral quando se trata do nível de educação e da capacidade do usuário de usar uma tecnologia específica, definitivamente existem situações em que os usuários que nunca se depararam com um símbolo específico talvez não consigam entender o significado de um ícone, uma vez que eles nunca tiveram a chance de conceituá-lo dessa forma.

exemplo de ícones que podem ser mais difíceis de entender devido à simbologia por trás deles

 

Além disso, raça é outra coisa sobre a qual ainda temos que pensar, já que alguns símbolos podem ser lidos de maneira diferente por usuários de outras regiões do mundo, dependendo do contexto em que são inseridos.

Uma vez que você começa a encontrar respostas, você verá como o seu “usuário” está tomando forma, pois com cada qualidade que você descobre, você chega mais perto de criar um padrão definitivo que precisa implementar e usar dentro de seu design e, portanto, sua linguagem visual.

Por outro lado, o “quem” também deve ser usado para descobrir quem é a pessoa ou empresa que está iniciando a comunicação, pois conhecendo tanto a fonte quanto o receptor, podemos identificar o ponto ideal perfeito onde os ícones e a interface do usuário se comunicam sem esforço, e eles o fazem de uma maneira que reflete a personalidade da empresa que está por trás disso.

Esta última parte geralmente é feita criando variações personalizadas dos símbolos que já estão sendo usados, a fim de dar a eles um estilo único que as pessoas possam facilmente vincular a uma marca.

O “o que” significa “mensagem”, ou mais precisamente o que eu, como criador visual, tenho para comunicar ao meu público. Pode ser uma palavra simples ou uma emoção. Seja o que for que desejemos transmitir aos nossos usuários, temos que nos certificar de que seja feito de uma maneira que seja simples o suficiente para ser entendida pela pessoa que interage com ele.

Agora, é bastante óbvio que nossa “mensagem” está diretamente ligada ao nosso público, então, dependendo de quais variáveis ​​nós identificamos dentro do usuário final, nós temos que simplificar o suficiente para que eles possam interpretar e entender.

Então, se nosso público é composto principalmente por jovens que têm um nível de educação mais alto, isso nos dá o poder de criar ícones de aparência mais complexa. Se os usuários fossem mais velhos e tivessem um nível de instrução mais baixo, teríamos que adaptar nossa linguagem visual para que nossos ícones fossem simples o suficiente para transmitir a ideia a eles.

O “o quê” também pode significar “missão”, ou mais exatamente o negócio principal de um produto, onde, em alguns casos, os usuários são realmente obrigados a ter uma base de conhecimento básica de símbolos visuais para poder interagir com ela.

exemplo de ícones simples da interface do usuário

 

Claro, você ainda tem que tentar construir uma linguagem que seja facilmente acessível ao seu público principal, mas às vezes você pode ter que forçá-los a aprender coisas novas, pois no final é de seu interesse fazê-lo.

Um exemplo perfeito disso é o uso de novos softwares criativos / técnicos, como o Adobe Illustrator, AutoCad ou qualquer outro em que, embora os ícones tenham sido criados com simplicidade e facilidade de uso, o usuário ainda precisa ampliar seu conhecimento visual básico familiarizando-se com as funções e botões específicos disponíveis como ícones.

exemplo de ícones usados ​​no Illustrator que o usuário precisa conhecer
Exemplo de ícones do Illustrator

O “como” significa várias coisas, de “como o meu usuário vai interagir com a minha interface do usuário?” para as diferentes maneiras que eu posso adaptar a linguagem visual para facilitar uma interação mais fácil. Assim, o “como” nos mostrará o caminho que precisamos seguir quando encontrarmos as respostas para as duas perguntas anteriores. É o nosso guia que nos permite construir e aperfeiçoar a nossa linguagem visual, permitindo-nos manter uma ligação clara com o nosso público-alvo, os nossos usuários finais, que neste momento devem estar mais claros do que nunca.

O “como” também nos permite definir o estilo e a direção de nossos ícones, já que agora devemos saber se devemos usar ícones menores em comparação aos maiores, ou mais complexos em relação aos básicos.

Depois de encontrar as respostas para essas três perguntas, você poderá seguir em frente e começar a trabalhar nos próprios ícones, já que você deve ter uma base sólida para começar.

O tema geralmente é o próximo passo lógico que é necessário tomar ao criar ícones, e é algo profundamente relacionado ao contexto em que eles serão usados. Você pode pensar no “tema” como sendo uma história que é contada por seus elementos de composição, os ícones.

Como em qualquer história, os fatos precisam estar em sincronia, já que você não pode nomear sua história “O Velho e o Mar” e então começar a falar sobre espaçonaves e foguetes – isso seria bastante confuso. Assim, o seu “tema” será refletido pelos ícones cuidadosamente elaborados, que terão que se basear na ideia / conceito por trás dele.

exemplo de pacote de ícones temáticos de natal

 

Dependendo de para quem você está criando os ícones, seja para você ou para um cliente / empresa, você descobrirá que os caminhos para escolher o tema certo são bem diferentes porque o contexto pode lhe dar mais ou menos liberdade do que você deseja.

Normalmente, se você está criando um pacote de ícones apenas para você, para usar como parte de seu portfólio ou para vender online, você tem total liberdade criativa quando se trata de encontrar um tema, pois ninguém mais está envolvido na criação e no compartilhamento do pacote de produtos. O problema é que às vezes isso pode se tornar um desafio difícil, já que é difícil descobrir exatamente o que você quer fazer o tempo todo.

O que costumo fazer quando me vejo em apuros é pegar um pedaço de papel e depois escrever cinco palavras-chave diferentes que gostaria de transformar em ícones. Depois de fazer minha seleção, começo a pensar sobre os diferentes objetos que eu poderia incluir no meu pacote e os escrevo também, certificando-me de reunir pelo menos 20 elementos para que eu tenha um bom começo. Então eu tomo um tempo e reviso minha lista, pois isso geralmente resulta em adicionar mais elementos que eu poderia ter esquecido. Quando chego a um número com o qual me sinto à vontade, passo para o próximo passo.

Agora, ao criar um tema para um cliente, a decisão geralmente é feita em colaboração com uma, ou às vezes, várias pessoas que tentarão apresentar sua visão e esperar que você crie algo que preencha essa visão. Na maioria das vezes você achará isso útil, já que os clientes sempre saberão mais sobre seu produto / serviço do que você, o que significa que eles podem realmente ser um ótimo recurso que você pode usar para realizar seu trabalho.

Outras vezes, o cliente estará totalmente despreparado e desejará que você crie algo semelhante ao que o designer “X” ou “Y” fez para outra pessoa. Se você estiver nessa situação, sempre lembre ao seu cliente que ser original é mais importante do que ter uma identidade visual semelhante à de outra pessoa. É nesses momentos que você tem que assumir o controle e guiar o cliente para um ponto em comum, onde não se sente deixado de fora do processo de tomada de decisão, e mostrá-lo por que sua visão pode funcionar melhor.

Depois de ter um tema, a próxima coisa que você deve começar a pensar é o estilo que você deseja usar para criar seus ícones. Agora, se o “tema” é a sua história, então o “estilo” é como você conta essa história, e é realmente importante, pois dá a você a oportunidade de se destacar de todo o resto, fazendo algo único.

Hoje temos dois estilos grandes, não tão completamente diferentes: ícones planos e de linha.

O primeiro é “plano”, o que é provavelmente a coisa mais fácil de chamá-lo, já que não tem todo o brilho e esmalte que o esqueumorfismo tinha para ele, mas segue um princípio mais simples, em que o símbolo é mais brincalhão, representação da sua contraparte ou função da vida real.

Se fosse para caracterizar brevemente o estilo, eu diria que é fácil de entender, já que você não tem que desenvolver e dominar nenhuma habilidade de gradiente maluca, e é divertido trabalhar com isso já que você pode jogar com muitas formas e cores e obter algo realmente interessante no final.

Exemplo de ícones de estilo simples
Ícones planos universais

O segundo estilo é “linha”, e é uma combinação de plano com um sabor do trabalho de linha antigo, onde você isola as diferentes seções da composição adicionando linhas ou contornos mais finos ou mais grossos. Comparado ao estilo anterior, os ícones de linha podem ser construídos usando formas de preenchimento e contornos.

exemplo de ícones de linha com formas de preenchimento

 

Ou você pode fazer isso usando apenas linhas.

Exemplo de ícones de linha nua

 

Outra coisa que é diferente com esse estilo é que obriga você a trabalhar muito mais com a  Pen Tool (P) em  comparação com ícones planos onde você confiaria em formas básicas, como retângulos e círculos, que você ajustaria usando o  painel Pathfinder  em combinação com algumas outras ferramentas de ajuste.

Agora, quer sejam “ícones de linha” ou “ícones simples”, não importa realmente, desde que você crie algo que carregue sua assinatura pessoal, o que, se for bom o suficiente, permitirá que as pessoas saibam quem é o autor.

Eu acho que o estilo é uma soma de três aspectos diferentes:

  • Cor
  • Forma
  • Expressão

A cor é uma daquelas coisas que ajuda a definir um estilo pessoal, mas não é tão fácil de dominar, já que há uma teoria inteira por trás dela, que você deve dominar, já que isso o ajudará bastante. Você pode pensar em cor como o “tom” que você define para sua história. Quanto mais brilhantes e mais quentes as cores, mais feliz e mais quente a história se torna.

exemplo de ícones coloridos quentes

 

Mude o calor de suas cores e então o “tom” mudará de algo amigável para algo um pouco mais distante.

Exemplo de ícones coloridos frios

 

É claro que esta é apenas uma pequena interpretação, já que há todos os tipos de significados atribuídos às cores, o que não explicarei , já que há um  artigo publicado que explica tudo o que você precisa conhecer em profundidade.

Agora, se a cor define o “tom” da história, a forma define as habilidades do “contador de histórias”, pois há designers que podem criar peças de arte altamente detalhadas, enquanto outras obtêm o mesmo efeito usando formas simples que são expressivas.

Além disso, a forma também ajuda a estabelecer o “clima” da história, ou mais exatamente como seus usuários percebem os ícones. Você pode ir para uma sensação mais lúdica que pode ser alcançada usando cantos arredondados suaves e formas ou para algo mais formal, usando cantos retos e linhas.

Você também pode escolher entre formas e linhas que tenham uma sensação mais orgânica que pareça mais natural e que pareçam mais artificiais. No final, tudo depende de você e das necessidades do projeto.

exemplo de ícones construídos usando formas simples

A expressão pode ser vista como a “emoção” que seus ícones acionam dentro da mente da pessoa que os visualiza. Como você provavelmente adivinhou, isso é feito principalmente combinando esquemas de cores inteligentes com o tipo certo de formas. Sem expressão, seu estilo inevitavelmente sofrerá, já que você não terá aquela “coisa” única capaz de envolver a mente do observador.

Agora, o problema com o estilo é que é um pouco difícil de encontrar, já que geralmente as mentes criativas são conectadas de maneira diferente, o que significa que um designer em particular pode desenvolver seu estilo mais rápido enquanto outras precisam trabalhar um pouco mais para descobrir o seu estilo.

Normalmente, essa é a maior questão que as pessoas fazem em design de ícones, mas a verdade é que não existe uma fórmula universal para se obter um estilo alucinante. É tudo subjetivo para todos e cada um de nós, e isso depende apenas do tempo e energia que colocamos no processo de nos tornarmos melhores naquilo que fazemos. O estilo não vai te achar até que você prove que é digno disso, mas acredite, quando isso acontecer, você estará sorrindo por dias.

Além disso, não há nada de errado em experimentar estilos diferentes, já que essa é uma boa maneira de descobrir em que você é bom e o que você pode fazer para melhorar. Não acredita em mim? Bem, basta escolher alguns dos seus designers de ícones favoritos e voltar a seus primeiros dias e tentar ver como seu estilo se desenvolveu e mudou ao longo do tempo.

Hoje, a tendência com o design de ícones é principalmente focada em “trabalho de linha”, onde a composição é feita de cores de preenchimento e linhas grossas que delimitam as diferentes seções que formam o ícone real. A razão por trás de sua popularidade é principalmente devido à simplicidade com a qual você pode expressar uma ideia / emoção usando apenas um par de formas e cores, em comparação com os velhos tempos do esqueumorfismo, onde os ícones foram criados para se assemelharem a suas contrapartes no mundo real, como tecnicamente possível.

exemplo do meu estilo pessoal

 

A coisa com estilo é que está sempre mudando, já que designers sempre encontram novas maneiras de melhorar o que foi feito até certo ponto, o que no final leva a uma transição para algo novo, algo “novo” que é poderoso o suficiente para fazer todo mundo mais aderir a ele. Além disso, como na moda, as tendências de ícones sempre encontram uma maneira de se reavivar, de modo que sempre há uma chance de vermos uma tendência de morte voltar à vida em um ponto distante no tempo.

Tamanho – ou mais exatamente “tamanhos” – é provavelmente o aspecto mais importante que você precisa decidir, não importa o projeto em que está trabalhando, pois seus ícones provavelmente serão usados ​​em uma variedade de telas de diferentes tamanhos e densidade de pixels . Isso significa que eles precisam seguir certos tamanhos predefinidos estabelecidos pela interface ou pelo próprio sistema operacional.

Esse é geralmente o caso dos sistemas operacionais móveis, onde as empresas responsáveis ​​por sua criação e desenvolvimento tornam essas especificações públicas e pedem aos desenvolvedores que as sigam para manter as coisas consistentes.

Portanto, seja o Android do Google  ou o iOS da Apple , você pode encontrar facilmente os tamanhos / tamanhos corretos que precisa criar ao criar um conjunto de ícones para um aplicativo para dispositivos móveis.

Outras vezes você estará trabalhando em um site ou em um software que lhe dará mais liberdade, mas isso significa que você precisa dedicar um tempo e pesquisar qual tamanho funciona melhor dependendo das diferentes variáveis ​​que você precisa considerar.

Agora, você não precisa saber cada variação de tamanho para cada dispositivo e sistema operacional de memória, mas precisa saber que, dependendo das necessidades do projeto, terá que se adaptar e usar valores predefinidos em vez de criar seus próprios.

Por outro lado, se você está criando um pacote de ícones para vender em um mercado online, também tem as mesmas regras, pois geralmente esses pacotes vêm com variações de tamanho predefinidas, que começam de 16 x 16 px até 256 x 256 px.

exemplo de variação de tamanho

 

Sabendo exatamente quais tamanhos você tem que criar, será muito mais fácil gerenciar qualquer projeto, já que você não terá que interromper o processo criativo e perder tempo fazendo pesquisas que você deveria ter feito antes de começar a criar qualquer coisa.

Como regra geral, não importa onde o seu ícone será usado, comece sempre pelo menor tamanho e use-o como uma grade básica para construir todos os maiores, pois ao lidar com objetos perfeitos em pixels é mais fácil escalá-los do que reduzi-los, o que geralmente resulta em quebra de design.

Você pode ler mais sobre o processo de escalar corretamente seus ícones neste pequeno tutorial que escrevi recentemente.

Como regra geral, se você estiver criando um pacote de ícones, então, mais de um ícone para um projeto, o produto tem que ser consistente até o fim, caso contrário, o “estilo” acabará sendo inexistente, já que seus ícones não terão harmonia visual.

Dito isto, a próxima coisa que você deve começar a aprender e aplicar em todo o seu fluxo de trabalho grids de referência. Por definição, uma grade é uma “estrutura composta de uma série de linhas de guia retas (verticais, horizontais e angulares) ou curvas usadas para estruturar o conteúdo. A grade serve como uma armadura na qual um projetista pode organizar elementos gráficos de maneira racional e fácil de absorver ”(Wikipedia).

No design de ícones, os grids de referência geralmente são uma necessidade, pois permitem que você crie pacotes de ícones coesos, o que é uma necessidade, já que você não pode vender um produto que tenha um estilo desequilibrado em seus ativos.

Sejamos honestos: se o seu ícone não é capaz de contar sua história simplesmente dando uma olhada nele, então você provavelmente fez algo errado, já que o símbolo por trás dele tem que superar a necessidade de usar qualquer palavra.

Pense como seria estranho se você tivesse um ícone de relógio com a palavra “clock” escrita sob ele. Quero dizer, deveria ser óbvio que o que você criou é um relógio sem ter que expressá-lo com palavras.

Além disso, pense em como seria difícil criar um ícone super pequeno (24 x 24 px) e colocar uma palavra com um peso de fonte de 6 px ao lado dela e esperar que o usuário possa lê-lo.

Sim, claro que há algumas situações em que você poderia usar uma letra ou número, por exemplo, um ícone de documento de texto ou um calendário, mas geralmente são casos raros, onde esses símbolos podem realmente adicionar ao estilo e significado do ícone .

exemplo de ícones que usam texto para adicionar à mensagem
Ícones que usam texto para adicionar ao seu valor

 

Como regra geral, você deve sempre evitar o uso de texto e, em vez disso, encontrar uma maneira de criar um ícone que tenha uma voz clara e expresse o que significa desde o início, sem a necessidade de qualquer ajuda externa.

Quando se trata de fotos, há situações em que as imagens ainda estão sendo usadas, mas eu tenho que ser honesto, eu nunca pensei em usar fotos como parte de um ícone. Quero dizer, é simplesmente estranho, uma vez que toda a razão para usar ícones em primeiro lugar é traduzir uma função ou parte da realidade em uma interface do usuário.

Para aqueles que leram alguns dos meus outros tutoriais, você deve saber que sou um fanático quando se trata de criar um trabalho artístico perfeito, já que acredito muito em um “trabalho bem feito”.

ícone criado usando uma base perfeita de pixel

 

Não importa o que você esteja fazendo, seja design de ícones ou relógios mecânicos, há uma linha clara entre aqueles que criam com a qualidade em mente e aqueles que criam apenas pelo puro motivo de fazer um dinheirinho rápido. Acredite em mim, você sempre desejará fazer parte do primeiro grupo, caso contrário, você não durará muito.

Este é o caso do design de ícones, onde, para ser bom, você terá que aprender a criar para o meio digital, certificando-se de que cada pequena forma e linha seja perfeitamente encaixada na grade de pixels para que o ícone seja tão nítido e crocante quanto possível.

Eu vi milhares de ícones mal construídos que parecem todos mole quando exibidos em dispositivos de dpi maiores, e eu sempre me perguntei por que eles não faziam as coisas da maneira certa. No final, foi isso que me motivou a pesquisar o máximo que pude sobre o assunto e criar um tutorial instrutivo “como fazer” que explica o processo de criação de um trabalho artístico perfeito para pixels.

Existe também um bom curso de vídeo que criei há alguns meses, que o levará através do processo passo a passo de criar um conjunto de ícones de pixel perfeitos.

exemplo de ícones criados usando um fluxo de trabalho perfeito de pixels

Este se enquadra no princípio “menos é mais”, já que toda a ideia de design de ícones é criar um símbolo visual que fala por si mesmo, sendo o mais simples possível em termos de sua construção geral.

A razão por trás disso é que geralmente os ícones vêm em pacotes de pequeno porte, o que significa que você, como designer e criador visual, precisa encontrar a quantidade ideal de detalhes que permite manter seu pacote informativo e perder tanto “peso visual” desnecessário quanto for possível. Ao fazer isso, você permitirá que os usuários fiquem mais confiantes em sua capacidade de entender e usar tanto o ícone quanto as diferentes funções integradas nele, criando assim uma interação mais eficiente.

exemplo de ícones construídos usando a simplicidade como princípio

 

Alguns podem argumentar que, ao despir o ícone para o seu “essencial”, você acaba perdendo muito do seu apelo visual, mas deixe-me discordar fortemente desde que vi alguns ícones espetaculares que são lindos em sua simplicidade.

Lembre-se, no final, sua missão como designer de ícones é criar algo funcional que seja fácil de usar e tenha um bom apelo a ele.

Nunca pare apenas com a primeira versão de um design. Sempre se force a criar tantas alterações quanto possível até encontrar aquela dourada parece ser a melhor. Ao fazer isso, você sempre se esforça para crescer e desenvolver habilidades mais rapidamente e, o mais importante, fazer um trabalho melhor, que é algo que todos e cada um de nós devem procurar.

Não importa se isso acontece em um pedaço de papel comum ou em um Artboard de 800 x 600 px. O que importa é que você explore o máximo possível de direções antes de decidir a versão definitiva, porque suas primeiras ideias nem sempre são as melhores.

Se você quiser aumentar suas habilidades e imaginação ao máximo, limite-se a seis ou oito alterações e faça o melhor para cada uma delas. Então, quando terminar, reserve um tempo para analisar e ver qual delas é a melhor e por quê.

Se você conseguir levar isso e transformá-lo em uma rotina diária, eu garanto que você será capaz de lidar com novos projetos mais rapidamente, desde que você saiba desde o início qual estilo funciona melhor, e você se tornará melhor em criar ícones cujo final refletirá seu nível de habilidade.

Agora, todas essas dicas são coisas simples que todos e cada um de vocês poderiam ter, mas o que os torna especiais (pelo menos para mim) é que eles vieram da minha própria experiência, com altos e baixos, para que você possa melhorar a maneira como você lida com a criação de ícones.

Eu realmente espero que você os tenha achado úteis, e se você tiver alguma outra dica que queira compartilhar com o resto de nós, deixe-a na área de comentários, já que tenho certeza de que tanto eu quanto todo mundo a lerão. Será um prazer.

Além disso, antes de ir, deixo você com um link para todos os pacotes de ícones que usei como referências, caso queira conferi-los.

(Este artigo é uma adaptação do original via blog do Envato Tuts +: 10 Top Tips for Creating Awesome Icons)

Compartilhe este artigo:

Guia de Estudos para Aprender Design por Conta Própria

Baixe o nosso guia e receba dicas e as novidades do Clube do Design no seu email:

Deixe uma resposta

Mais artigos pra você ler:
Criatividade – Como pensar fora da caixa?

Criatividade – Como pensar fora da caixa?

A criatividade com certeza é a matéria prima de todo bom projeto de design, é ela que estamos buscando constantemente…
Novidades para 2019 do Clube do Design

Novidades para 2019 do Clube do Design

O Clube do Design trás novidades que reforçam o nosso interesse em te ajudar a descobrir a sua profissão criativa.…
Como calcular tamanho de impressão, resolução de imagem e resolução de saída

Como calcular tamanho de impressão, resolução de imagem e resolução de saída

Quantos pixels deve ter uma imagem que vai ser impressa com 10cm a 300dpi de resolução? Tenho uma imagem de…
Como calcular tamanho de impressão, resolução de imagem e resolução de saída?

Como calcular tamanho de impressão, resolução de imagem e resolução de saída?

Quantos pixels deve ter uma imagem que vai ser impressa com 10cm a 300dpi de resolução? Tenho uma imagem de…
Fechar Menu