Curso Web Design | Design de ícones para web: como criar seus próprios ícones

---

Design de ícones para web: como criar seus próprios ícones Posted: 26 Sep 2013 05:51 AM PDT Se você gosta de desenhar ícones, há algumas regras e princípios que valem a pena estudar. Para criar ícones que tenham um alto nível de efetividade, você deve preocupar-se com questões como o público-alvo, o tamanho, a simplicidade, a iluminação, a perspectiva e o estilo. Este artigo vai lhe proporcionar um bom ponto de partida para que possa criar seus próprios ícones e encaixa-los perfeitamente dentro dos seus projetos.  E é uma continuação de outro artigo, Design de ícones para web: uma introdução, postado aqui mesmo no Blog do Web Design há algumas semanas e que foi muito bem aceito por vocês, leitores. Familiaridade: o ponto central Variações e similaridade entre formas: reconhecimento imediato do conjunto através de sua familiaridade. Este é um dos principais pontos sobre o design de ícones: eles devem parecer pertencer a uma mesma família para contribuir com a sensação de familiaridade. É um dos muitos elementos gráficos que precisam trabalhar juntos e em harmonia com o todo, seja para aplicações desktop ou para sites da web. Eles podem e devem ser apreciados por suas soluções estéticas individualmente, mas não funcionam sozinhos: certifique-se de que cada um deles seja diferente dos outros ícones ao redor, mas que demonstre fazer parte do conjunto. Afinal, se você precisa desenhar vários ícones, precisa pensar em todo o conjunto antes de prosseguir com a atividade. A falta de um plano para o conjunto com certeza irá gerar transtornos como falta de similaridade, entre outros problemas, e irá produzir um enorme desperdício de tempo, fazendo com que o redesign seja inevitável! Considere o seu público Esse gesto que para nós é um clássico sinal de aprovação é um claro exemplo do quanto as barreiras linguísticas podem nos confundir. Na Tailândia, o sinal é sinônimo de desaprovação. É um gesto típico das crianças tailandesas, equivalente ao de mostrar a língua. Resta saber como o Facebook se virou por lá… Ao criar ícones, considerações culturais são importantes. Símbolos podem ser usados de diferentes maneiras e ter diferentes interpretações para elementos comuns. É sempre necessário ter em conta as condições em que o ícone vai ser usado. Um aspecto importante aqui são as características culturais. Tradições, ambientes e gestos podem diferir radicalmente de país para país. Já pensou criar um ícone para uma determinada área do seu site que se visto por alguém de outro país, pode ter um significado ofensivo? Ou ainda, simplesmente não parecer ter qualquer tipo de significado para o usuário, por não fazer parte de sua cultura diária? Pense nisso! Projete o ícone no tamanho em que será utilizado Se você vai desenhar o seu ícone no Illustrator, no Corel Draw ou no Fireworks, com certeza sentirá a tentação de tentar usá-lo para criar versões em outros tamanhos. O grande problema é que isso não funciona com o desenho de ícones! O que fica bem em 512 pixels irá parecer uma mancha desfocada em 16 pixels (e eu já tinha mencionando isso no post de introdução ao assunto). Ícones devem ter um desenho-base que será utilizado como ponto de partida, mas o tamanho de cada saída deve ter o seu próprio design otimizado. Não compre o mito de que o design de ícones é um meio puramente baseado em vetor. Há ferramentas de vetor e máscaras no Photoshop que você pode tirar vantagem na hora de produzir seus ícones. Se você tem uma boa experiência em Illustrator e Photoshop, você pode criar uma interação interessante entre os dois programas e utilizar as vantagens de cada um deles. A abordagem adotada para ícones pequenos e grandes é imensamente diferente. Para ajudar a ilustrar o problema, considere a imagem a seguir como exemplo. À esquerda, há um grande ícone que precisa ser reduzido. À direita estão duas possibilidades, dependendo se dos contornos, por exemplo. O ícone do meio não é claramente uma versão precisa do ícone grande, porque os traços mantiveram o seu tamanho grande, enquanto o resto das proporções do ícone foi reduzido. O ícone do lado direito é mais fiel ao original, em um tamanho menor, por isso seria uma escolha melhor. O ícone maior (á esquerda) e o ícone central tem a mesma espessura de contorno. O ícone à direita foi adaptado para melhorar a visualização No segundo exemplo, o ícone foi reduzido proporcionalmente em escala, sem nenhuma alteração considerando-se sua estética, e por isso sua espessura diminui junto com o tamanho. Com este exemplo os detalhes ficam menores e isso pode causar uma série de problemas na visualização. Problemas na hora de reduzir ícones; tamanhos menores pedem outras versões do desenho original. Mantenha simples Com os sistemas operacionais tendo agora ícones em escala para tamanhos grandes (512px por 512px é gigantesco para um ícone), a tentação de criar ilustrações mais detalhadas cresce. Embora um nível de realismo possa adicionar interesse em um desenho de ícone, não deve substituir a sua capacidade para funcionar de forma simples e eficaz. Detalhes demasiados pequenos em um desenho pouco familiar: prejudicial ao reconhecimento do usuário. Outra versão para os ícones acima: simplicidade resulta em maior clareza e precisão. Tente não complicar seus desenhos. Desconfie se sentir vontade de colocar muitos itens ou ilustrar excessivamente seu ícone. Há momentos em que o interesse estético até possa se sobrepor ao impacto icônico. É sempre algo a se analisar, pois as necessidades variam de acordo com cada projeto. Em minha opinião, você pode adicionar alguns detalhes a mais no desenho, mas jamais pode perder a simplicidade e o reconhecimento imediato de sua representação! Iluminação, reflexos e sombras na mesma medida É importante que o realismo que você queira adicionar a seus projetos sigam coordenadas visuais de uma forma coerente. Se você usar uma fonte de luz vindo de uma única direção, use os mesmos padrões para todos os outros ícones. Ou você corre o risco de perder  aquela sensação de familiaridade entre os desenhos, como escrevi logo no início do post. Considere também a direção e a profundidade da sombra no desenho seus ícones. Se a sombra dos ícones estiver em desacordo com os outros ícones do site ou do aplicativo que você está usando, o projeto vai aparecer amador. No Guia de Experiência do Usuário do Windows, (não disponível em português, mas nada que o tradutor do Google não resolva, certo?) há uma seção com orientações de iluminação e de sombreamento bem interessantes. O guia mostra regras muito específicas para o conjunto de ícones do Windows Vista e 7 fornecendo regras para os projetistas de ícones e garantindo um sistema de ícone unificado. Segue-se um trecho como exemplo: “Use sombras para levantar objetos visualmente do fundo, e para tornar objetos 3D aparentemente pousados no chão, ao invés de flutuando no espaço". Os ícones da Microsoft para o Windows 7: similaridade de estilos, cores e perspectiva. Há muitas mais regras interessantes neste guia. Embora a Microsoft tenha modificado completamente o design de seus ícones desde que implantou o design "Metro" no Windows 8, o documento segue interessante para estudantes de design e profissionais em geral. Utilize uma perspectiva padrão Diferenças no desenho de ícones para o desktop e para barras de ferramentas: perspectiva aplicada à finalidade do projeto é fundamental. A perspectiva dentro do seu projeto de conjunto de ícones deve ser a mesma para todos. Se você utilizar um ângulo específico para um desenho, então certifique-se de que todos utilizem essa mesma perspectiva. Isso ajudará a manter a consistência em seus projetos. Você até pode utilizar várias perspectivas, mas deve aplica-las utilizando um padrão. Uma boa dica nesse caso é imaginar a posição do desenho em outras posições a partir do ângulo de uma câmera imaginária. Outro detalhe interessante é observar que um ícone de aplicativo geralmente possui uma liberdade no planejamento de sua perspectiva com relação a um ícone de uma barra de ferramentas, por exemplo, (como se vê na imagem acima, por exemplo). Crie estilos consistentes Estilos aplicados a uma mesma família: reforço na percepção de unidade do conjunto. Iluminação e Perspectiva certamente contribuem para o estilo de um ícone, mas existem muitos outros fatores que podem contribuir além desses. Se você está criando o seu ícone para um site com estilo retrô, você provavelmente vai adicionar uma textura padrão para o estilo de desenho do ícone. Conjuntos de ícones têm características únicas que os fazem se destacar. Você pode projetá-los com uma perspectiva dinâmica, mais realista, ou manter um design mais limpo e simples, utilizando alto contraste e cores vibrantes. Ou destacar o conjunto através do uso consistente de contornos. Conclusão A criação de ícones não fica limitada somente a essas regras. Isso seria limitar muito um assunto que ainda tem muitos pontos a serem discutidos, mas são alguns bons pontos para levar em consideração. Além do que foi mostrado aqui, é necessário que você crie, desenvolva e experimente a utilização de seus próprios trabalhos. Somente trabalhando de forma prática e colocando seus conhecimentos em ação é que poderá sentir os desafios de desenvolver seus trabalhos. Não deixe de praticar e prosseguir tentando! Deixe seus comentários no espaço abaixo, curta e compartilhe esse post com seus amigos e ajude-nos a divulgar o blog do Web design. Semana que vem estaremos de volta com outro artigo ou tutorial para você, amigo leitor! Um grande abraço e até o próximo post!

You are subscribed to email updates from Blog do Curso Web Design - Microcamp SP To stop receiving these emails, you may unsubscribe now.	Email delivery powered by Google
Google Inc., 20 West Kinzie, Chicago IL USA 60610