Estilos de ícones para todos os gostos

Os ícones, são sem sombra de dúvidas, um dos elementos gráficos mais utilizados hoje em dia no desenho de interface de produtos digitais. E para fazer esta afirmação com algum grau de segurança, nem precisamos de uma análise estatística demasiado robusta. Basta recordar o interface daquela aplicação onde acabámos de pedir um transporte, a noite passada quando vimos um filme através de uma plataforma online ou até mesmo, a visita mais recente que fizemos ao nosso homebanking. A verdade é que os ícones, estão por todo o lado no nosso quotidiano, seja on ou offline.

É igualmente verdade que no que toca ao seu desenho, as linguagens são as mais variadas e criativas que possamos imaginar. Existem ícones para todos os gostos, feitios e formas. Quer tenha uma missão estritamente funcional de indicar uma direcção, ou então, servir de referência gráfica na hierarquização da informação de uma determinada página, os ícones são uma das ferramentas visuais mais utilizadas pelos designers, nas mais variadas áreas de atividade.

Definição de ícones

Embora o estilo de desenho dos ícones possa variar imenso (como veremos mais à frente), a sua definição é bastante fácil. Definir o que são os ícones, pelo menos na sua vertente de utilização no interface de um produto digital, é relativamente simples. Poderemos definir um ícone, como sendo uma imagem construída através de uma linguagem visual própria, com algum grau de semelhança mas também de abstracção, face a uma figura reconhecida por um determinado grupo de pessoas.

Nesta definição são evidentes uma série de características, entre as quais algumas intimamente relacionadas com a dimensão do desenho gráfico em si. Quando se está a desenhar um ícone ou uma família iconográfica completa, para uma utilização mais ampla no produto, um dos pontos mais importantes é a definição do estilo de desenho, ou melhor dizendo, a sua linguagem visual.

Para além disso, a definição refere ainda o equilíbrio necessário e preponderante entre dois conceitos muito relevantes no que toca aos ícones: semelhança e abstracção. Só com o doseamento destas duas dimensões, é possível atingir uma linguagem gráfica, visualmente interessante e capaz de dar uma identidade própria ao interface do produto digital que estejamos a trabalhar.

Ilustração da escala de abstração da linguagem de ilustração de Christopher Neiman
Escala de ilustração de Christopher Neiman © Netflix Abstract

Linguagens visuais

Tentar inventariar todos os estilos gráficos que poderão ser utilizados no desenho de famílias de ícones, é um tarefa condenada ao fracasso. Quer seja pela amplitude de soluções possíveis ou pela dificuldade de definir as fronteiras de cada estilo gráfico, criar uma biblioteca que consiga inventariar, todas as linguagens visuais utilizadas hoje em dia, é em si uma tarefa impossível.

Mais do que conseguir perceber qual a linguagem a utilizar em cada momento, o fundamental, como em muitos aspectos da criatividade, é definir um estilo próprio de desenho, identitário para cada marca. É basilar recolher inspirações e coleccionar referências. Contudo, de nada serve esse trabalho se cada designer não conseguir a partir disso, quase num trabalho de alquimista, criar um estilo de desenho próprio para cada produto digital.

Não querendo servir de catálogo de opções, muito menos de inventário para estilos de desenhos de ícones, aqui ficam mais alguns exemplos, de famílias iconográficas, que poderão servir de inspiração em algum momento. Este conjunto de referências, percorre uma escala que vai desde representações mais figurativas utilizando o elemento gráfico da linha, até desenhos mais abstractos onde é a mancha que predomina.

Ilustração de família iconográfica desenhada com recurso a duas espessuras de linhas
Exemplo de ícones com duas espessuras de linha

Duas linhas

Desenho bastante figurativo que procura uma maior semelhança com a representação do objeto. Por conseguinte, a construção das formas, utiliza duas espessuras de linhas, tentando com isso criar um maior ritmo no desenho de cada ícone.

Ilustração de família iconográfica desenhada com recurso a uma espessura de linha
Exemplo de ícones com uma espessura de linha

Uma linha

