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.
