Category: número de ouro

Proporção Áurea Design – Guia sobre a aplicação da Número de Ouro no Design

Proporção Áurea Design – Guia sobre a aplicação da Número de Ouro no Design

Eae, tudo bele?
Neste artigo trago um assunto muito falado no meio criativo: a proporção áurea design.
Tem gente que afirma que ela faz toda a diferença em projeto, enquanto outras pessoas dizem que é uma falácia esse tal número.
A proporção áurea no design pode ser útil sim, mas o seu bom ou mal uso, vai depender diretamente do designer que está lidando com a proporção áurea.
O fato é que se você trabalha com Design é bom conhecê-lo. Por isso hoje vamos conversar sobre proporção áurea. A ideia deste artigo é apresentar o razão de ouro, passando desde a história até os dias atuais. Tudo isso para você ter o conhecer, aprender e tirar as suas próprias conclusões sobre para caso julgue necessário, utilizar a proporção áurea em seus projetos.
E antes iniciar com o conteúdo, quero aproveitar a oportunidade para te avisar que estamos com inscrições abertas para o nosso curso de Fundamentos do Design Visual. O curso Fundamentos do Design Visual é focado nos fundamentos, conceitos e princípios do Design Visual. Clique no link abaixo e conheça o nosso curso.
Curso Fundamentos do Design Visual
Saiba mais https://www.fundamentosdodesign.com.br

Vamos nessa?
Neste artigo você verá:

O que é proporção áurea 
De onde vem a proporção áurea
Onde ela é aplicada
O retângulo Áureo
Curiosidades sobre a proporção áurea
Mitos e Verdades sobre a Proporção Áurea

O que é proporção áurea?
Proporção Áurea, Número de Ouro, Divina proporção, Razão áurea, Golden Ratio… Esses são os nomes dados a proporção entre dois segmentos ou duas medidas, que resulta em  1,618.
(a+b)/a = b/a = 1.618033987 Φ
Ela é denotada pela letra grega Φ (PHI), em homenagem ao escultor Phideas (Fídias) da Grécia antiga, que teria utilizada para conceber o templo Parthenon da Deusa Grega Atenas.

Desde a antiguidade a proporção áurea vem sendo utilizada (teoricamente) nas artes, na arquitetura e claro que também no Design. Alguns afirmam que é possível encontrá-la também em outros segmentos como a nona sinfonia de Beethoven (que teria sido baseada nessa razão), em peças maçônicas, em ações da bolsa, na proporção do corpo humano e da natureza. Também já foi citada em literaturas da cultura pop, como por exemplo, o Livro Código da Vinci.
De onde vem a proporção áurea
Pitágoras, o pai da matemática, foi o primeiro que descreveu sobre a proporção áurea. A mais de 500 a.C., ele utilizava essa proporção para explicar a harmonia, o cosmo e alma.
A partir daí essa proporção começou a ser utilizada para se construir templos, pirâmides e palácios. E não somente Pitágoras, que quando descobriu tal proporção em  um pentagrama começou a utilizá-lo como marca da Irmandade Pitagórica, outros grandes nomes também adoravam tal proporção como Platão, Phidias (como já citado aqui)  e Euclides que mencionou a razão na sua obra Os Elementos.

Já na idade média o matemático Leonardo Fibonacci (ou Leonardo Pisa) propôs no século XIII, uma sequência numérica composta pelos números:
0,1,1,2,3,5,8,13,21,34,55,89,144,233,377,610,987,1597,2584,4181…
Essa  sequência, que mais tarde seria conhecida como sequência de Fibonacci, continua uma lei simples de composição:
Determinando os dois primeiros elementos como 0 e 1, cada elemento seguinte é obtido somando-se os dois anteriores.
Por exemplo: 1+1=2, 2+1=3, 3+2=5 e assim sucessivamente.
Com certeza, nenhuma sequência foi tão estudada quanto a de Fibonacci. Também nenhuma teve tantas aplicações distintas. Podemos encontrá-la como na Arquitetura, Arte, Design, Biologia, entre outras…
E o motivo dessa sequência ser tão utilizada é justamente a proporção áurea. A razão entre dois números consecutivos de qualquer par da sequência é  muito próxima à proporção áurea. 1,618. E quanto maior são os pares, mais próximos de 1,618 a razão é.
Veja:
3 /5 = 1,666.
13/ 21= 1,625.
144 / 233 =1,618
Assista o vídeo a seguir para entender melhor:

