Inscreva-se para receber novidades em seu E-mail

Design com Proporção Áurea: Por quê usar?

Mario Piva

Bacharel em Design Gráfico pela Faculdade SATC (Criciúma/SC), 21 anos de idade e atuo há quase uma década na indústria gráfica. PhD em desmontar coisas, formas e objetos. Acredito que o caminho da felicidade é feito de aipim frito e suco de laranja (ainda vou provar isso!)

Proporção áurea é um assunto que todo designer deveria saber. Nesse post, vamos descomplicá-la e explicar para você como ela surgiu, o que ela é, de fato, e como você pode usá-la a seu favor. Sem lero-lero.

Em um grosso modo, essa proporção se refere à uma relação matemática comum encontrada na natureza, e que pode ser usada para criar composições agradáveis no design. Nós a chamamos de Proporção Áurea! Embora você também pode encontrá-la pesquisando por Regra de Ouro, ou Sequência de Fibonacci, ou a letra grega Phi, enfim.

mova-design-capa-aurea

O que é a Proporção Áurea?

Com base na Seqüência de Fibonacci (aquela do filme O Código Da Vinci ), a Razão Áurea descreve a relação entre duas proporções.

Aprofundando um pouco mais, os então chamados Números de Fibonacci – assim como muitos elementos encontrados na natureza – seguem a relação de 1:1,61, e é isso que nos referimos como a Razão Áurea. Como é uma forma tão comum e presente na nossa natureza, ela nos soa muito agradável aos olhos quando usamos essa mesma proporção nos trabalho de design.

mova-design-fibonaccimova-design-fibonacci-caracol

 

 

 

 

 

Alguns dizem que esta mesma sequência de números e proporções foi utilizada por Deus na criação da terra, já que ela está presente em tantos lugares da natureza.

Não entendeu? Então, passo a palavra ao meu amigo Pato Donald, para que lhe  esclareça um pouco essas ideias

Sacou a jogada? Melhor, né. Pato Donald é o cara!

Então, acredita-se que a Razão Áurea vem sendo usada há pelo menos 4.000 anos – mas pode ser ainda mais do que isso – algumas pessoas argumentam que os egípcios antigos usaram o princípio para a construção das pirâmides. Em tempos mais contemporâneos, esses números podem ser observados na música, na arte, e no design ao seu redor, por exemplo.

Exemplos

O uso da Razão Áurea é bem documentado na arte e no design ao longo da história, e esta pode ser vista em praticamente tudo da arquitetura feita pelos grandes mestres. Através da aplicação de uma metodologia de trabalho semelhante, você pode trazer as mesmas sensibilidades para o seu próprio trabalho. Aqui estão apenas alguns exemplos para inspirá-lo

O Parthenon

mova-design-parthenon

Como Donald mostrou no início, o Parthenon foi pensado e projetado seguindo a sequência dourada. Inclusive suas janelas e esculturas!

A última Ceia

ultima-ceia-mova-designLeonardo da Vinci , assim como muitos outros artistas ao longo dos tempos , fez uso extensivo da Proporção Áurea para criar composições agradáveis. Na última ceia , os números são dispostos nos dois terços inferiores (a maior das duas partes dessa proporção) , e a posição de Jesus está perfeitamente traçada, apenas organizando retângulos dourados em toda a tela.

Natureza

Há também inúmeros exemplos dessa relação dourada na natureza. Você pode observar a proporção ao seu redor. Flores, conchas do mar, abacaxi, ou até mesmo os favos de mel, todos apresentam a mesma relação de princípio no seu make-up. Agora imagine aplicar essa mesma regra em seu projeto! Se você souber usar, e você vai saber pois vamos ensinar, fica LINDÃO!

Fotografia

mova-design-fotografia

Quando aplicada à fotografia, esta proporção pode produzir composições esteticamente agradáveis, ​que funcionam como ímãs para o sub-consciente humano. Quando você toma o ponto aúreo da Relação de Fibonnaci e o recria quatro vezes em uma grade, você recebe o que parece ser uma regra da grade terços (o que alguns smartphones já possuem em suas câmeras). No entanto, após uma análise mais profunda você vai ver que essa grade não é uma divisão exata do quadro em três pedaços. Em vez de uma grade de 3 peças, que no caso seriam 1 + 1 + 1 = quadro, você tem uma grade que vai de 1 + 1 = 0,618 + quadro. Doido né?

mova-design-fotografia-aurea

O Homem Vitruviano

vitruviano-mova-design

As Pirâmides do Egito

piramide-mova-design

A Bíblia de Gutenberg
Gutenberg_bible_Old_Testament_Epistle_of_St_Jerome

A Monalisa

monalisa-mova-design

O símbolo da Apple

apple-fibanacci

Muitas são as aplicações dessa sequência, e o que não nos falta são bons exemplos de onde isso já foi ou ainda é aplicado. Mas então, agora que você já entendeu o que é, vamos produzir o nosso retângulo áureo? É simples! E simplificaremos em 5 passos, saca só:

Construindo um Retângulo Áureo

01 – Construa um quadrado.

mova-aureo-01

