O design de ícones

Princípios do design de ícones

Antes de abordar o design de ícones há algumas diretrizes e princípios que precisam ser estudados com grande importância . Se você quiser criar design para ícones de maneira eficiente será necessário uma visão mais holística abordando aspectos como: audiência, tamanho, simplicidade, iluminação, perspectiva e estilo. Este artigo serve de ponto de partida para entender certos conceitos importantes para se criar ícones que possam ilustrar uma boa idéia de conjunto e que se ajustem de forma homogênea ao projeto de design que se pretenda desenvolver. O assunto é amplo é não é objetivo deste artigo cercar todas as nuances que envolvem o projeto de design de ícones. No entanto, este texto é um bom de partida.

Este artigo foi produzido a partir da tradução e adaptação do artigo denominado 7 Principles of Effective Icon Design, Spoonfed Photoshop Tutorials da PSDTUTS Spoonfed Photoshop.

Abordando o design de ícones holisticamente

Ícones devem se ajustar dentro de sistemas gráficos. Sejam eles projetados para aplicações de desktop ou para sites da web, um ícone é um dos muitos elementos gráficos que precisam trabalhar juntos e harmonicamente. Considere esta lógica durante a criação do design de ícones e este será início de um bom trabalho. Ícones podem ser apreciados por suas soluções estéticas, mas lembre-se: eles nunca trabalham sozinhos e visual não é tudo. Leve em consideração o sistema ou espaço gráfico em que seus ícones serão aplicados. Avalie-os. Tenha certeza que cada ícone difere dos ícones circunvizinhos, enquanto trabalham todos juntos em equilíbrio com o ambiente gráfico.

Desde a evolução dos sistemas operacionais, especialmente, o de propriedade da Microsoft, Windows, em que ficou consagrada a frase: uma imagem vale mais que mil palavras, criou-se juntamente a este novo patamar um novo sistema de comunicação, uma nova forma de representar idéias. Surgiu a partir daí uma linguagem iconográfica específica para o universo da informática. Linguagem esta poderosa capaz de comunicar de maneira rápida e eficiente.

Se o projeto requer a criação de um conjunto de ícones de 5 ou de 100 peças, será preciso, antes de partir para a criação, realizar uma reflexão sobre todo o conjunto. Este é o ponto central a ser tratado neste artigo. Você verá que um plano eficiente de construção de um conjunto de ícones é extremamente necessário, pois do contrário o desperdício de tempo e o “redesign” (redesenho) serão inevitáveis. Perceberá que criar um conjunto de ícones é um trabalho complexo, que precisa ser pensado e avaliado para resultar um trabalho de qualidade. Trabalho este que deve ser tratado com a mesma seriedade com se trata uma peça de design qualquer, como um folder, uma newsletter ou até mesmo a capa de um livro.

Observe a figura 1 em que se apresenta um grupo de ícones cujas características encontram-se em plena harmonia. Verfique o design abordado segue um padrão de cor e uma abordagem simbólica coerente denotando claramente a idéia de conjunto.

Figura 1: Conjunto harmônico de ícones

Leve em consideração seu público-alvo

É interessante notar que é consideravelmente diferente desenvolver o design gráfico de ícones para a intranet de uma pequena empresa, por exemplo, e criar um pacote de ícones que fará parte de um produto que poderá ser comercializado internacionalmente. Ao criar ícones, assim como ao criar qualquer peça gráfica é preciso levar em conta aspectos culturais e regionais. Símbolos podem representar coisas diferentes em situações diferentes, em países diferentes e em culturas diferentes. É preciso estar alerta para este tipo de situação. É bom lembrar que ícones são uma linguagem gráfica formada por desenhos. E assim como na linguagem escrita formada por vogais e consoantes, também há muitas armadilhas na iconografia. Para tanto, basta observar as diferenças interessantes e muitas vezes caprichosas que existem entre o português falado no Brasil e em Portugal. Muitas vezes a mesma palavra tem significações completamente diferentes nestes dois países. Com ícones e imagens não é diferente. Culturas diferentes terão uma abordagem diferente para a mesma imagem.