Onde a Proporção Áurea é aplicada?
Existem vários artistas que ao longo tempo utilizaram o número de ouro em suas obras.
Além dos Gregos (já citados aqui) alguns estudiosos apontam que os antigos egípcios utilizaram a proporção áurea para construir as Pirâmides.
Mas ela ganhou força após o livro “De Divina Proportione”, do monge italiano Luca Pacioli no século XVI. Pacioli era amigo íntimo de Leonardo da Vinci, por isso Da Vinci criou as ilustrações desse livro.

Por causa dessa participação de Da Vinci o livro ganhou grandes “proporções” (grandes proporções…proporção áurea… Entendeu, né? :P).
Várias teorias de que Da Vinci teria utilizado tal proporção em suas artes foram apontadas, como nos quadros “Mona lisa” e “A Última Ceia” e no desenho do  “Homem Vitruviano”.

Desde então a proporção áurea teria sido utilizado por vários artistas da era Renascentista, no ímpeto de alcançar mais beleza e harmonia em suas obras.
Mas a sua aplicação não se limita somente a obras de arte. Muitos apontam que sua abrangência é universal, e que ela está na natureza, fauna e flora, no corpo humano, em moléculas de DNA e até mesmo no espaço.
Você já deve ter visto na internet, ou algum documentário na tv fechada, imagens de conchas de animais marinhos, como as dos caracóis, mostrando uma proporção perfeita em espiral.

Hoje em dia a mais famosa aplicação da proporção áurea é através do “retângulo áureo”.
Artistas plásticos, pintores e fotógrafos costumam utilizá-la, diretamente ou de forma derivada como no caso da regra dos terços, em suas obras.
Designers também utilizam tal ferramenta para criar identidades visuais, cartazes, livros e até mesmo layouts de websites.

O Retângulo Áureo
Retângulo áureo, ou retângulo de ouro, é um retângulo oriundo de um quadrado perfeito.
Para construir o retângulo, basta seguir os passos:

Crie um quadrado;
Divida esse quadrado ao meio;
Crie uma linha perpendicular do centro até a vértice do quadrado;
Gire esta linha até a base do retângulo (como se tivesse deitando essa linha para a base do quadrado);
Desenhe um retângulo partindo dessa base.

Falando assim pode parecer difícil, mas veja o  vídeo a seguir como é fácil obtê-lo:

No Adobe Illustrator existe um jeito muito simples de construir um retângulo áureo. Basta criar um quadrado perfeito  é multiplicar a largura do quadrado por 1,618.
O retângulo áureo é uma das formas, provavelmente a mais famosa, de se trabalhar com o número de ouro. E existem outros jeitos de se conseguir um retângulo áureo.
Existem algumas ferramentas na internet para se alcançar tal proporção como
Golden Ratio Typography Calculator  e a GoldenRATIO . Também existem compassos para o desenho a mão.
Mais curiosidades sobre a proporção áurea
No século XIX, o psicólogo alemão, Gustav Fechner, realizou uma pesquisa com vários formato de retângulos. O resultado mostrou que a maioria das pessoas preferiram um determinado retângulo.
O  retângulo vencedor era o que tinha a razão entre suas medidas muito próxima da razão áurea.  Por esse motivo ele ficou conhecido como retângulo áureo. Apesar do resultado não existem dados concretos e comprovados dessa pesquisa.
Além disso existem outras coincidências (ou não) apontadas por estudiosos e amantes da razão:

 Os espirais de um caracol aumentam de tamanho em uma proporção de 1,618.
As espirais das sementes de um girassol aumentam o tamanho em uma proporção de 1,618.
As folhas de uma árvore diminui  à medida que subimos na proporção de 1,618.
 A proporção de abelhas fêmeas em relação a abelhas machos numa colmeia é de 1,618.
No corpo humano, se  dividirmos a altura do corpo  com distância entre o umbigo até o chão, encontraremos o número de ouro
As estrelas diante de um astro principal, se distribuem numa espiral que segue uma proporção de 1,618.

