Aplicando a Proporção Dourada em Designs Modernos

A página da web ideal é funcional e harmoniosa, mas até mesmo os web designers mais experientes podem ter dificuldade em dizer o que gera um fluxo natural de design. Apesar das teorias de cor e navegação, por vezes, o aspecto mais crucial da estética de uma página web perfeita parece inefável. Nós não sabemos porque isso funciona, mas às vezes isso acontece. Tudo poderia ser por causa de um conceito simples.

Ao sustentar o design do seu site com uma ordem literalmente natural, os espectadores podem achar seu design mais interessante e naturalmente agradável. Este conceito é chamado de proporção áurea, um conceito matemático que a natureza obedece e que nós humanos reconhecemos subconscientemente como uma expressão de perfeição.

The Golden What?

Em termos simples, a proporção áurea (também conhecida como proporção divina ou o meio dourado), é uma constante matemática que aparece repetidamente na natureza e na obra de arte.

Expresso como uma equação, quando uma é maior que b, (a + b) dividido por uma é igual a uma dividido por b (basta olhar para a imagem abaixo), que é igual a cerca de 1,618033987. Esse número, muitas vezes representado pelo caracter grego "phi", é o proporção áurea.

(Fonte da imagem: mathsisfun.com)

A mesma teoria pode ser usada para construir um retângulo, chamado de retângulo dourado. Uma imagem que segue a proporção áurea pode ser colocada dentro de um retângulo que obedece a razão.

(Fonte da imagem: creativeautomaton.com)

Para construir um retângulo dourado, escolha um número que será o comprimento do lado curto do retângulo. Por razões de argumentação, digamos 500 pixels. Multiplique isso por 1,618. O resultado, 809 pixels, é o comprimento do lado longo do seu retângulo. Portanto, um retângulo de 500 pixels por 809 pixels é um retângulo dourado. Obedece a proporção áurea.

Beleza natural

Na verdade, os cientistas não têm certeza do que é a proporção que os humanos gostam tanto. O que eles têm certeza é quanto gostamos. Estudos sugerem que mesmo mudanças minúsculas em uma imagem tornando-a mais verdadeira para a proporção áurea têm grande impacto sobre o cérebro daqueles que procuram.

O rosto humano também segue a razão, e encontramos pessoas cujos rostos são mais verdadeiros para a proporção mais atraente. Conchas, obras clássicas da Renascença, arquitetura da antiguidade e até mesmo partes do corpo humano são proporcionadas com base na relação até os próprios dedos.

(Fonte da imagem: in2visualdesign)

Algo no fundo de nossa mente registra a proporção áurea como bonita, um fato que artistas e arquitetos têm utilizado há milhares de anos, conscientemente ou não. É uma linguagem primordial nas imagens. O resultado é orgânico, intuitivo e parece certo.

Composição Divina

Como você usa esse número mágico na composição da sua página da web? A matemática pode parecer uma caixa sufocante que a sua criatividade vai lutar, mas a proporção áurea é simplesmente uma diretriz útil. Ter uma diretriz básica para construir pode dar a você mais espaço criativo tirando algumas das suposições das proporções e do posicionamento.

Pense nisso como uma ferramenta em vez de uma gaiola. Basicamente, você pode usar a proporção áurea para designar o tamanho e o posicionamento das áreas de conteúdo e das barras laterais. Um layout de largura fixa é o aplicativo mais fácil. Decida o tamanho geral do layout usando o método para criar um retângulo dourado.

Para grades / blocos

O quadrado criado pelas linhas a seria seu bloco de conteúdo. O retângulo menor seria um lado ou barra de navegação. Uma vez que você tenha descoberto o tamanho do seu retângulo, descobrir o quão ampla sua barra de navegação precisa ser é matemática fácil..

Para este exemplo, vamos dizer que seu retângulo é 525 pixels por 850 píxeis.
525 é uma e 850 é (a + b), e b será a largura da sua barra lateral.
Encontrar b, nós simplesmente subtraímos (a + b), que é 325.
Portanto, a largura da sua barra lateral é de 325.

Lembre-se de que seu retângulo pode ser virado para se adequar aos seus propósitos, colocando a barra lateral na parte superior, inferior ou no lado oposto. Enquanto a relação se mantiver, seu design se sentirá harmonioso.

Para texto

Há uma maneira mais rápida de obter as medições que você precisa e pode ser aplicada com conteúdo de texto.