Um artigo denominado: “Os dez erros no design de ícones” aponta erros clássicos que ocorrem em projetos deste tipo e que acabam inviabilizando a produção do conjunto. Neste artigo são discutidos aspectos nacionais e sociais em sete pontos importantes para se criar o design de ícones. “Sempre é necessário levar em conta as condições nas quais seu ícone será usado. Um aspecto importante aqui são características nacionais. Tradições culturais, ambientes e gestos radicalmente podem diferir de país a país.” Um bom exemplo poder ser citado: a representação gráfica dos serviços de e-mail associada muitas vezes a correspondências. A Apple usa o mesmo exemplo em seus dispositivos de Interface Humana.

Dessa forma, projetar um ícone de alcançe internacional basesado no design de uma caixa de e-mails de motivo/ estilo rural é uma péssima idéia. Este é um exemplo claro do que não se deve fazer. O exemplo da Apple deixa claro que embora exista no ícone uma identificação imediata com a marca da empresa, a proposta adotada tem universalidade cultural.

Figura 2: Simbologia adotada pela Apple em seu ícone de e-mails

Considerando o tamanho do ícone a ser criado

Este aspecto é de extrema importância. Muitos projetistas ignoram ou mesmo não conhecem regras básicas de resolução levando projetos de ícones à bancarrota.

Se o objetivo é vetorizar o ícone no Adobe Illustrator por exemplo, existe uma tendência em escalar o design e tentar aplicá-lo a qualquer tamanho. Este é o erro mais corriqueiro na criação de projetos de design de ícones. Infelizmente, re-escalar ou simplesmente reduzir ou aumentar o tamanho da imagem não vai funcionar, quando se trata de ícones. Um ícone que pareça bom com um dimensão de 512 px de largura ficará parecido com uma sujeira borrada se reduzido arbitrariamente para 16 px. Ícones precisam ter um design básico como ponto de partida. No entanto, para cada tamanho, o ícone precisará passar por um processo de aperfeiçoamento buscando torná-lo nítido o suficiente, contemplando além qualidade gráfica e visibilidade. Há projetos de design de ícones muito pequenos, como os de 16 e 32 px, muito utilizados em jogos de celular que passam pelas mãos de profissionais de Pixel Art especializados em trabalhos gráficos minúsculos da ordem pixelar, buscando justamente desenvolver um projeto iconogáfico harmônico.

O design de ícones não é um desenho que pode ser “escalado”, ou melhor dizendo: não basta desenhar um ícone em um tamanho médio em seguida buscar aumentar ou reduzir o seu tamanho para obter os resultados esperados. Isto seria um tanto quanto simplório. Esta é a razão pela qual o Photoshop é uma solução tão boa para a produção de ícones tanto quanto outros softwares de edição, uma vez que através de seus diversos recursos, como filtros, é possível produzir ícones de diversos tamanhos com resultado gráfico bastante aproximado.. Seguramente, designers que fazem ícones no Illustrator ou no Fireworks irão passar por outros softwares, como Photoshop, para alcançar bons resultados ao produzir ícones em tamanhos pequenos. Sendo assim, não acredite no mito de que o design de ícone é puramente criação de vetores. Ícones, assim como imagens de maior porte possuem muitas vezes efeitos de sombra, “lights” e “glows” que em geral podem ser produzidos de forma mais eficiente em softwares como o Adobe Photoshop. Outro ponto importante é observar que ao se produzir ícones muito pequenos, estamos falando de um trabalho na escala de pixels que requer um detalhamento quase que artesanal.

Existem diversas ferramentas vetoriais disponíveis no Photoshop e máscaras que podem ser utilizadas para obter bons resultados em termos de escalabilidade, buscando assim um resultado satisfatório tanto para ícones pequenos quanto para ícones grandes. Se você tem familiaridade com o Illustrator ou outro software vetorial como o Fireworks, é interessante tentar estabelecer um fluxo de trabalho entre os dois programas para a criação e edição dos ícones. Atualmente, os aplicativos da família Adobe oferecem uma ótima integração sendo possível por exemplo, carregar arquivos no formato psd para dentro do Fireworks. No Photoshop, considere o uso dos Smart Objects (tradução ao “pé da letra”: objetos inteligentes) que são aqueles elementos que podem ser editados separadamente facilitando o trabalho quando se trata de arquivos com muitas partes. Vale a pena estudar este recurso. Outra alternativa interessante para um trabalho bem produtivo é o uso do Photoshop associado a softwares específicos para criação de ícones. Dois bons exemplos são o Icon Builder e o Axialis Icon. Como se pode ver, a abordagem para a criação do design de ícones pequenos e grandes é extremamente diferente.