Mitos e Verdades sobre o Número de Ouro
A proporção áurea é um assunto polêmico: tem gente que ama tem que gente que odeia. Uns afirmam que utilizar tal proporção pode tornar melhor o seu trabalho, outros afirmam que o assunto é uma falácia e que tudo isso é invenção da mente humana,  pois somos programados para ver padrões e buscar significado em tudo.
A seguir segue minha opinião (óbvio que não sou dono da verdade, então sem “mimimi”, Galucho) sobre o assunto sobre determinadas dúvidas.
Proporção Áurea vai deixar o meu projeto mais bonito?
Não necessariamente.  A proporção áurea design pode ser utilizada com uma ferramenta como  outra qualquer para auxiliar o seu trabalho. De forma nenhuma ela será responsável integral pelo sucesso do seu projeto.
Eu preciso utilizar o número de ouro em meus projetos? Sou menos Designer por não utilizá-lo?
Não. Você pode utilizá-lo como uma ferramenta, um grid, para o seu projeto. Mas caso não queira usar ou não encontre necessidade, não há mal nenhum também. Existem vários outros grids que você pode utilizar ou até mesmo criar. Se você quiser saber mais sobre grids clique aqui.
Todas essas aplicações da razão áurea que vejo na internet são verdades?
Não. Muitas são forçadas para “caberem” na proporção. Na verdade a grande maioria são falsas ou suposições que não podem ser comprovadas efetivamente. Até nas obras de Da Vinci existem questionamentos.
Outro fato importante é que o nosso cérebro tende a ver padrões e é muito fácil encontrarmos medidas e proporções que se encaixem com algo que procuramos e acreditamos.

A busca do ser humano pela a “beleza perfeita” é histórica e teorias para se chegar a tal resultado sempre existiram.
O retângulo áureo é o grid mais eficaz que temos no Design?
Não necessariamente. Isso depende muito do projeto, do estilo do Designer, entre outras coisas. Existem vários outros retângulos que você  pode utilizar com o raiz de 2, raiz de 3…
É válido lembrar que não é  necessário que o projeto tenha uma malha geométrica para que seja válido. Claro que pode te ajudar bastante, mas depende de cada um.
Todos os projetos que vejo na internet que utilizam proporção áurea foram projetados com ela desde o início?
Nem todos. Na verdade a grande maioria dos Designers criam o logotipo sem nenhum, ou apenas com simples, grid e/ou linhas de construção. Depois que definiram como será o logo  é a maioria aplica as formas geométricas e também a proporção áurea para deixar o trabalho mais harmônico e também tentar deixá-lo com mais valor.  Alguns Designers na verdade chegam a “forçar a barra” para encaixar o logo em tais malhas.
Raríssimos designers tem a capacidade técnica e perceptiva para primeiro criar as linhas de construção e depois fazer o desenho com base nelas, exceto em caso em que o logo que tem como principal elemento alguma forma geométrica.
Eu falo mais sobre isso nesse vídeo abaixo:

Considerações Finais
Proporção áurea realmente é um assunto interessante, principalmente pelas diversas teorias que a circulam. O fato é que a razão PHI realmente existe, porém isso não significa de maneira nenhuma que um projeto de Design para ser coeso, bonito e eficaz precisa necessariamente utilizá-la.
É legal você saber do que se trata e usá-la como ela realmente é: uma ferramenta para a criação. Como tantas outras que temos por aí  e outras que ainda irão surgir. Evite ficar com paranoias e fanatismos sobre o assunto.
Use da razão para decidir se é necessário ou não, fazer uso de tal ferramenta no seu processo criativo.
Se quiser estudar mais sobre proporção áurea design, você pode aprender com:
Livro – Razão Áurea de Mario Livio
Canal do Wallter Mattos.
E você já utilizou a proporção áurea?
Forte abraço.
Até mais.
Referências:
Livro: Geometria do Design
http://www.uel.br/projetos/matessencial/superior/pde/rosania-razao-aurea.pdf
Imagens: Pinterest e Wikipédia.
The post Proporção Áurea Design – Guia sobre a aplicação da Número de Ouro no Design appeared first on Chief of Design.

Proporção Áurea Design – Guia sobre a aplicação da Número de Ouro no Design
Fonte: Chef of Design