Procura de uma representação, menos figurativa e mais sistematizada das formas. Este estilo de desenho, recorre igualmente de uma única espessura de linha, preponderantemente fina na sua densidade, para a construção das formas.

Ilustração de família iconográfica desenhada com recurso a uma espessura de linha mas com duas cores diferentes
Exemplo de ícones com uma espessura de linha e duas cores

Uma linha, duas cores

Partindo de muitas premissas comuns do estilo anterior, quer seja no desenho ou densidade de informação das formas, este estilo de desenho, introduz a dimensão da cor. Através de duas cores diferentes, as formas ganham um maior ritmo entre si.

Ilustração de família iconográfica desenhada com recurso a sequências de linhas quebradas
Exemplo de ícones com linhas quebradas

Linhas quebradas

Recorrendo à linha enquanto elemento de desenho, esta linguagem, opta por uma densidade de linha mais forte. A juntar a isso, a linha é utilizada com quebras, que ajudam não só criar várias leituras, mas também introduz um maior ritmo ao desenho.

Ilustração de família iconográfica desenhada com recurso a padrões
Exemplo de ícones com padrões

Padrões

Assumindo a silhueta de uma forma, com algum grau de simplificação, o interior pode ser preenchido com diferentes padrões. Utilizando a linha, ou não, no desenho desse padrão, para além do contorno o interior do ícone passa a servir também de espaço de desenho.

Ilustração de família iconográfica desenhada com recurso a silhuetas de formas
Exemplo de ícones com silhuetas

Silhuetas

Assumindo a silhueta da forma como a principal referência, esta linguagem gráfica, resume-se exclusivamente a esse contorno. Por norma, utilizando um preenchimento opaco, as formas deverão conter algum grau de simplificação para facilitar a leitura.

Ilustração de família iconográfica desenhada com recurso a silhuetas de formas em duas cores diferentes
Exemplo de ícones com silhuetas e duas cores

Silhuetas em duas cores

Utilizando as mesmas premissas de desenho de formas da linguagem gráfica anterior, esta solução introduz igualmente a dimensão da cor a este tipo de desenho. Através de diferentes tons cromáticos, a silhueta da figura ganha profundidade e ritmo de leitura.

Ilustração de família iconográfica desenhada com recurso a formas com vários tons de cor
Exemplo de ícones com cores

Cores

Mantendo um grau de simplificação relativo no desenho das formas, a cor, aplicada à mancha, tem a propriedade de introduzir textura ao desenho. Esta linguagem pode ser construída, utilizando uma gama cromática ampla ou simplesmente com variações de tons.

Ilustração de família iconográfica desenhada com recurso a uma forma que circunscrever cada um dos ícones
Exemplo de ícones circunscritos

Circunscrito

Para estilos que assumem uma determinada forma geométrica como espaço visual de referência para o ícone, com ou sem cor. Neste caso, a forma assume-se como principal referência visual, passando o desenho interior para segundo plano.

Ilustração de família iconográfica desenhada com recurso a formas geométricas
Exemplo de ícones abstractos

Abstracto

Utilizando formas geométricas ou não, o desenho é construído de forma completamente abstracta. Por conseguinte, neste tipo de linguagens visuais, o desenho perde qualquer representatividade com uma figura conhecida, passando exclusivamente a referência visual.

* * *

Sendo sempre um inventário de linguagens visuais incompleto, esta selecção de estilos de desenho, poderá servir de inspiração para a criação de soluções próprias. Por conseguinte, é fundamental olhar para todas estas abordagens com algum sentido crítico, mas acima de tudo com a ambição de lhes acrescentar novas perspectivas, por ventura mais criativas até, quer seja no desenho das formas ou na gramática gráfica.

Existem também online, muitas plataformas — como é o caso do The Noun Project — onde é possível procurar inspiração para o desenho de ícones ou famílias completas. Mas, é fundamental não esquecer, que o que torna o desenho dos ícones interessante, não é só o estilo gráfico em si, mas também a forma como essa linguagem se relaciona com a identidade da marca e do produto digital.

Fotografia © Romina Veliz