Seu design mais eficaz: A Proporção Áurea | André Buzzo
contato@andrebuzzo.com.br | (11) 9-8551-3500 | facebook | skype:andrebuzzowebdesign

Seu design mais eficaz: A Proporção Áurea

Publicado na categoria Artigos com 525 visualizações e nenhum comentário …

A proporção áurea é utilizada em designs gráficos de todos os tipos, especialmente quando o objetivo é balancear conteúdo textual pesado. Ele pode ajudar os designers a criar hierarquias e levar os olhos dos usuários de uma área para outra. Veremos alguns exemplos de sites onde os designers fizeram uso de tal recurso.

O QUE É A PROPORÇÃO ÁUREA

A proporção áurea é uma proporção matemática, comumente encontrada na natureza, e utilizada na Teoria do Design Clássica para criar composições balanceadas. É aproximadamente igual a 1.6180, e também é conhecida como “Significado Áureo”, “Seção Áurea”, e é representada pelo símbolo grego “ϕ”.

Um “Retângulo Áureo” é um retângulo cujo comprimento é 1.6180 vezes sua altura. Por exemplo, uma div com a um dos lados contendo 300px deverá ter seu outro lado baseado na seguinte conta: 300×1.6180 = 485px. Dessa maneira, esse seria um RETÂNGULO ÁUREO.

Seu design mais eficaz: A Proporção Áurea - Retângulo Áureo

Se você fizer um retângulo perfeito utilizando a altura desse retângulo, você terá outro RETÂNGULO ÁUREO!

Seu design mais eficaz: A Proporção Áurea - Outro Retângulo Áureo

Você pode continuar efetuando os recortes – somas – no retângulo menor, e você chegará nessa imagem um tanto quanto familiar:

Seu design mais eficaz: A Proporção Áurea - Uma imagem familiar

A SEQUÊNCIA FIBONACCI

A Sequência Fibonacci é similar à Proporção Áurea, mas não é tão exata assim. É uma série de números onde o próximo número na sequência é a soma dos últimos dois. Por exemplo: 0, 1, 1, 2, 3, 5, 8.

Se iniciarmos com um quadrado perfeito, e adicionarmos um próximo, teremos um retângulo:

Então adicionamos outro quadrado que some as medidas dos primeiramente adicionado:

E então, outra e outra vez:

E isso pode ser repetido quantas vezes forem necessárias, retornando o mesmo efeito de nosso RETÂNGULO ÁUREO, mas nesse caso SOMANDO ao invés de DIVIDINDO. Tanta a PROPORÇÃO ÁUREA quanto a SEQUÊNCIA FIBONACCI nos oferece similares apelos proporcionais.

Vamos agora analisar alguns websites onde podemos vê-las em ação.

EXEMPLO #1: YStudio

www.yourlocalstudio.dk

DO QUE SE TRATA ESSE SITE?

“Your Local Studio” é um estúdio de design e desenvolvimento localizado em Copenhagen, Dinamarca. Sua especialidade são conceitos visuais em qualquer formato visando criar experiências que melhorem seus arredores.

COMO ELES UTILIZAM A PROPORÇÃO ÁUREA

Esse website utiliza a PROPORÇÃO ÁREUA em duas de suas três páginas. A página inicial é uma visão conceitual de algumas partes de seus trabalhos. Contudo, quando você visita a página do Estúdio você percebe que eles misturam parte do design web tradicional, com a PROPORÇÃO ÁUREA em formas retangulares quando você rola a página para baixo.

POR QUE É EFICAZ?

Quer se destacar da multidão? Yourlocalstudio (YLS) conquistou esse objetivo utilizando a PROPORÇÃO ÁUREA no design de seu website. Os elementos de seu design oferece um olhar progressivo com seu sistema de grid. Você pode me dizer que hoje em dia tudo parece igual ao Bootstrap. Porém, atente-se para outros e outros sites que parecem conseguir reter sua atenção com uma estruturação mais dinâmica do layout.

EXEMPLO #2: Mashable

DO QUE SE TRATA ESSE SITE?

Mashable é um site sobre notícias; uma fonte de informação, conhecimento e recursos para a “geração conectada”.

COMO ELES UTILIZAM A PROPORÇÃO ÁUREA

Foi utilizado um recurso oferecido pelo UX TRIGGERS (http://www.uxtriggers.com/) para demonstrar como o Mashable utiliza a SEQUÊNCIA FIBONACCI em seu layout. O conteúdo do layout é flexível, com o cabeçalho à esquerda e os links para outras notícias à direita, separados por grades (grids).

PORQUE É EFICAZ?

A PROPORÇÃO ÁUREA é eficaz permitindo que muitos de seus conteúdos sejam orientados por sua tipografia, que se baseia em espaço de respiro (saiba mais aqui). Similarmente, sites com mais conteúdos tendem a parecer mais pesados ao utilizar tradicionais grids de layout, mas o Mashable prova que a PROPORÇÃO ÁUREA pode ser eficaz mesmo quando é invisível.

EXEMPLO #3: JACKSON & KENT

DO QUE SE TRATA ESSE SITE?

Jackson & Clark é um agência de produção web da França. São especialistas em serviços digitais, tais como HTML5, CSS3, Drupal, WordPress, PHP/MYSQL, FLASH, etc.

COMO ELES UTILIZAM A PROPORÇÃO ÁUREA

O screenshot acima demonstra como o layout agrupa trabalhos já prestados aos clientes. Ele também oferece um bloco de conteúdo sobre a agência e a barra de navegação está centralizada à tela. O botão de contato, mostrado abaixo, também utiliza a PROPORÇÃO ÁUREA como um sistema de grid para organizar o conteúdo de uma maneira única.

PORQUE É EFICAZ?

O exemplo incentiva sua navegação através do site e a explorar seu conteúdo horizontalmente. A visão de grades e os tamanhos diferenciados dos blocos e suas formas fazem o conteúdo ser mais atrativo visualmente. Como existem usuários que visitam tais conteúdos usando um desktop (um tablete também pode ser utilizado), existe paginação numérica nos eixos de navegação horizontal. Essa não é apenas uma maneira inovadora para visualizar cada parte de seu conteúdo, mas é uma interface de usuário (UI) inovadora.

CONCLUSÃO

A PROPORÇÃO ÁUREA naturalmente guia os olhos do usuário de uma posição para outra previamente definida. Como conceito, te ajuda a pensar onde colocar determinados conteúdos e usar a hierarquia dos mesmos de maneira eficaz. A combinação de layout, tipografia, cor e princípios gerais irão te ajudar a levar seus designs a outro nível.

Fonte: https://webdesign.tutsplus.com/articles/making-your-web-designs-more-effective-with-the-golden-ratio–cms-23459

Voltar à página anterior!