Guia sobre Grid

Guia sobre Grid

Eae! Td bele?
Hoje vamos falar de Grids. Este artigo é um verdadeiro Guia sobre Grids.
Grids que são elementos fundamentais no design. Usamos eles para quase tudo: desde um cartão de visita até a criação de um site. Grid é o esqueleto dos nossos projetos auxiliando na criação, e por ter tal importância eu não poderia deixar de falar deles aqui no Chief, né?
Neste artigo vou falar do grid de uma forma mais ampla e que serve tão pro “online quanto pro gráfico”. Minha ideia não é ditar nenhuma regra e sim mostrar as principais possibilidades que temos, bele?
Então vamos começar!!
Neste artigo você descobrirá:

De onde vem os Grids
O que é um Grid
A anatomia de um Grid
A importância de se utilizar um Grid
Como criar um Grid
Como usar um Grid

Um pouco da história dos Grids
A utilização de grids é muita antiga, encontra-se casos de organização através de esquemas retangulares desde os  manuscritos. Com certeza Grids é mais antigo que o próprio design gráfico.

Nos primeiros impressos também encontramos grids definidos. E também é possível encontrar o termo grids na arte, na arquitetura, e na Gestalt.
Mas os grids ganharam mais força mesmo após a revolução industrial através de estudos como os de Theo van Doesburg , de  Jan Tschichold  no livro The New Typography (1928), e do movimento racional da Bauhaus.
Durante a Segunda Guerra, a Súiça, que era neutra, acolheu muitos refugiados intelectuais, incluindo nomes do design como o do próprio Jan Tschichold e Herbert Bayer. E esse grupo de artistas e designers refugiados ajudaram a formalizar e promover o uso da ferramenta que se tornou um ícone do design e do movimento suíço principalmente com seus cartazes famoso até hoje.
E toda essa racionalidade influenciou o design gráfico que a partir, principalmente dos anos 60, começou a usar largamente os Grids.

O que é um Grid
Grid é um elemento técnico-formal formado por um conjunto de linhas auxiliares na vertical e horizontal, ou de retângulos, que proporcionam uma estrutura para construção das nossas peças de comunicação visual, gráfico ou web, auxiliando na ordenação, distribuição, alinhamento e dimensão dos elementos gráficos (imagens, textos, formas).
A função principal do Grid é organizar as informações dentro de uma estrutura. É auxiliar o designer no sentido de conservar um padrão, uma consistência visual do layout  em  todas as suas telas, seja ela web ou gráfico.
A anatomia de um Grid
Cada parte de um grid tem um nome, uma função, por isso vamos conferir agora os elementos que compõem um grid. Vamos lá?
Margens
São os espaços negativos (em branco) entre o limite da página (borda) e o início do Conteúdo. As margens enquadram o conteúdo, auxiliam na questão do manuseio (quando se trata do impresso), dão “respiro” aos textos e imagens proporcionando também descanso dos olhos, além de servirem como um espaço para informações secundárias.

Guias horizontais
São os alinhamentos horizontais. As faixas quebram o espaço horizontalmente. São usadas para orientar os olhos na leitura e também para criar diferentes inícios, pausas, áreas de respiro (em branco) para os textos e imagens.

Colunas
São as estruturas verticais que criam divisões horizontais, delimitam o espaço a ser ocupado pelo conteúdo entre as margens. A largura e quantidade das colunas é indeterminado, depende do projeto e do que o designer definir ser o melhor.

Módulos
São unidades formadas através da junção da coluna com a linha base.

Zonas Especiais
São conjuntos de módulos, que formam uma unidade.

Calhas(gutters)
São os espaços em branco de separação entre colunas e linhas.

Marcadores
São elementos secundários localizados na parte externa (margem), como por exemplo, cabeçalhos, nomes de seções, paginação e etc.

