Curso Web Design | Design de ícones para web: uma introdução

Link to Blog do Curso Web Design - Microcamp SP

Design de ícones para web: uma introdução

Posted: 29 Aug 2013 06:18 AM PDT

Atualmente, com a presença maciça da informática na vida da maioria das pessoas, o conceito de ícone vem sendo constantemente utilizado como suporte para que os usuários possam obter, cada vez mais, uma experiência melhor – seja no auxílio para utilização de uma aplicação desktop ou na experiência de navegação em um site da web. Nos sistemas baseados na manipulação de interfaces gráficas com o uso do mouse, ou com uso de touchscreen, os ícones são parte fundamental para interação dos usuários ou mesmo para reforçar visualmente as informações necessárias dos sistemas.

Mas afinal, o que é um ícone?

A necessidade de se expressar com símbolos já estava presente nos primeiros homens das cavernas.

A necessidade de se expressar com símbolos já estava presente no espírito dos primeiros homens das cavernas.

A palavra Ícone vem do Grego “eikon” e significa imagem. Na informática, ícone é um pequeno símbolo gráfico, usado geralmente para representar um software ou um atalho para um arquivo específico, aplicação (software) ou diretório (pasta). Os ícones chamaram muita atenção com o surgimento da Interface Gráfica nos primeiros Sistemas Operacionais. Hoje em dia tanto computadores como também vários dispositivos utilizam ícones que facilitam gerenciamento e execução (Wikipedia).

Já a palavra Iconografia pode ser traduzida literalmente como “escrita de imagem”. Do grego “eikon” (imagem) e “graphia” (escrita). Seu uso está ligado à criação de projetos (design), ao simbolismo e à Igreja. E também pode se referir aos signos que tenham significados para determinadas culturas segundo suas crenças e valores socioculturais.

A iconografia é, portanto, o conjunto de imagens relativas a um determinado assunto, sendo considerada a arte de representar por imagens.

A função dos ícones na informática

Ícones desenvolvidos pela Xerox em 1981 para seus equipamentos.

Os primeiros ícones para computador surgiram para facilitar a compreensão do funcionamento dos sistemas através de um padrão visual que os representasse. A ideia acabou dando tão certo que com o passar do tempo, as pessoas acabavam se recordando mais do ícone do que a própria função que ele desempenhava. Assim, com o tempo, os ícones se tornaram a representação do próprio software, desenvolvendo identidade própria e também criando assim um capítulo à parte no desenvolvimento da parte gráfica da informática, entrando de vez no imaginário coletivo. Desse ponto em diante, seu valor estético começa a ser explorado em todo tipo de sistema operacional e também em programas e na web.

Inicialmente, o processo de criação das primeiras páginas de internet utilizava ícones sem nenhum aspecto funcional importante, sem se preocupar com a construção efetiva de uma interação entre o sistema e o usuário. Seu único objetivo era o ganho estético. Com o passar do tempo, o quadro se reverteu, e é claro que os designers foram fundamentais para que ocorresse uma mudança nesse sentido. Afinal, não podemos esquecer a função básica do design é justamente unir a forma à função, auxiliando a compreensão e facilitando o uso dos objetos. Graças á intervenção dos designers na criação de interfaces, a estética e a funcionalidade não precisavam competir entre si: poderiam ser parceiras, os dois lados de uma mesma moeda. E foi isso o que acabou acontecendo (até os dias atuais, com sistemas cada vez mais bonitos e práticos).

Seguindo esse raciocínio, com o passar do tempo, os ícones passam a desempenhar um papel importante quando auxiliam os usuários a encontrarem o que precisam durante a navegação. Não podemos deixar de observar que uma iconografia bem planejada, bem acabada e harmoniosa adiciona e muito um valor estético ao trabalho. Mas seu principal objetivo está em conduzir o usuário, tornando sua vida mais fácil. Essa é a sua função primordial e você não deve perder isso de vista!

Os tipos de ícones

De acordo com Donald Norman, os ícones podem ser classificados em 03 categorias:

Os que representam os objetos que serão manipulados;
Os que representam as operações ou os operadores dos objetos;
Os que representam os operadores atuando sobre os objetos.

Além disso, de maneira geral os ícones podem e devem representar símbolos de objetos existentes na vida real, evocando sua utilização para criar identificações com os usuários.

O objeto real e sua representação gráfica: reconhecimento deve ser imediato.

Vantagens na utilização de ícones em seu projeto

Podem-se enumerar inúmeras vantagens para utilizar ícones em seus projetos, e um post somente não seria suficiente para isso. Mas podemos citar alguns de maior destaque, como por exemplo:

Um ícone dispensa tempo de leitura e análise;
Por sua leitura ser puramente visual, sua compreensão pode ser feita até mesmo por pessoas não alfabetizadas;
É compreendido rapidamente: estudos realizados sobre sinalização rodoviária demonstram que um ícone pode ser reconhecido ao dobro de distância e na metade do tempo que um sinal escrito;
Se forem projetados de maneira adequada, contribuem com a otimização de espaço na tela.

E quando devemos usar ?

Para auxiliar na ativação de menus e botões;
Para iniciar a execução de várias ações;
Para auxiliar a manipular janelas;
Para revelar o estado de dados em geral;
Para representar arquivos, diretórios e programas entre outros itens.

Web já possui uma iconografia própria?

Exemplos de ícones que são usados com frequência em páginas web e em alguns navegadores

A maior parte dos ícones que conhecemos e relacionamos à web tem suas origens nos programas e sistemas operacionais. Por exemplo, o ícone da lupa para indicar uma pesquisa em um conteúdo já era usado em apresentações desktop muito antes de “estrear” na web. O ícone '+' em um menu, por exemplo, lembra o recurso de abrir e fechar pastas no Windows Explorer. Isso torna tudo mais fácil e reconhecível para a maioria das pessoas e é uma estratégia inteligente em design de ícones, afinal, reproduzir símbolos e funcionalidades de alguns dos programas e sistemas operacionais aumentam as chances de reconhecimento e compreensão por parte do usuário. Além dos exemplos citados, podemos citar também a carta como símbolo para a representação do e-mail, a casinha para ’home’, o cadeado para segurança, o carrinho de compras para sites de comércio eletrônico, entre outros ícones consagrados cuja utilização em nossos projetos só trarão benefícios para usabilidade como um todo.

Antes do Design, a Efetividade

Se você está pensando em iniciar suas atividades na criação de ícones, deve pensar primeiramente em sua efetividade, ou seja, a ligação entre a forma e o comando que será ativado. Quanto menor for o tempo de resposta, maior será a efetividade do ícone!

Ainda de acordo com Norman, ícones altamente convencionais, concretos, que representam objetos e ações são mais efetivos que aqueles que se referem a analogias ou formas sem um significado aparente. Veja o exemplo a seguir:

Exemplo de ícone concreto, com forma bem definida e ícone abstrato, em que você não define o significado.

É importante frisar que a efetividade de um ícone também pode ser alcançada com o auxílio de um texto (desde que obedeça a critérios de legibilidade e seja breve e preciso). Tenha muito cuidado com a proporcionalidade do tamanho das letras e o tamanho dos ícones, além do padrão de nitidez obtido entre os destaques entre as cores. Isso evitará problemas com usuários portadores de algum tipo de deficiência visual, tal como o daltonismo, por exemplo.

O texto, quando bem utilizado, agrega informação à forma.

Design: Informação ou ilustração?

Não importa o quão rigoroso ou incomum seja o seu design, todos os ícones devem ser feitos com uma especificação. Abaixo você verá alguns exemplos que mostram como nos dias de hoje há uma "quebra" no entendimento dos ícones no design moderno. Algumas pessoas podem argumentar que os exemplos no lado “ilustração” do gráfico não devem ser considerados ícones. Isso é parcialmente verdadeiro, pois eles não são ícones tradicionais, mas ícones modernos no sentido de que eles poderiam representar aplicativos, jogos ou algum outro objeto em um contexto específico.

Já os ícones no lado esquerdo do gráfico são ícones que seriam considerados ícones tradicionais com um toque moderno. Nós associamos imediatamente estes ícones com a sua função, e isto é conseguido por mais de 30 anos da linguagem visual – sabemos que o tempo é um poderoso fator para o sucesso de um design.

Os ícones que aparecem no meio do gráfico são os ícones que não são nem ilustrativos e nem informativos, mas uma combinação de ambos. Como exemplo, o desenho do envelope é tradicional por causa de sua forma, mas pode ser percebido de forma diferente dentro de um determinado contexto. O pássaro azul do Twitter tem reconhecimento imediato de usuários de internet, mas é reduzido a uma ilustração de um pássaro azul para não usuários da rede social. O balão estilizado do GTalk também é bastante dependente de associação da marca.

Convenções e Especificações

Ao projetar ícones para uma interface, pesquise projetos anteriores para uma indicação de como abordar o seu. Você vai descobrir que a maioria dos pacotes de software e interfaces de usuário tem ícones semelhantes, a explicação para isso é simples: eles remetem a várias Experiências do Usuário feitas ao longo de muitos anos, e esse é um fator importante para o seu desenvolvimento. Afinal, se um usuário é subitamente confrontado com um projeto que não está esperando ou que seja confortável para ele, ele estará propenso a ficar confuso.

