The Golden Ratio: The Ultimate Guide to Understanding and Use it

Designers em todos os lugares devem saber sobre a Razão Áurea. É uma proporção matemática que cria designs esteticamente agradáveis. Como a Proporção Áurea existe com tanta frequência na natureza, não é uma surpresa que seus resultados tenham uma aparência natural.

Foto de Bogomil Mihaylov no Unsplash

A Proporção Áurea também tem vários outros nomes:

• Proporção Divina
• Golden Mean
• Seção Dourada
• Phi (letra grega)

A matemática por trás da proporção áurea

Vou explicar a matemática da Proporção Áurea da forma mais simples possível e sem entrar em detalhes que você realmente não precisa saber. Se você consegue acompanhar a matemática, ótimo. Mas se você não puder, tudo bem - você ainda poderá usar o conceito em seus projetos.

Para entender a Razão Áurea, você deve primeiro entender o Retângulo Dourado

O Retângulo Dourado é um grande retângulo que possui um quadrado dentro dele. Os lados do quadrado são iguais ao comprimento mais curto do retângulo:

Fonte: Wikipedia

A Proporção Áurea é um número que é (meio que) igual a 1,618, assim como pi é aproximadamente igual a 3,14, mas não exatamente.

Você pega uma linha e a divide em duas partes - uma parte longa (a) e uma parte curta (b). Todo o comprimento (a + b) dividido por (a) é igual a (a) dividido por (b). E ambos os números são iguais a 1,618. Portanto, (a + b) dividido por (a) é igual a 1,618, e (a) dividido por (b) também é igual a 1,618.

De volta ao Retângulo Dourado, porque é muito mais fácil de entender

Quando você coloca um quadrado dentro do retângulo, ele cria outro retângulo menor. Ignore as linhas pretas e olhe para as caixas vermelhas e verdes:

O quadrado vermelho tem quatro lados de comprimento igual, e esse comprimento é igual ao comprimento mais curto do retângulo. Ao seccionar esse quadrado, você cria automaticamente outro retângulo menor (delineado em verde). Juntos, eles criam um layout de Proporção Áurea completo e uma base para a Espiral Dourada.

Você também pode fazer um novo retângulo dourado com o retângulo menor, como este que tracei em azul:

Um diagrama de proporção áurea tradicional tem oito retângulos áureos:

E aqui está o menor retângulo dourado, # 8:

Se você começar na parte inferior esquerda e fizer um arco para conectar o lado oposto de cada seção transversal quadrada e retângulo pequeno, você obterá a Espiral Dourada.

A sequência de Fibonacci

A sequência de Fibonacci é muito simples de entender: você começa com zero e 1 e, em seguida, obtém o próximo número somando os dois números anteriores. 0 + 1 = 1, então 1 + 1 = 2, etc. Os primeiros poucos números na sequência são 0, 1, 1, 2, 3, 5, 8, 13, 21, 34.

Se você usar esses números para criar quadrados com essas larguras, poderá criar uma espiral dourada:

Fonte: Math is Fun

Os Círculos Dourados

Às vezes, você verá círculos desenhados nos quadrados em vez de ou além da espiral. Se você desenhar círculos perfeitos nas caixas da sobreposição de Proporção Áurea, eles terão a proporção 1: 1,618 com um círculo adjacente.

Fonte: Departamento Limelight

Os logotipos Pepsi e Twitter usam os círculos dourados:

Fonte: Hybrid Talks

Você já viu isso antes, muito

A natureza está cheia da Razão Áurea. Está na flora, nas conchas, no clima ...

Fonte: Foto de Annie Spratt no Unsplash

Fonte: Foto da NASA no Unsplash

E porque vemos isso com tanta frequência, nossos cérebros preferem. Essa atração inata é o motivo pelo qual é um layout tão poderoso para os designers usarem.

A proporção áurea em arte e design

Às vezes, a Proporção Áurea é super fácil de reconhecer:

Fonte: staceysdetailinginc.com

Às vezes você pensa: “Não tenho ideia do que você está falando ... ah, espere. Agora eu vejo isso. Eu penso."

Fonte: Marketing Insiders

Outras vezes você pode enlouquecer olhando para ele ...

Fonte: Widewalls

... mas se você se concentrar no Retângulo Dourado principal, fica um pouco mais claro:

Vamos dar uma olhada em um exemplo comumente referenciado: o Partenon

Fonte: Creative Bloq

No início, você pode ver isso e pensar: “Isso parece simétrico para mim. Como o que estou procurando se encaixa nessa coisa da Espiral Retângulo Dourado? ”

A Proporção Áurea não é sobre como cada parte de um design se encaixa completamente e apenas nas seções específicas. Se esse fosse o ponto, o lado direito do Partenon seria um grande bloco e o lado esquerdo seria seccionado em blocos menores.

Em vez disso, a proporção é usada para criar harmonia e proporção, e isso pode ser interpretado de algumas maneiras diferentes.

Embora a Proporção Áurea seja baseada na matemática, ela pode ser adaptada de maneiras criativas. No caso do Partenon, a Proporção Áurea determina a altura e a localização dos componentes do projeto. Além disso, existem várias maneiras de colocar diagramas de Proporção Áurea sobre ele:

Fonte: Archinect

Fonte: Esther Sugihto no meio

Fonte: GoldenNumber.net

A Razão Áurea e o Design do Site