Seja com lápis, palito de fósforo, no Corel ou no Illustrator. Isso não importa! O que importa, é que ele seja um quadrado perfeito. Esse quadrado formará o comprimento do “lado curto” do retângulo.

 

02 – Divida esse quadrado ao meio

mova-aureo-02

Divida o seu quadrado ao meio com uma linha vertical, deixando-o com dois retângulos.

 

03 – Desenhe uma linha perpendicular

mova-aureo-04

No retângulo da direita, desenhe uma linha do canto inferior esquerdo para o canto superior direito.

 

04 – Gire esta linha até a base do retângulo

mova-aureo-03

05 – Crie um novo retângulo

mova-aureo-05

Crie um retângulo usando a nova linha horizontal, usando o retângulo original como guia.

Finish him!

 

Como usar a razão áurea no meu design?

 

Usar essa razão áurea que você acabou de criar é mais simples do que você imagina! Há um par de truques rápidos que você pode usar para inseri-la em seus layouts, ou você pode planejar um pouco mais e abraçar plenamente o conceito! Você quem sabe.

A maneira rápida

Se você alguma vez se deparar com a ‘regra dos terços’, é sinal de que você estará familiarizado com a idéia que, dividindo uma área em três partes iguais tanto na vertical como na horizontal, a intersecção das linhas irá fornecer um ponto focal natural para a forma (tipo na fotografia). Algo agradável de ser observado, no caso. Uma espécie de equilíbrio visual.

Fotógrafos são ensinados a posicionar seu assunto chave em uma dessas linhas de interseção para alcançar uma composição agradável, como já falamos, e o mesmo princípio pode ser usado em seus layouts de páginas web, maquetes ou projetos de cartaz .

Embora a regra dos terços pode ser aplicada à qualquer forma, se você aplicá-la em um retângulo com proporções de aproximadamente 1:1,6, você começa muito perto de um retângulo de Ouro, o que torna a composição ainda mais agradável aos olhos.

A maneira completa

Se você deseja ir mais além e implementar essa regra de ouro em seu projeto , você pode fazê-la facilmente, garantindo que a relação entre sua área de conteúdo e a barra lateral (em um site, por exemplo) adere à proporção de 1:1,61.

Não há nenhum problema em arredondar para cima ou para baixo por um ou dois pontos. Por isso, se você tem uma área de conteúdo de 640px e uma barra lateral de 400px, estas irão coincidir com a regra de ouro suficientemente bem para trabalhar, mesmo que seja na verdade, uma proporção de 1:1,6 .

useratiowebdesign

Claro, você também pode subdividir as áreas de conteúdo e da barra lateral se utilizar a mesma relação. O mesmo se aplica entre o cabeçalho e a área de conteúdo, rodapé e navegação, enfim, tudo isso também pode ser projetado usando a mesma relação dourada básica.

page-anatomy

 

Ferramentas

 

GoldenRATIO (Mac) 

goldenapp

O GoldenRATIO é um aplicativo que fornece uma maneira fácil de projetar websites, interfaces e layouts de acordo com a proporção áurea. Disponível apenas na App Store Mac por US$ 2,99, o aplicativo apresenta uma calculadora embutida com feedback visual, um recurso ‘favoritos’ que armazena a sua posição da tela,algumas configurações para tarefas repetitivas, e um modo ” Clique-thru “, que significa que você pode usá-lo como uma sobreposição em Photoshop, e ainda trabalhar na tela. Doido bagarai!

 

Golden Ratio Typography Calculator 

typography-calculator-mova-design

Esta calculadora feita pela Pearsonified ajuda a criar a tipografia perfeita para o seu site em conformidade com os princípios da proporção áurea. Basta digitar um tamanho de fonte, ou uma largura de conteúdo, ou ambos, para o campo no site e clicar no botão “Set my type!”. E se você pretende otimizar para caracteres por linha , você pode inserir um valor de CPL (caracteres por linha) opcional. Animal!

Finalizando

Essa é apenas uma das inúmeras ferramentas presentes em nosso cotidiano, que muitos ainda nem ouviram falar. Há vários e vários métodos de sairmos da caixa, e a matemática neste caso, nos provou o quanto pode servir de inspiração e referência para o desenvolvimento dos nossos projetos.

Se você quiser se aprofundar ainda mais nesse assunto, recomendo a leitura do livro “Planejamento Visual Gráfico”, escrito por Milton Ribeiro, e que você pode adquirir clicando aqui. 

E você, já aplicou a regra de ouro em algum de seus trabalhos? Deixe um comentário contando a história pra gente! E surgir alguma dúvida, sinta-se à vontade para nos questionar! O MOVA adora esse tipo de interação.

Grande abraço! Nos vemos em breve.

Mova-se!

Referências: Wikipedia, Smashing e principalmente o livro do Milton, que citei acima.

Gostou do que leu?

Cadastre-se para receber novos conteúdos do Blog!


Bacharel em Design Gráfico pela Faculdade SATC (Criciúma/SC), 21 anos de idade e atuo há quase uma década na indústria gráfica. PhD em desmontar coisas, formas e objetos. Acredito que o caminho da felicidade é feito de aipim frito e suco de laranja (ainda vou provar isso!)

© 2016 Mova Design. Todos os Direitos Reservados.

Top