Noções básicas sobre ajuste óptico

Neste artigo eu vou falar sobre alguns macetes que você pode utilizar para melhorar a qualidade dos seus projetos de Design.

São detalhes que, apesar de simples, fazem muita diferença no resultado final.

O que faremos nos tópicos a seguir é jogar a favor do cérebro e sua forma de perceber as informações.

Utilizaremos técnicas que passam a mensagem mais adequada, ainda que burlando algumas leis da matemática.

Na minha opinião, a principal característica de um bom Design é a clareza na comunicação, e sua eficiência está diretamente ligada com o fato de jogarmos a favor do cérebro e sua forma de perceber as informações.

Está pronto? Então vamos para o texto.

O que é ajuste óptico?

Se trata de um ajuste onde o olhômetro entra em campo.

Já fiz um vídeo explicando algumas técnicas no Illustrator para ser mais preciso e evitar o olhômetro, mas dessa vez, vou te falar o oposto.

Existem variáveis que a matemática e os softwares não conseguem prever, e nessas situações, precisamos mudar as leis da física para alcançar o equilíbrio óptico.

O ajuste óptico pode acontecer em três dimensões: tamanho, cor e posição. Vamos para eles?

1- Tamanho

A relação de tamanho entre um quadrado e um círculo é o melhor exemplo para falarmos de ajuste óptico.

Mesmo tendo o tamanho em pixels iguais, o quadrado parece um pouco maior.

Isso acontece por conta da distribuição de peso de cada forma geométrica, e isso nos faz perceber um objeto maior que o outro.

Para equiparar o tamanho percebido desses dois elementos, é necessário aumentar um pouco o diâmetro do círculo.

Não existe regra bem definida para esse ajuste, às vezes só é preciso confiar no olho.

No desenho tipográfico a lógica se repete. Coloque a letra “O” perto de uma letra “A”, e perceba que a primeira letra ultrapassa a linha de base. Esse ajuste nos ajuda a perceber as letras com tamanhos iguais, e cada letra do alfabeto possui uma variação de tamanho em relação à outra.

2- Cor

No meu vídeo sobre o modelo de cores HSB, fica claro o uso das propriedades da cor para a criação de uma paleta de cores, mas o que também pode ser aproveitado é a distribuição de objetos a partir da cor no espaço tridimensional.

A regra é a seguinte: quanto maior o brilho, mais um objeto se projeta para frente. E o contrário também é verdadeiro.

Apesar de quase imperceptível, outra situação que podemos fazer compensações visuais ópticas é no uso da cor.

Perceba que no exemplo abaixo, mesmo tendo o valor hexadecimal idêntico, o texto parece ter mais brilho.

E a lógica para este fenômeno acompanha o exemplo do quadrado e do círculo.

Em comparação com o texto, o ícone aparenta ter maior peso visual por conta da quantidade de área em que a cor atua.

Imagine que o ícone e o texto são moldes onde você pode dispersar tinta. Você concorda comigo que precisa de mais tinta para “pintar” o ícone?

Para fazer a compensação neste caso, basta escurecer a cor do texto ou clarear a cor do ícone.

Se ainda tem dúvidas sobre como fazer isso, leia mais sobre o modelo HSB para criação de variações de cor.

3- Posição

O que serviria como ótimo exemplo neste caso é o botão de play. Perceba que mesmo centralizado, o triângulo interno parece meio desajustado.

Isso acontece porque a distribuição de peso do triângulo tende ao lado esquerdo, o que faz com que nosso cérebro ache estranho a forma com o alinhamento métrico.

Entretanto, para o botão de play existe outra explicação e técnica para fazer esse ajuste. Existe um macete para fazer essa compensação visual apenas com Geometria, onde explico detalhadamente neste vídeo.

Mas de qualquer forma, existem exemplos onde o ajuste geométrico não basta, ou ainda não conseguimos definir regras claras e funcionais em todos os casos.

Como por exemplo o posicionamento de um ícone ao texto.

Quando fazemos o alinhamento por meio do software, precisamos ter em mente a própria anatomia do tipo. Para fazer o alinhamento, os softwares levam em consideração o tamanho do corpo do texto, que muitas vezes não compreende a altura de x como o centro métrico das ascendentes e descendentes.

Como eu disse antes, não existe uma regra clara para isso, mas muitas vezes, alinhar o ícone ao centro vertical da altura de x pode resolver.

Conclusão

Este artigo nos mostra a importância do equilíbrio quando o assunto é Design e comunicação visual.

É preciso entender o papel dos dois lados, tanto o matemático como o perceptivo.

Eles não são necessariamente antíteses, por vezes a percepção incentiva uma visão diferente para apoiar as decisões matemáticas (como no exemplo do símbolo de play).

O melhor caminho para ponderar os dois lados é observando o mundo, olhando criticamente para os elementos visuais e exercendo apontamento melhorias sobre a clareza e intenção de comunicação

O post Noções básicas sobre ajuste óptico apareceu primeiro em Designerd.

Noções básicas sobre ajuste óptico publicado primeiro em: https://www.designerd.com.br/