Digamos que seu texto de contexto seja tamanho 12.
Multiplique 12 por 1,618, a proporção áurea, e você terá 19,416.
Um tamanho de texto de cabeçalho de 19 ou 20 seguiria de perto a proporção áurea.

A proporção áurea é uma linguagem que sua mente entende e, ao se comunicar com ela, suas ideias serão mais eficazes. Você não precisa aderir exatamente a isso; o princípio básico é suficiente. Aplicando a proporção aos tamanhos de imagem, a relação entre texto e colocação de imagem e a criação de subdivisões dentro de barras laterais são todos conceitos possíveis.

Trabalho Grid: A Regra dos Terços

Se a matemática não é sua xícara de chá, o conceito da proporção áurea pode ser simplificado. o regra dos terços governa a colocação de pontos de interesse em uma cena. Divida qualquer imagem dada em terços tanto na horizontal como na vertical. Você terá 9 grades.

(Fonte da imagem: digital-photography-school.com)

De acordo com a regra dos terços, os vértices dessas linhas (onde as linhas se cruzam) são o posicionamento ideal para pontos de interesse. É mais provável que as pessoas que digitalizam a página percebam as coisas colocadas perto dos pontos, e a divisão é confortável de ver. Um projeto mais complexo é possível ao dividir esses terços em outros terços.

(Fonte da imagem: net.tutsplus.com)

Em suma, o olho pode ser preguiçoso e não ter que procurar detalhes importantes. Nossos cérebros gostam disto. Imagens principais, caixas de notícias, barras de pesquisa e outros pontos de interesse podem ser aninhados nos vértices ou perto deles. Este pequeno atalho lhe dará um design que é fácil para os olhos e atrai as pessoas para os principais dados.

Colunas e tamanhos de fontes: seqüências de Fibonacci

Outra ferramenta simples para web design ligada à proporção áurea é Números de Fibonacci. Uma seqüência de Fibonacci começa com 0 e 1. Os dois números anteriores são somados para produzir o próximo número na seqüência: 0, 1, 1, 2, 3, 5, 8, 13, 21, 34… e assim por diante.

Um pouco de matemática nos diz que a relação entre os números sequenciais de Fibonacci é surpreendentemente próxima da proporção áurea - divida o número qualquer na seqüência com o número anterior e você terá - você adivinhou - 1,618.

Assim como na proporção áurea, os números de Fibonacci podem ser usados para ditar a relação entre os tamanhos de cabeçalho e conteúdo de texto. Ele também pode ser usado para designar a largura das colunas e é especialmente eficaz em blogs e outros layouts com texto denso. A composição também poderia ser construída sobre o conceito de Fibonacci, onde o tamanho do azulejo é construído usando a seqüência de Fibonacci..

(Fonte da imagem: Wikipedia.org)

Espirais Douradas e Clustering de Conteúdo

Outro método possível de usar tanto a proporção áurea quanto os números de Fibonacci são os espirais douradas e espirais de Fibonacci. Espirais douradas ficam mais largas por um fator igual à razão áurea para cada quarto de volta, e as espirais de Fibonacci são formadas usando telhas de Fibonacci.

As espirais foram usadas em obras de arte desde que os números e proporções em si. A teoria é que áreas de espaço negativo e interesse visual devem caber dentro da espiral. Dentro desse layout gracioso, como na regra dos terços, o olho é naturalmente atraído para o centro da espiral para procurar detalhes..

(Fonte da imagem: fabiovisentin.com)

As espirais podem servir como diretriz para densidade de conteúdo e agrupamento. Eles podem servir de base para a proporção das imagens de cabeçalho do seu site, barras de pesquisa e barras de ferramentas.

Ao escolher a imagem ideal para uma primeira página construída em torno de gráficos grandes, como home pages de lojas e sites de fotografia, você também pode se beneficiar das espirais de ouro e Fibonacci..

Mensagens poderosas são muitas vezes subliminares, e a proporção áurea é um dos anúncios subliminares mais prolíficos da natureza. Ao utilizar a proporção divina, você se dá uma vantagem da lógica natural e da graça orgânica a que todos os seres humanos têm uma atração subconsciente. A proporção áurea é mais uma ferramenta à sua disposição criativa.

Mais leitura:

Aplicando a Proporção Áurea para Layouts e Objetos da Web

Nota do editor: Este post foi escrito por Chris Pentago para Hongkiat.com. Chris é um desenvolvedor web experiente, designer e comerciante da internet interessado em tecnologias-chave para fazer seu negócio on-line funcionar. Você pode encontrá-lo no Twitter.