$show=label-post-search-page

Camisetas de Exatas - @camisetasdeexatas

$type=slider$meta=no$readmore=no$date=no$snippet=no$title=no$label=no$height=540$show=home

Fórmulas matemáticas para um design perfeito

COMPARTILHE:

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.

Lei de Fitt’s

  • 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.

Lei de Hick’s

  • 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:

Cor de contraste

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:

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 é:

Proporção divina

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



$show=post

$show=post

Mesa Digitalizadora barata e ideal para professores
Nome

android,27,aplicações matemáticas,123,Aprender Matemática,39,Artigo Convidado,50,Biologia,1,blog,52,Blogger,5,Camisetas de exatas,11,Carl Sagan Day,1,chatgpt,2,chrome,9,cinema,12,Concursos,3,Curiosidades matemáticas,104,curso online,10,Desafios matemáticos,44,destaque,5,determinantes,3,Dia do Estudante,1,Dia do Professor,10,Diario Escolar Digital,5,Dica de economia,4,dica de livro,32,Dica para professor,54,divulgação,61,E-book,4,Editorial,21,educação,109,ENEM,1,ensino,144,Entrevista,8,eventos,19,excel,24,extensões,11,Facebook,8,feira do livro,4,firefox,2,frações,6,funções,14,geogebra,83,GifsMatemáticos,5,google,46,história da matemática,41,humor,58,IMO,2,InternetJusta,1,iOS,18,iPad,7,iPhone,3,jogos,31,Katex,1,Latex,22,LibreOffice,14,linux,50,Livro GeoGebra,6,Mapa Mental,1,Matemática e profissões,21,Matemático do dia,27,Materiais GeoGebra,31,Mathjax,2,Netflix,7,Noticias,132,OBMEP,1,One Strange Rock,1,Papel milimetrado,5,Papel Quadriculado,1,Pi Day,16,piadas matemáticas,13,PodCast,4,política,3,premiações,7,professor,6,promoção,13,Quiz,22,Resenhas de Livros,1,Resposta Desafios,1,Sebastião Vieira,22,software,18,Software Livre,50,Tabuada,5,TCC,18,Telegram,7,texmaths,5,TIC,35,Top artigos,4,ubuntu,15,Videos,105,wallpapers matemáticos,23,Widgets,26,windows,41,wolfram alpha,31,Youtube,21,
ltr
item
Prof. Edigley Alexandre - O blog para professores e estudantes de Matemática: Fórmulas matemáticas para um design perfeito
Fórmulas matemáticas para um design perfeito
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.
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4jcHGmS-zeDEm8mBxoAqW8lNl5yu45IEo276alDrPq6wgS34NN92N6BJ0GdLHlA-c78w0Nyf7MK-KVVBNvnP6mnZeMpdkyxWKz5Q_Sj4Fco4MKSNzyNzUTfQEKG8bF7abzWc6qXlP6-ePH9ixGjYEtzAw_Wllcye6YtxWxHVKihGPPhvY_iX_VRgV/s16000/lei-de-fitts1.jpg
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4jcHGmS-zeDEm8mBxoAqW8lNl5yu45IEo276alDrPq6wgS34NN92N6BJ0GdLHlA-c78w0Nyf7MK-KVVBNvnP6mnZeMpdkyxWKz5Q_Sj4Fco4MKSNzyNzUTfQEKG8bF7abzWc6qXlP6-ePH9ixGjYEtzAw_Wllcye6YtxWxHVKihGPPhvY_iX_VRgV/s72-c/lei-de-fitts1.jpg
Prof. Edigley Alexandre - O blog para professores e estudantes de Matemática
https://www.prof-edigleyalexandre.com/2011/08/formulas-matematicas-para-um-design.html
https://www.prof-edigleyalexandre.com/
https://www.prof-edigleyalexandre.com/
https://www.prof-edigleyalexandre.com/2011/08/formulas-matematicas-para-um-design.html
true
125900602153146940
UTF-8
Carregar mais posts Não foram encontrados posts VER TODOS Leia mais Responder Cancelar resposta Delete Por Início PÁGINAS POSTS VER TODOS RECOMENDADOS PARA VOCÊ CATEGORIA ARQUIVO PESQUISE TODOS OS POSTS Não foi encontrada nenhuma correspondência de postagem com sua solicitação VOLTAR Domingo Segunda Terça Quarta Quinta Sexta Sábado Dom Seg Ter Qua Qui Sex Sáb Janeiro Fevereiro Março Abril Maio Junho Julho Agosto Setembro Outubro Novembro Dezembro Jan Fev Mar Abr Maio Jun Jul Ago Set Out Nov Dez agora mesmo 1 minuto atrás $$1$$ minutes ago 1 hora atrás $$1$$ hours ago Ontem $$1$$ days ago $$1$$ weeks ago mais de 5 semanas atrás Seguidores Seguir ESTE CONTEÚDO PREMIUM ESTÁ BLOQUEADO PASSO 1: Compartilhar em uma rede social PASSO 2: Clique no link da sua rede social Copiar todo o código Selecioinar todo o código Todos os códigos foram copiados para a área de transferência Não é possível copiar os códigos / textos, pressione [CTRL] + [C] (ou CMD + C com Mac) para copiar