A importância de se utilizar um Grid
Usar um sistema de “grid” permite projetar com mais facilidade, simplicidade, na organização dos elementos gráficos da peça, seja ela um site ou um cartaz.
Grid é tudo de bom, porque:
Podemos mais facilmente determinar o fluxo de leitura que queremos o nosso leitor tenha.
nos ajuda a projetar em proporções harmoniosas balanceando os pesos dos elementos gráficos do layout.
Permite criar peças mais eficazes.
Auxilia a posicionar os elementos com maior precisão.
Mas David, ele vai limitar minha criatividade?
Não!!! Relaxa, Galucho, não tem nada a vê isso.
Grid é usado há muitos anos pelos melhores designers do mundo.
Ele é uma ferramenta de suporte que nos ajuda na construção, no posicionamento dos elementos, etc.
O Grid não é limitador, pelo contrário, ele nos ajuda a dispor melhor o nosso layout.  Como já falei no artigo sobre Gestalt (veja aqui) é importante saber usar com parcimônia fatores variados como contraste, repetição, pregnância, etc. Não é porque você está usando um grid que precisa deixar tudo “alinhado a esquerda”, saka?
Ele será uma diretriz, mas um designer criativo saberá como “quebrar a regra” para atingir seu objetivo de comunicação.
Grid não é limitador para nada, seja um site ou um projeto gráfico, basta saber usar e “quebra-lo” quando precisar. Quebre as regras quando precisar.

Como criar um Grid
Primeiro você precisa saber qual será o suporte: Qual o tamanho da página, qual orientação, quais limitações. (você pode conferir mais sobre isso aqui).
Também precisa saber qual o conteúdo será diagramado e para que será diagramado?
É texto corrido de uma revista ou é uma capa de um livro? É um site portfólio de um fotógrafo com várias imagens grandes ou um portal de notícias com mais texto do que imagens?
A partir daí será possível definir a melhor maneira de organizar o conteúdo através do auxílio do Grid.
Existem várias formas de criar Grids, e o Indesign e o Photoshop (através de GuideGuide) fazem isso automaticamente.
Para web existem muitos Grids prontos (a maioria voltado para criação de websites) como o br.blurb.com, Modular Grid, Gridpak , Bootstrap responsive grid PSD .
E até Grids para a criação de ícone de IOS: Free App Icon Templates, iOS 7 Icon Template, iOS Icons Guidelines.
E você pode e deve criar o seu grid dependendo do projeto. Existem vários modos para isso.
Temos os famosos Grids de Villard e de  Jan Tschichold .

Mas uma dica útil e que serve para quase todos os caso é usar um grid modular através da  Proporção Áurea (um dia ainda escrevo sobre hehe). Existem outros modos de se alcançar essa proporção, mas o modo mais rápido é  dividir o seu layout em 3 partes iguais usando a regra dos terços e achar os quatros pontos áureos no layout.
E depois subdivido esses retângulos para achar mais pontos, subpontos, e assim  ganhamos inúmeras possibilidades.

Tipos de Grids
Existem várias maneiras de utilizarmos os grids. Irei mostrar a seguir os  modelos mais comuns.
Grid de uma coluna
É usado geralmente para textos grandes, corridos, contínuos, como livros, relatórios ,etc. Possui uma estrutura mais simples e basicamente é formado por apenas um bloco de texto.

Grid de duas colunas
Esse grid é mais flexível que a de uma coluna e normalmente é usado para conter grande volume de textos.

Pode ser utilizado para apresentar somente um texto ou textos independentes separados pelas colunas. Pode ser organizado com colunas de larguras idênticas ou diferentes.  Neste caso, normalmente para manter a proporção,  a mais larga tem o dobro da largura da coluna estreita.

Grid de múltiplas colunas
Nos dá mais flexibilidade que as anteriores. Também é usado para grande quantidade de conteúdo e pode utilizar colunas de larguras variadas. Websites, jornais, revistas, tabelas, etc; utilizam bastante esse tipo de grid.

Grid modular
Esse Grid utiliza colunas verticais mais múltiplas guias horizontais.
É geralmente utilizado em projetos mais complexos, como jornais, gráficos, etc. Os módulos proporcionam maior controle do conteúdo e dos espaços menores.

Grid hierárquico
O grid hierárquico é composto por zonas de hierarquias, como o próprio nome já diz, e dividi as telas, impresso ou online, horizontalmente.
É praticamente um grid de colunas horizontais com larguras diferentes.