Observe atentamente a figura 3. Verifique o que ocorre na escalabilidade de um mesmo ícone e perceba a perda de qualidade e resolução do design em ícones pequenos.

 

Figura 3a: Alteração do tamanho dos ícones com perda de qualidade

Figura 3b: Alteração do tamanho dos ícones sem a perda de qualidade

Faça ícones simples e relevantes (icônicos)

A palavra iconografia vem do grego eikon (imagem) e graphia (escrita), ou seja, literalmente: “escrita da imagem”. Esta definição deixa claro que o ícone, sobretudo aquele do universo da comunicação visual deve primar por estabelecer uma mensagem que possa ser compreendida e verbalizada mentalmente de forma imediata.

Os sistemas operacionais mais recentes trouxeram a possibilidade de utilizar ícones de dimensões grandes: 512 px por 512 px, o que corresponde a um tamanho praticamente gigante para um ícone. Em consequência disto cresce a tentação de tornar os ícones mais ilustrativos. Por mais que se possa adicionar um nível maior de realismo ao design de um ícone não se deve perder de vista o objetivo principal: comunicar de forma simples e efetiva. Não há vantagem em abrir mão destas características afim de buscar um detalhamento excessivo do material desenvolvido.

Na web em sites especializados há uma série de tutoriais e guias sobre dispositivos de interface humana e suas diretrizes. Alguns artigos tratam especificamente das limitações do realismo do design de ícones e situações em que o simbolismo torna-se necessário. No final deste artigo são citadas algumas fontes de pesquisa que inclusive serviram de construção deste textos. Vale conferir o artigo da Smashing Magazine que trata do conflito entre realismo e simplicidade no design de ícones.

Em linhas gerais é bastante útil pensar que o design de ícones não deve ser complicado. Ser cauteloso antes de colocar muitos detalhes e elementos gráficos em um ícone é um bom passo para produzir um ótimo “icon design”.

Evite ilustrar um ícone demais. Nunca é demais repetir: seja simples.

A boa comunicação preza pela simplicidade. Há algum tempo o RSS vêm tomando espaço e tornando-se um artifício de comunicação bastante eficiente. O ícone que representa este serviço por consequência também vem se tornando bastante conhecido, embora por muitos ainda seja visto como uma novidade. Veja o exemplo apresentado abaixo na figura 4.

Figura 4: Ícone de RSS – Feeds

Observe que este ícone é bastante limitado no quesito ilustração, ele é simples. Entretanto apresenta caractersíticas simbólicas bem marcantes e fortes. Uma vez que este ícone seja visto e o seu significado entendido, dificilmente alguém que o veja novamente não será capaz de associá-lo ao seu significado. Deste modo, é bom ser cuidadoso ao criar o design de ícones evitando o excesso de detalhes.

É óbvio que há situações em que o aspecto estético de um ícone torna-se mais importante em detrimento de seu impacto iconográfico. É uma questão de julgamento e a necessidade irá variar para cada projeto de design. Compare o conjunto de ícones mostrados abaixo, na figura 5, com um ícone simples de RSS. Em algumas situações torna-se interessante utilizar recursos de detalhamento gráfico mais arrojados e “enfeitados”, sobretudo quando se busca uma maior harmonia com o projeto gráfico do website ou aplicativo em questão. Um interessante recurso que deve ser almejado a todo projeto é adicionar interesse e admiração pela proposta gráfica abordada sem, no entanto, deixar de lado o aspecto iconográfico.

Os ícones apresentados abaixo são realmente legais. É uma questão de julgamento decidir se vale a pena perder a capacidade de reconhecimento rápido do símbolo em favor dos detalhes e recursos estéticos adicionados ao redor do ícone. Para ícones maiores, recursos estéticos mais mais aperfeiçoados e detalhistas podem ser utilizados com redução da perda de acessibilidade visual. Para ícones menores é preferível um material mais simples e esteticamente mais objetivo.

Figura 5: Ícones de RSS estilizados

Iluminação consistente, reflexão e sombras

