Portuguese (Português) translation by Erick Patrick (you can also view the original English article)
Esse é o segundo artigo de uma série com três, sobre "forças invisíveis" no design. No artigo anterior, aprendemos sobre como alinhamento pode ser usado para criar direção e foco. Nesse artigo, aprenderemos sobre como o uso de diferentes tamanhos pode criar contraste e equilíbrio, e ajudar seus projetos a comunicar melhor.
Coisas Grandes Parecem Mais Importantes
É claro que quando tornamos um elemento maior, ele tende a chamar mais atenção que elementos menores.
Mas isso deve ser considerado junto a outros fatores que afetam a hierarquia visual. Por exemplo, esses dois elementos tem o mesmo nível de importância, uma vez que tem o mesmo tamanho:
No máximo, a diferença seria ver o elemento de cima antes que o de baixo.
Mas se tornamos o elemento de baixo maior que o de cima, ele parecerá mais importante.
Entretanto, outras coisas como peso visual (uso de fontes negritas ou finas) ou contraste de cor podem reverter esse efeito.
Nessa ilustração, o elemento mais claro parece mais importante, embora seja maior.
Se essa mesma ilustração tivesse um plano de fundo escuro, o elemento mais claro (e maior) seria dominante, graças ao contraste com o plano de fundo, maior que o do elemento menor.
Realize Mudanças de Tamanho Significativas
Especialmente ao projetar para dispositivos minúsculos de hoje em dia, devemos considerar o objetivo da mudança de tamanho. Não faz sentido tornar uma fonte maior–e, assim, tomar mais espaço valioso da tela–se não for necessário.
Quando possível, podemos usar os fatores mencionados acima para mudar a hierarquia visual, mas, cedo ou tarde, precisaremos tornar algo maior que os outros. Não faça isso atropeladamente.
Veja esses diferentes elementos, cada um maior que o anterior.
Qual deles é mais legível: o anterior ou esse?
Os elementos do segundo exemplo são dimensionados usando uma escala variada. Todos os tamanhos de fonte relacionam-se, usando a mesma relação matemática entre eles.
Os tamanhos de fontes usados na escala variada tem uma relação proporcional uns com os outros. Proporções ajudam a tornar as partes de seu projeto componentes de um todo.
Você pode ver as proporções em ação na logo do MailChimp.
Cada círculo que compõe as características do macaco se relacionam em um fator de .75. O círculo que marca a área da barriga é .75 o tamanho do círculo do corpo, por exemplo. Hicks Design, a empresa por trás da logo, fez isso de propósito.
Não Seja Enganado Por Ouro de Tolo
Muitos devem estar pensando no sempre falado, "Gride Divino" (ou Gride de Ouro). A proporção divina é, aproximadamente, 1:1.618. Sim, o macaco ainda seria atrativo se fosse feito usando a proporção divina, mas não seria mais atrativo só por isso. Apesar do falatório, não há evidência que a Proporção Divina é mais atrativa que outras proporções, como a .75 ou .67.
Para ilustrar isso, realizei uma pesquisa na minha lista de e-mails sobre qual dos retângulos acima seria o mais atrativo. Um deles é um quadrado, outro um retângulo .75, outro é um retângulo .67 e o outro é um retângulo "divino". Qual retângulo é mais atrativo para você?
Eis o resultado:
- cima e esquerda (quadrado): 8%
- cima e direita (retângulo .75): 29%
- baixo e esquerda (retângulo .67): 37%
- baixo e direita (retângulo "divino"): 25%
Como podemos ver, o retângulo divino saiu-se muito bem, mas não foi o mais atrativo dos retângulos.
O retângulo .67 ganhou nesse caso, mas isso não quer dizer muita coisa. O ponto é, qualquer coisa entre a proporção divina e .75 será mais atrativo que um quadrado.
Você pode usar esse conhecimento para tornar sua tipografia bonita e economizar tempo, se usar uma escala variada pré-estabelecida em sua tipografia.
Por exemplo, esses são os tamanhos de fontes que sempre uso. Cada tamanho é .75 do tamanho anterior (arredondado).
Um benefício extra ao trabalhar com essa escala, ao invés da divina, é que a matemática fica muito mais fácil: 75% de 16 dá quanto? Fácil! Quanto é 61.8% de 16? Err...
Conclusão
Ao pensar sobre as mudanças dos tamanhos que realizamos, nossos projetos passam a ser mais limpos e claros, além de mais usáveis e converterem melhor. Se você usar uma escala variada, você pode obter ótimos projetos bem rápido!
Volte para ler o artigo final dessa série, onde aprenderemos como modelar uma página através de alinhamento e dimensionamento, além de aplicar o espaço em branco para dar mais clareza aos projetos.