Os sites na Internet utilizam bastante esse tipo de grid devido a estrutura usual e também ao conteúdo dinâmico e redimensionamento que ocorre por causa dos diferentes tipos de tela.
Mas não é somente para sites, esse grid se adapta às exigências do projeto, então podemos usá-los também em livros, revistas, cartazes, etc.
Como usar um Grid
Existem vários tipos de técnicas para a diagramação.  Irei mostrar as mais aplicadas no mercado.  Todas nós vemos no nosso cotidiano principalmente em revistas, jornais, anúncios e folhetos.  Porém cm o avanço da tecnologia e do design web, também é possível aplicar praticamente todas elas em interfaces web, claro que com alguns nuances hehehe.
Vamos conferir?
Técnica do “L”
Muito utilizado em diversas mídias, principalmente em revistas e jornais. Nessa técnica o posicionamento da mancha de texto, em relação a imagem acaba criando o formato da letra L.
A letra L pode ser usada em ambos os lados e de cabeça para baixo.

Técnica do “U”
O caminho por onde o texto corre, em relação a imagem acaba criando
a forma a letra U.

Técnica do “T”
Também temos a estrutura da letra T. Ela ajuda a dar sentido de continuidade.

Técnica do “H”
Também temos uma estrutura feita com a letra H. Podemos usar tanto o H maiúsculo quanto o minúsculo.

Técnica do “I”
Na estrutura da letra I criamos uma ou mais colunas. Ela é bem dinâmica e e pode conferir mais espaço para as imagens e por vezes até certa elegância ao layout.

Técnica de suporte
A estrutura de suporte é mais monótona e podemos colocar o texto tanto acima quanto abaixo da imagem. Apesar de um pouco “pobre”, na  web funciona bem, principalmente em blogs e sites com bastante texto.

Áreas de respiro e Ritmo de leitura
Precisamos dar atenção para as áreas de respiro que são as áreas brancas do layout que servem para deixa-la mais leve , clean, e menos cansativa. Por vezes, somente adicionando uma área de respiro você consegue modificar totalmente uma peça. Só basta saber usá-lo com coerência.

E também devemos prestar atenção no ritmo de leitura. Olhe o Primeiro exemplo como é confuso saber para onde devo seguir a leitura:

Já nesse outro caso é bem mais fácil saber para onde seguir, né?

É o Designer que determina o ritmo e direcionar a leitura, para onde ele quer que o leitor siga.
Vídeo – Grids no Design – O que é Diagramação? O que são Grids Design?
Abaixo deixo um vídeo que gravei para o meu curso Web Designer PRO sobre grids e diagramação. Nele falo tanto sobre grids para projetos digitais quanto gráficos.

Considerações Finais
Como podemos ver um sistema de grid é uma ferramenta que ajuda, e muitos os designers a organizar a informação de maneira coerente e harmoniosa.
Utilizar um grid com certeza é algo muito vantajoso, e de forma alguma vai prejudicar a sua criação, pelo contrário, vai ajudar para que suas ideias sejam postas de maneira mais clara e seu projeto mais estruturado.
Tudo isso que vimos até nesse post ainda é pouco comparado ao tanto de coisas que se tem para estudar e a para falar sobre Grids.
Então continue estudando aí que eu vou continuar daqui, bele?
E você, utiliza grids em seus layout? Comente abaixo!
Forte abraço.
Até mais.
Referências:
Livro: Crias Grids – 100 Fundamentos de Layout
http://blog.popupdesign.com.br/perguntas-frequentes-sobre-grids/
http://99designs.com/designer-blog/2013/03/26/history-of-the-grid-part-2/
http://www.graphics.com/article-old/brief-history-grids
The post Guia sobre Grid appeared first on Chief of Design.

Guia sobre Grid
Fonte: Chef of Design

Proporção Áurea: Guia sobre o Número de Ouro no Design

Proporção Áurea: Guia sobre o Número de Ouro no Design

Eae, tudo bele? Neste artigo trago um assunto muito falado no meio criativo: a proporção áurea. Tem gente que afirma que ela faz toda a diferença em projeto, enquanto outras pessoas dizem que é uma falácia esse tal número. O fato é que se você trabalha com Design é bom conhecê-lo. Por isso hoje vamos […]
O post Proporção Áurea: Guia sobre o Número de Ouro no Design apareceu primeiro em Chief of Design.

Proporção Áurea: Guia sobre o Número de Ouro no Design
Fonte: Chef of Design