É muito importante que o realismo adicionado ao design do ícone funcione de forma coerente. Por exemplo, se o objetivo é utilizar uma fonte luminosa vinda de uma determinada direção, então deixe isso evidente em todo o projeto gráfico. Pois do contrário um efeito luminoso mal construído poder dar a impressão de um defeito ou erro de concepção durante a criação. Como se pode perceber o limiar entre o recurso bem aplicado e o erro banal é bem estreito. Outro ponto importante é considerar o conjunto em que será aplicado o design do ícone. Se a fonte luminosa aplicada ao design do site é aplicada da direita para esquerda, é bom considerar isto na combinação com o design dos ícones que usarão efeitos luminosos. Do contrário, seu projeto parecerá amador.

No guia eletrônico Windows Vista User Experience há um seção que trata especificamente do processo de iluminação e adição de sombras em ícones. O Guia apresenta regras específicas para o conjunto de ícones do Windows Vista. Este guia serve de balisamento para designers que venham a desenvolver ícones para este sistema operacional, assegurando a padronização do projeto e a obtenção de um conjunto unificado de modelos que venha a respeitar a proposta iconográfica adotada pela Microsoft. Por exemplo, veja a frase: “Use shadows to lift objects visually from the background, and to make 3D objects appear grounded, rather than awkwardly floating in space.” Use sombras para erguer objetos visualmente do fundo, e dar a impressão de objetos 3D bem fundamentados, ao invés de flutuar de forma desajeitada no espaço. O assunto é rico e há muito mais dicas neste guia que servem não somente para o design de ícones, mas que também são requisitos básicos para um bom projeto gráfico.

Figura 6: ìcones do sistema operacional Microsoft Windows Vista

Delimite a pespectiva

Perspectiva é um termo bastante amplo. Em termos geométricos e por conseguinte associado ao aspecto gráfico-design pode referesse a um campo de estudo da geometria, em especial, da geometria descritiva. É usada como um método para representar em planos bidimensionais (como o papel) situações tridimensionais, utilizando-se de conhecimentos matemáticos e físicos, decorrentes do fenômeno da percepção visual, buscando simular ao olho humano a ilusão de distanciamento e posicionamento.

A taxa de perspectiva e o design do ícone devem trabalhar em conjunto buscando equilíbrio. Se os ícones produzidos são visto de frente, então tenha certeza de que produziu este efeito visando o resultado: ver o ícone de frente. Também não se esqueça de manter o equilíbrio com o restante do projeto gráfico ou website. Ou seja, procure manter a harmonia do conjunto, colocando todos os elementos dentro da mesma perspectiva. Embora, em casos específicos e intencionais não seja problema “bagunçar a noção de perspectiva do expectador”, mas é bom ter cuidado para que o resultado não fique demasiadamente caótico. Se uma pessoa ou elemento encontra-se em um ângulo específico tenha certeza de que todos os ícones funcionarão desta maneira. Uma técnica bastante simples e muito utilizada é imaginar uma câmera fotográfica colocada em um ponto de vista específico visando todos os objetos através da mesma perspectiva. Este tipo de raciocínio contribui para manter a consistência do design dos ícones utilizados.

Um sistema de design de grande escala, como por exemplo um sistema operacional, em geral precisará de maior poder de flexibilidade, ou seja, será necessário mais do que a perspectiva de apenas uma câmera. Elementos colocados em uma barra de tarefas ao pé da página deverão dar uma noção de pespectiva diferente dos elementos mostrados em uma barra de títulos na parte superior do vídeo. A Apple apresenta a perspectiva de ícones através de um documento denominado: Diretrizes de Interface Humana, abordando aspectos bastante interessantes. “As várias perspectivas são alcançadas mudando a posição de uma máquina fotográfica imaginária que captura o ícone.” A imagem mostrada abaixo apresenta a diferença entre as perspectivas de um ícone de aplicativo que se localiza no topo da página e de um íconte localizado em uma toolbar (barra de ferramentas) localizada na parte inferior do vídeo.

Figura 6: Perspectiva de ìcones em diversos pontos da tela

Criando um estilo consistente para o conjunto de ícones

