Quando entrei pro mundo do design, achei que matemática não iria fazer parte do currículo – algo fantástico pra quem tem dificuldade com as contas mais básicas.
Quando entrei para mundo do design, achei que Matemática não iria fazer parte do currículo – algo fantástico para quem tem dificuldade com as contas mais básicas. Nunca estive tão enganado.
Matemática é tão importante no design quanto o sangue é pro corpo humano. E é graças a ela (a Matemática, não o sangue) que o design existe em primeiro lugar. Sem Matemática, não teríamos o círculo cromático, proporção áurea, regra dos terços, etc. E foi pensando nisso que decidi escrever este artigo, pra mostrar como a ciência exata é intimamente ligada ao design.
Lei de Fitt’s
Embora já tenha explicado o que é a Lei de Fitt's e como aplicar ela, vale rever o conceito:
Em termos simples e aplicados ao web design, a Lei de Fitt's diz que quanto maior a área de um objeto clicável em relação com a distância que precisa ser percorrida pelo ponteiro do mouse, mais fácil é de clicá-lo.
Exemplificando: existe um botão de “Confirmar” e um de “Cancelar”. Se o botão de “Confirmar” foi maior e mais longe do botão “Cancelar”, o usuário terá menos chance de errar sua opção do que se fossem do mesmo tamanho e um do lado do outro.
- T = Tempo de movimento. Ou seja, o tempo que decorre desde o início até o final do evento.
- a, b = Variáveis. Neste caso, a representa o tempo de início/término da ação e b representa a velocidade do mouse ou mão. Essas constantes podem ser determinadas experimentalmente colocando uma linha reta como exemplo.
- A = distância do movimento do início ao centro do alvo (ou botão).
- W = largura do alvo/botão ao longo do eixo do movimento.
Lei de Hick’s
A Lei de Hick’s, ou Lei de Hick-Hyman, descreve o tempo que uma pessoa leva para tomar uma decisão baseada nas escolhas que ela tem.
Essa lei é muitas vezes usada para justificar decisões referentes a menus de sites. No entanto, aplicar esse modelo a menus deve ser feito de forma cuidadosa. Por exemplo, para encontrar uma palavra especifica em uma lista de palavras ordenadas de forma aleatória, é necessário escanear todas as palavras da lista, consumindo assim um tempo linear. Neste caso, a Lei de Hick’s não se aplica. Já se a lista de palavras está em ordem alfabética e o usuário sabe o que está procurando, ele pode usar uma estratégia de subdivisão que funciona em tempo logarítmico.
Na prática, dá pra saber quanto tempo uma pessoa vai demorar para clicar em algo levando em conta a quantia de opções nas quais ela pode clicar.
- T = Tempo de decisão. Quanto tempo o usuário vai levar para tomar a ação.
- b = Constante. A constante que pode ser determinada empiricamente pelo ajuste de uma linha de dados medidos.
- n = escolhas prováveis.
- 1 = Existe sempre uma incerteza de se o usuário vai ou não efetuar a ação, assim como a ação que ele irá tomar.
Cor contrastante ideal para leitura de texto
De acordo com a W3C (World Wide Web Consortium), quando você está avaliando a acessibilidade do seu site, deve sempre tomar cuidado para que o fundo e a cor do texto tenham um contraste para que até pessoas com certas deficiências visuais (ex: daltônicos) consigam ler o texto, ou até mesmo se o texto é visível em uma tela preta-e-branca.
O pessoal da W3C surgiu com duas fórmulas para ver se o contraste está bom. Essa primeira fórmula determina o brilho:
Basta pegar o valor RGB da sua cor de fundo e multiplicar cada um pelos números acima e some-os, depois dividir por 1.000. Pegue o valor RGB da cor de texto, multiplique pelos números, some e divida por 1.000. Agora, é só subtrair o fundo pelo texto. Se este resultado for maior que 125, perfeito!
Esta outra fórmula complementa a primeira e através dela você pode chegar na diferença de cor:
Explicando: você pega os valores RGB das duas cores, subtrai o valor maior pelo valor menor do vermelho e faz o mesmo com o verde e o azul. Se a soma destes valores for maior que 500, pronto: você tem contraste o suficiente.
No entanto, vale notar que essas fórmulas não vão te dizer quais cores você deve usar, mas apenas se as duas cores que você escolheu formam um bom contraste.
Proporção divina
Este também já foi mencionado aqui no blog. Embora haja designers que disputam a proporção áurea (divina, etc), não vamos entrar nessa discussão aqui. O que você precisa saber é que a razão áurea é uma constante irracional matemática com valor aproximado de 1.618033987 e, em resumo, essa proporção encontra-se em praticamente tudo na natureza tornando o objeto criado com isto em mente em um objeto belo.
Muitos designers adoram utilizar a proporção áurea pois ela dá aquele aspecto harmonioso aos trabalhos, e muitos web designers utilizam dessa proporção ao fazer os seus sites. A fórmula para calcular a razão áurea de uma área é:
Ou seja, uma área de 1000 pixels de largura, se dividido na proporção áurea, ficaria em uma parte de 618 pixels de largura e outra de 382 pixels. Você então pode diminuir a área de 618 pixels novamente repetindo a equação. Uma ferramenta online que já faz esse cálculo rapidamente encontra-se aqui.
Concluindo
Lógico que não vou até o ponto de dizer que você precisa usar a matemática para fazer um bom design e nem estou dizendo que se seu design não tiver alguma fórmula matemática, ele não irá vingar. Essas fórmulas ajudam? Sim. Mas o bacana do design foi sempre poder inovar e tentar coisas novas.
Vale lembrar também que estas são apenas algumas fórmulas que você pode utilizar. Existem infinitas outras que podem ser aplicadas ao design, mas estas são as mais interessantes.
Você usa alguma fórmula matemática ou algum tipo de dica similar ao criar os seus projetos? Comente!
- [message]
- ##exclamation-triangle## AVISO DE DIREITOS AUTORAIS:
- Este artigo foi originalmente escrito e publicado por Sean Berg, mais conhecido como Canha, em seu blog intitulado Design.Blog. Com o encerramento do referido blog, o autor gentilmente autorizou a reprodução do artigo na íntegra neste espaço, onde antes havia apenas um link para o artigo original. Acesse o seu site: https://www.seanberg.eu.
COMENTÁRIOS