ícones | Pramaisde40cursos

Eles estão presentes por todos os lados. Seu uso, seu conceito e utilidade, não são novos, mas nunca como agora foram tão importantes. Estamos falando dos ícones.

Ícones fazem parte do nosso dia a dia de uma forma que fica difícil imaginar um mundo sem eles. Já imaginou usar o computador ou o celular sem algum único ícone?

Quer saber mais sobre o universo dos ícones e como eles podem incrementar e mesmo ser decisivos em seu projeto web?

O que são ícones?

Deve ser desnecessário explicar o que são para a maioria.

Mas saber profundamente o que são, ajudará a compreender porque são tão importantes.

Semanticamente são apenas imagens, já que a palavra grega que lhe deu origem (eikon), significa imagem.

Na prática, não é qualquer imagem que assume o papel de ícone como conhecemos. Isso porque um ícone mais do que uma simples imagem, é a representação visual de algo.

O seu emprego evita que se tenha que utilizar uma mensagem de texto, que em alguns casos pode ser razoavelmente extensa.

Uma evidência bastante antiga da sua utilidade, são os sinais e placas de trânsito. Eles servem para orientar sobre as regras de tráfego, informar sobre as condições da via e alertar sobre restrições e obrigações para motoristas e pedestres que transitam no local.

Por meio de imagens de fácil visualização e rápida identificação, as imagens contidas nas placas, ajudam as pessoas a evitar cometer alguma infração, mas também, garantem a segurança e o bom convívio entre todos presentes nas vias públicas ou mesmo em um estacionamento, como a marcação de uma vaga para deficientes ou idosos.

São um exemplo de representação visual em que ícones são usados, muito anterior ao seu uso em informática, mesmo que na época não utilizasse tal denominação.

Afinal, o que é mais fácil de identificar de modo rápido, uma placa em que consta escrito “Proibido virar à esquerda” ou o desenho correspondente?

Em informática eles começaram a ganhar espaço por ocasião do Windows 3.1 e desde então e particularmente com a popularização da Internet, passaram ganhar ainda mais espaço.

Qual sua importância?

Pelo que vimos até aqui, está clara a sua importância e o porquê de sua popularização, mas não é apenas porque ícones tornam o processo identificação de algo rápido, que ele é relevante.

Ainda usando o exemplo das placas de trânsito, você sabia que elas são universais? Ou seja, viajando pela Alemanha ou pelo Japão, uma mesma placa que você visualiza nas ruas brasileiras, quer dizer exatamente o mesmo e assim, a proibição de estacionamento em uma via, é representada com igual imagem em qualquer país que você viajar.

A consequência imediata disso, é que um ícone é uma representação única de alguma coisa, independente de idiomas.

Assim, o uso de ícones evita que se tenha que ter mensagens em diferentes idiomas, para diferentes pessoas.

Mais do que isso, dispensam até mesmo que a pessoa saiba ler.

Imagine quantas pessoas passam por uma estação de metrô ou terminal rodoviário. Quantas delas não sabem ler ou têm algum tipo de dificuldade visual.

Nesses ambientes ou outros similares, com grande fluxo de pessoas, há sinalização geralmente abundante, que deve ser capaz de alertar e informar os transeuntes sobre diversas situações para que usufruam do serviço e movam-se apropriadamente pelo ambiente.

Em informática e Internet, ícones ganharam espaço de modo irreversível. Como seria a barra de ferramentas dos programas que você usa diariamente, se em vez de ícones, houvesse apenas texto? O trabalho de localizar cada coisa e a ação correspondente, seria muito maior e demorada.

E a tela do seu celular? A área de trabalho do seu notebook? A interface do seu webmail? Clicar aqui e ali, seria mais demorado, mais complicado, mais chato, se não houvesse os ícones.

Quantos ícones você clica em cada tipo de site que visita? E nas redes sociais, as quais passa horas todos os dias? Compartilhar, curtir, postar, comentar e tudo o que é feito, é por um clique em um ícone.

O poder comunicativo de um ícone, transcende apenas a significação de uma ação a ele associada e a praticidade conseguida. Pode vincular por exemplo, uma marca e o que ela representa para quem o vê.

Imagine o ícone do seu editor de texto preferido ou seu software de criação e edição de imagens vetoriais. Ao fazê-lo, veio à sua mente uma marca e um produto, os quais você tem um ou vários conceitos associados. Isso é Branding e é também parte do processo de Top Of Mind.

Para isso, há profissionais e até mesmo equipes envolvidas na criação de ícones cheios de significado.