Iluminação e perspectiva certamente contribuem para o estilo e design de um ícone. Entrento, há diversos outros fatores que podem contribuir para os estilo de um conjunto de ícones. Por exemplo: Se um website utiliza um formato “grunge” ou “anos 60″, provavelmente será necessário adicionar elementos ao ícones que façam referência a este estilo, buscando criar harmonia e idéia de conjunto.

Conjuntos de ícones tem características únicas que os tornam singulares. No Guia Echo apresentado pelo Fedora ArtTeam, é apresentado um conjunto de diretrizes que podem ser seguidas para o desenvolvimento de uma iconografia consistente. O guia aborda conceitos que podem ser utilizados para o desenvolvimento de uma perspectiva dinâmica, que apresente-se mais realista preservando o design simples e claro concebido a partir do contraste eficiente e do uso de cores vibrantes. Também é abordado o uso de “outlines” como recurso gráfico. Nos próximos artigos irei tratar sobre este guia apresentado pelo Fedora. Veja alguns exemplos encontrados no site.

Figura 7: Exemplos de ícones do site Fedora

Iniciando o design de ícones

O design de ícones para websistes é uma ótima forma de iniciar o trabalho de criação e desenvolvimento de ícones. Entretanto, apenas alguns ícones que são realmente necessários no design de um site. Iniciar um projeto web simples com poucos ícones, somente o básico e realmente necessário é uma boa maneira de ganhar experiência em design de ícones.

Em qualquer projeto gráfico o importante é tormar contato com a proposta teórica, relacionar as idéias, seguir uma linha de trabalho consistente, relacionar o projeto com tendências e aspectos culturais e temporais. Iniciar o processo de criação de design de ícones através de uma pesquisa é uma ótima forma de realizar o trabalho. Deste modo as chances de tudo dar certo são bastante grandes. Se o site trata da história do Egito antigo é interessante fazer um levantamento dos símbolos e ícones utilizados por esta socidade e tentar estabelecer alguma relação com o projeto de forma equilibrada e limpa. Criar o máximo possível de esboços do trabalho a ser feito é importante para chegar a uma boa idéia conceitual. Veja o exemmplo mostrado abaixo.

Figura 8: Rascunhando o projeto

Inspiração para criar conjuntos de ícones profissionais

Uma vez que você tenha criado um pequeno conjunto de ícones para um website, é hora de considerar criar alguns ícones para outras aplicações. Uma vez que você tenha praticado este processo de criação algumas vezes, naturalmente a capacidade para criar um conjunto maior e mais profissional de ícones surgirá. Vender ícones pode ser um negócio lucrativo para um designer. Há muitas empresas que terceirizam a produção de ícones em projetos gráficos maiores e até mesmo na produção de softwares. Sobretudo se o conjunto de ícones se destacar por ser único e profissional, a facilidade de comercialização torna-se muito maior. Abaixo há dois conjuntos que apresentam o design de ícones de forma bastante profissional e que poderão servir de boa fonte de inspiração.

Figura 9a: Pacote de ícones 1

Figura 9b: Pacote de ícones 2

Conclusão

A criação de ícones assim como o projeto gráfico de outros materiais, sejam eles digitais ou impressos requer bastante estudo, habilidade específicas e fundamentação teórica. A soma de todos estes elementos associados a uma boa dose de experiência adquirida em trabalhos diversos é a apresentação cada vez mais profissional dos seus trabalhos. Conforme mencionado no início do artigo, este post não tem a pretensão de esgotar o assunto design de ícones, que é bastante amplo. Abaixo algums referências que serviram de base para a tradução e adaptação de post.

Referências:

• http://psdtuts.com/articles/7-principles-of-effective-icon-design/
• http://fedoraproject.org/wiki/Artwork/EchoIconGuidelines
• http://msdn2.microsoft.com/en-us/library/aa511280.aspx
• http://www.firewheeldesign.com/sparkplug/2006/April/icon_design_bitmap_vs_vector.php
• http://mezzoblue.com/archives/2007/02/21/icon_design/

 

Design inovador em dispositivos eletrônicos e hardwares