Quer você goste de matemática ou sua cabeça esteja prestes a explodir, a Proporção Áurea é um pouco mais fácil de entender em termos de design. Você fez o trabalho pesado. Agora é hora de pegar a sobreposição básica e tornar seus componentes da web perfeitamente agradáveis.

A Proporção Áurea e Layout

Se você deseja um layout de Proporção Áurea perfeito, defina as dimensões como 1: 1,618. Por exemplo, você pode definir a largura em 960 pixels e a altura em 594 pixels. O retângulo dourado tem 594 pixels de cada lado e o retângulo ocupa o resto do layout (594 x 366).

Calculadora Sopa tem uma calculadora útil de Razão Áurea onde você pode definir qualquer termo (A, B ou A + B) para encontrar os valores de Razão Áurea corretos.

Ou você pode simplesmente usar esse tipo de layout de duas colunas, em que uma coluna é um pouco mais larga do que a outra. É organizado e mostra claramente a hierarquia.

Fonte: National Geographic

Eu uso isso no meu site porque a página inicial é uma coleção das postagens do meu blog e sinto que este é um dos layouts mais reconhecidos para blogs:

Na minha opinião, porém, o layout simétrico que usamos em Elegant Themes é mais moderno:

A proporção áurea e espaçamento

O Golden Ratio pode ajudá-lo a determinar onde colocar os elementos do seu design, as proporções a serem usadas e onde deixar espaço negativo. Aqui está um exemplo simples, e você quase pode ver a sobreposição da Proporção Áurea sem precisar colocá-la no topo:

Fonte: Digiarts 2011

Aqui está o que parece quando eu aplico a Espiral Dourada no Photoshop:

Novamente, a Proporção Áurea é baseada na matemática, mas quando se trata de aplicá-la ao design, ela não é perfeita. Esse desenho não é criado em um Retângulo Dourado, então a Espiral Dourada está fora de proporções normais. No entanto, você pode ver como isso pode orientar um designer a escolher onde colocar o maior elemento do design, bem como os menores elementos e espaço negativo.

Você também pode criar uma camada da sobreposição de Proporção Áurea para aplicá-la a diferentes elementos do mesmo design:

Fonte: Branding by Lemongraphic. Exemplo do Canva.

A proporção áurea e conteúdo

Quando você pensa no layout e no espaçamento do Golden Ratio, pode começar a decidir onde colocar o conteúdo em seu site.

Vamos dar uma olhada no site da National Geographic novamente, desta vez com a sobreposição de Golden Ratio do Canva:

O layout é dividido para que o conteúdo seja alinhado ao longo da linha central da espiral. À esquerda, há um grande bloco de conteúdo. À direita, o conteúdo fica mais denso e há muito mais espaço negativo. Em direção ao centro da espiral, você verá um segundo logotipo da National Geographic - não há melhor maneira de impulsionar a marca doméstica do que colocá-lo onde os olhos vão naturalmente.

Aqui está um ótimo exemplo de como a Espiral Dourada pode guiar seus olhos por um design, mesmo além de seu componente principal. Isso é útil se você tiver muito conteúdo para colocar em uma página. Você também notará que mesmo com um design tão compacto e detalhado, ainda há espaço negativo nele.

Fonte: Workshop Design by Helms. Exemplo do Canva.

Menção Honrosa: A Proporção Áurea e Imagens

A Proporção Áurea também é usada na composição da fotografia. Em vez de criar uma Espiral Dourada, a Proporção Áurea divide a imagem em seis blocos. A mesma Razão Áurea é usada neste tipo de grade: as larguras e alturas das seções são 1 ou 0,618.

Fonte: Canva

Em seguida, você usa os cruzamentos para compor a cena. O objetivo é colocar um assunto ou parte principal de um assunto em uma das linhas que se cruzam - o assunto não deve ser centralizado e alguns blocos devem ser deixados vazios (na maioria dos casos, pelo menos - macrofotografia e retratos em close-up irá preencher quase todo o quadro). Ao fazer isso, você cria um retrato mais interessante do que se o assunto estivesse centralizado.

Uma maneira muito mais simples e acessível de seguir essa regra é usar a grade da Regra dos Terços, que provavelmente você tem na câmera embutida do seu telefone ou DSLR.

Aqui está uma foto que tirei do filho do meu primo. Eu coloquei a grade da Regra dos Terceiros sobre ele para mostrar onde o assunto preenche e não preenche o quadro.

Além disso, veja como a Espiral Dourada envolve quase perfeitamente o assunto:

A proporção áurea difere da regra dos terços porque a grade da regra dos terços tem seções com comprimentos e larguras iguais. No entanto, é tão parecido - e muito mais fácil - que é o que os fotógrafos normalmente usam ao compor ou editar uma foto.

Empacotando

O Golden Ratio pode ser usado no estado em que se encontra ou adaptado aos seus propósitos e ajustado para o tamanho - a matemática pode ter regras rígidas e rápidas, mas a criatividade não. Embora você possa usar a Proporção Áurea desde o início para guiar seu design, também pode usá-la depois de começar a projetar para fazer ajustes e melhorias. O objetivo é fazer com que a proporção o guie, não forçar o encaixe de um design nela.

Pronto para brincar ainda mais com o layout do seu site? Confira nosso artigo sobre como usar as novas opções de altura e largura do Divi para criar um design responsivo.