Exemplo de aplicações de cores no design moderno: Verde = Bom; Azul = Ajuda; Amarelo = Atenção e Vermelho = Erro.

Se você está projetando para uma plataforma específica, verifique sempre os manuais dos desenvolvedores dessa plataforma antes de começar. Eles lhe darão uma ideia do tamanho, das paletas de cor, da perspectiva de outros aspectos que você deve usar. Isso vai ajudar na padronização, tornando-o reconhecível e integrado ao padrão pré estabelecido.

Um bom exemplo disso é o Google. Ele lançou um documento em duas partes sobre como produzir ícones e ilustrações para seus produtos. A primeira parte contém diretrizes de uso para os ícones e logos de seus produtos. A segunda parte é sobre ícones e ilustrações de sua interface. Esse projeto teve início em janeiro de 2012 e seu objetivo foi criar um guia para que designers e desenvolvedores do Google pudessem ter algo em que se basear na criação de peças que sigam a identidade visual dos produtos da empresa. Você pode conferir os resultados nos links abaixo:

http://www.behance.net/gallery/Google-Visual-Assets-Guidelines-Part-1/9028077

http://www.behance.net/gallery/Google-Visual-Assets-Guidelines-Part-2/9084309

O Google criou um manual de referência para seus ícones e ilustrações: excelente inciativa.

Especificações modernas

Criar especificações para a criação e o design de ícones ficam mais complicadas com o surgimento de novas tecnologias ou sistemas operacionais. Windows e Mac, por exemplo, estão numa verdadeira corrida corporativista sobre o tamanho do ícone, com o maior ícone hoje podendo medir até 512 pixels. A tendência para ícones grandes tem muito a ver com resoluções de tela modernas.

Ícones de aplicativos tamanho grande para Mac (em escala reduzida para caberem neste post).

Ícones de aplicativos tamanho grande (512px) para Mac (em escala reduzida para caberem neste post).

Independentemente do tamanho, tente não complicar o design de um ícone. Evite colocar muitos itens: há momentos em que até vale a pena perder o valor estético do ícone para ganhar algum impacto icônico. É sempre um julgamento difícil a ser feito, e as necessidades irão variar de acordo com cada projeto.

Ao iniciar suas primeiras criações, provavelmente você ficará tentado a criá-los pensando em um tamanho único. Isso não funciona com ícones. Afinal, o que fica bem em 512 pixels pode parecer uma mancha desfocada em 16px. Na hora de criar um ícone, tenha em mente de que ele deve ter um desenho de base que será utilizado como um ponto de partida, mas o tamanho de cada saída deve ter o seu próprio design otimizado para cada escala!

Quanto à harmonia visual, é importante fazer com que pareçam e sejam parte de um conjunto. Características como cores, proporções, perspectiva e estilo são o que unem os ícones e os tornam elementos de um sistema gráfico único.

Mãos á obra: crie seus próprios ícones

Projete, desenhe, redesenhe seus ícones o quanto for necessário para desenvolver o conceito.

Projetar ícones para sites é uma boa maneira de começar a se familiarizar com o design de ícones. Muitas vezes, são necessários apenas alguns poucos para um projeto de site. Comece de maneira simples, com um projeto pequeno. Esta é uma boa maneira de ganhar alguma experiência. Inicie o processo de desenho com uma boa pesquisa para descrever o ícone que você está procurando fazer. Esboce o quanto for necessário para desenvolver o conceito. Complemente o estilo com o design do site que você vai usar levando em consideração o próprio padrão visual dele (cores, formas, tipografia, etc.). Assim como já foi dito, é importante que esses ícones sejam direcionados para seu devido fim, evitando qualquer tipo de duplo sentido ao usuário.

Como deve ter notado no título desse post, esta é apenas uma introdução ao assunto. Há muito ainda a ser explorado e em breve voltarei ao tema, com mais algumas observações e também um passo a passo para inciar a construção de ícones em programas como Fireworks, Illustrator ou Photoshop. Se você se interessou pelo assunto, continue visitando o Blog do Web Design e acompanhe nossas postagens para conhecer mais sobre diferentes temas, programas e dicas de trabalho, assim como as partes seguintes desse post. Deixe também o seu comentário nos campos abaixo para sabermos a sua opinião e não esqueça de compartilhar e curtir com seus amigos! Até a próxima postagem!

Páginas

quinta-feira, 29 de agosto de 2013