Tornar coisas comuns e aparentemente simples em algo que salte aos olhos, que encante despertando a vontade de degustar é característica marcante para um objeto que tenha a pretensão de ser mais que usável. O design elegante, diferenciado e muitas vezes chocante é capaz de transformar certos objetos em elementos, no mínimos instigantes.Recentemente aliar funcionalidade, praticidade e usabilidade ao bom gosto e resultado visual exímio tornou-se o resultado mais interessante para o usuário.Os exemplos abaixo deixam claro que design e funcionalidade podem andar de mãos dadas. Fique à vontade e deguste. Afinal de contas é uma gostosa viagem por criatividade e certa enloquência.

Sony’s Apple Remote Control – Controle remoto Sony – Apple

A “maça” da apple desfarçada de controle remoto permite aos usuários funções simples como alterar volume, mudar de canais com gestos e movimentos (veja imagem abaixo). Quando colocadas sobre a bandeja, as “maças-controles” iniciam o processo de carregamento. A idéia não é tão nova assim do ponto de vista tecnológico, já que o Nintendo Wii já usa recursos parecidos para que seus jogadores possam utilizar o console. Mas além de ser maça, é controle. Genial.

Optimus Tactus & Optimus Maximus

A Artemy Lebedev’s Optimus keyboards, empresa fabricante do excêntrico apresentado abaixo oferece uma abordagem diferenciada em termos de teclados. Um pequeno OLED-display (Organic Display) – visor orgânico – é colocado embaixo de cada tecla para permitir que o usuário possa definir os caracteres que serão mostrados no teclado e também definir a funcionalidade das teclas manualmente. Em outras palavras, o lugar de cada caractere e elemento do teclado pode mudar ao gosto do usuário.

Optimus Tactus não possui nenhuma tecla física, o que significa que não há restrições quanto à sua área e tamanho. Qualquer parte do teclado pode ser programada e passar a ter determinada função ou apresentar qualquer imagem.

Optimus Maximus (Demo)

Cada uma das 113 teclas pode ser configurada para receber uma função específica. O interessante neste modelo é que o teclado pode ser configurado facilmente para uso em qualquer idioma. O uso de símbolos, numerais, caracteres especiais, códigos HTML e matemáticos é praticamente infinito.

O lançamento no mercado foi feito em janeiro de 2008 e o preço ainda amargo para os bolsos brasileiros é de 460 dólares.

Configuração do teclado. Você pode associar imagens e caracteres para serem exibidos no Optimus keyboard.

Nonobject Câmera

A “Nonobject Behind the Scenes Camera” – Nonobject atrás da cena das câmeras, se traduzido ao “pé da letra” apresenta lentes e visores simultaneamente dos dois lados do aparelho, sendo possível desta forma fotografar e filmar o “que você vê” e o “que você não vê”. A câmera é desenhada para capturar o que está atrás de você, enquanto, ao mesmo tempo captura o que está a sua frente durante a sua utilização.

Toast Messenger – “Mensagem torrada”

É isto mesmo. Você não leu errado. O Toast Messenger, como é chamado este brinquedinho gourmet possui uma pequena área sensível ao toque de uma caneta digital, como aquelas de certas tablets, destinadas ao desenho no computador. Através desta caneta é possível escrever pequenas mensagens que podem ser instantaneamente impressas na torrada. Simples, mas ainda inovador.

Dual Music Player

As diferenças deste player se comparado aos seus competidores tradicionais ficam evidente. Em primeira análise, sua anatomia extremamente simples mostra certa excepcionalidade. Esta é uma solução portátil que suporta tantos CDs quanto Flash memory (função pen-drive). Você pode ouvir os seus mp3 armazenados no seu pen-drive e copiar músicas via USB e tocar seus velhos cds.

Bluetooth Laser Virtual Keyboard – Teclado virtual a laser baseado na tecnologia bluetooth

Através deste teclado virtual é possível digitar em qualquer superfície que permita a projeção. Pode ser utilizado para criar textos para seu celular ou PDA facilitando a operação e criando um espaço de digitação consideravelmente maior que o oferecido em geral por estes aparelhos. Contendo 63 teclas o teclado virtual alcança uma velocidade de toque aproximada dos teclados convencionais. O interessante é o tamanho do aparelho: um pouco maior que uma caixa de fósforos. O preço da facilidade: em torno de 150 dólares.

Pock-It

Simplesmente simples e engenhoso. Um pequeno “bolso” de tickets e lembretes que pode ser acoplado ao seu computador.