Por isso, o poder que uma imagem tem e o que ela produz na mente das pessoas, é outro aspecto intrínseco dos ícones e que deve ser fortemente considerado pelos profissionais que fazem seu uso, mais do que simplesmente o quão bonitas e bem produzidas são as imagens que os compõem.

A criação e a escolha dos ícones

A criação ou simples escolha de um conjunto de ícones adequados a uma aplicação ou um site de Internet, por tudo o que se viu até aqui, é mais do que simplesmente adequar visualmente ao restante da estética do site ou que sejam apenas bonitos.

Por essa razão, vamos listar abaixo os aspectos que um bom conjunto de ícones devem atender:

Fácil e rápida identificação visual do que representam;
Devem ser universais, ou seja, independem de idiomas e quando possível, até mesmo serem compreensíveis a quem nem mesmo sabe ler;
Não devem requerer aprendizado por parte do usuário – quando possível – para que possam ser usados. Se o usuário tem que clicar em cada um para descobrir o que fazem, indica que não cumprem seu propósito;
O tamanho, as proporções e as cores devem levar em consideração além da integração estética com os demais elementos do sistema ou site, a legibilidade e adequada identificação por parte dos usuários;
Devem estar integrados visualmente na interface em que estão inseridos, de modo que não fiquem tão discretos que exija trabalho para sua localização, nem tão destacados que sejam os primeiros elementos visualizados;
Formatos que sejam visualizáveis por ampla gama de dispositivos, sistemas e navegadores;
O tamanho (peso da imagem), deve ser o menor possível, sem abdicar da qualidade visual, para não interferir no carregamento e na alocação de memória por parte do sistema ou site no qual está inserido.

Diferentes formatos de ícones

Os formatos de ícones seguem também os mesmos formatos usados nas imagens dos nossos sites, afinal é o que eles são – imagens. O que os diferencia das demais, é que têm finalidades específicas.

Assim é possível ter desde ícones em JPG (Joint Photographic Experts Group), que é um formato bastante usado, ou GIF (Graphics Interchange Format), PNG (Portable Network Graphics), ICO (Icon), EPS (Encapsulated PostScript) SVG (Scalable Vector Graphics)

A escolha do formato, no entanto deve levar em conta as características e vantagens que cada formato oferece.

Conhecer cada uma, bem como as características técnicas associadas a cada formato, vantagens e desvantagens, é uma obrigação do web designer ou programador responsável pela sua incorporação.

Tem aumentado em uso, a adoção do formato SVG, pelo fato de que boa parte dos atuais navegadores têm suporte a ele e porque constitui um formato leve em termos do espaço em disco e consequentemente afeta pouco o tráfego e a alocação de memória, ao mesmo tempo que por ser vetorial, resulta em imagens de boa qualidade visual mesmo sob redimensionamento.

Além disso, o formato SVG é aberto e foi desenvolvido pelo World Wide Web Consortium, da mesma forma que o HTML e o XHTML.

O lado negativo é que usuários que ainda usam navegadores antigos, por conta de sistemas operacionais descontinuados, não visualizarão os ícones. Além disso, a sua implementação em HTML requer mais código e não é tão simples como em outros formatos.

Ícones gratuitos

Uma rápida pesquisa revela uma ampla gama de sites e serviços que fornecem conjuntos de ícones gratuitos e pagos, em diferentes formatos, tamanhos, cores em listas mais ou menos extensas.

Podem ser uma boa opção para sites mais simples e econômicos, como um site institucional básico.

No entanto, nos casos de sites mais sofisticados e com muitas opções, pode-se não encontrar um conjunto de ícones que preencha todas as opções ou recursos usados e que ao mesmo tempo, sejam adequados ao que se espera de um bom ícone e ainda de acordo com o padrão estético do site.

Outra desvantagem de se optar com ícones gratuitos, é a pouca ou nenhuma personalização. Encontrar o mesmo conjunto de ícones em outros sites, é uma realidade que tem que se conviver.

Mesmo diante das opções pagas, que costumam ser mais amplas e até mesmo melhores em termos de design, encontrar um conjunto harmônico em relação a um visual diferenciado, pode ser um desafio.

Sendo assim, mesmo sendo uma opção bastante utilizada, quando é possível e o orçamento permite, optar por criar seu próprio conjunto de ícones, pensado e idealizado de acordo com a proposta do site ou sistema, é o mais indicado.

Conclusão

Ícones são parte fundamental de sistemas ou sites na Internet. São representações gráficas de ações frequentes em uma plataforma, facilitando a navegação e ajudando a compor a estética e imagem do produto final, razão pela qual devem ser bem planejados.