September 2010
Lei dos Terços e Proporção Áurea em Interface Web
Olá, meu nome é Rodrigo da Costa (vejam mais detalhes no meu perfil) e neste artigo vou falar de 2 técnicas muito interessantes para se aplicar em projetos de design:
• Lei dos terços.
• Proporção Áurea.
Primeiramente acho interessante explicar o motivo de aplicar estas técnicas.
Eu já havia estudado proporção áurea tanto por curiosidade como na faculdade MAS nunca havia aplicado efetivamente e com um grande planejamento em um projeto de web.
Eu já havia estudado (e conhecido) a lei dos terços com o Ulysses Farias, o artista para o qual fiz o site usado como estudo neste artigo, MAS, também nunca havia aplicado efetivamente e com um grande planejamento em um projeto de web.
A proporção áurea (ou proporção divina) foi muito utilizada no campo das artes plásticas, arquitetura, etc (Não vou entrar neste mérito, isso é o que mais tem de material na web).
A lei dos terços sempre foi muito utilizada nas artes plásticas e hoje também é muito usada na fotografia.
O site do Ulysses farias é o site pessoal de um artista plástico. Em meio as etapas de pesquisas, referências e brainstorms, decidi que seria um perfeito momento para colocar as teorias em prática para sustentar a arquitetura do site e usufruir do poder destas técnicas. Fiquei pensando o quanto eu estava perdendo por ser omisso à estes conhecimentos teóricos, afinal, Da Vinci, Michelangelo e outros artistas fantásticos, faziam uso de tais técnicas..
Porque então, sabendo disso, ainda insistia em não fazer um estudo adequado? Preguiça? Medo de tentar o “novo”? Refleti bastante e creio que uma das possíveis reais respostas seja: “Não conheço uma referência, em Design de Interface Web, que faça isso!” Eis o motivo pelo qual faço este artigo pra vocês. Pra que vocês vejam que isso existe e que pode ser feito!
Lei dos terços:
A lei dos terços é bastante simples.
Consiste em dividir a área de trabalho em 3 partes horizontais e 3 partes verticais. Os 4 pontos onde ocorrem os cruzamentos das linhas, são considerados pontos fortes, ou seja, elementos próximos a estes pontos, serão atraídos por eles. Existem diversas matérias sobre isso na web, pesquisem! (meu objetivo é aplicar isso em uma interface web, as explicações e exemplos diversos vocês mesmos podem pesquisar).
• Na Prática:
Neste caso dividi o site em duas partes (superior e inferior).
Aplicando a lei dos terços em cada parte o resultado será:
Agora, caros leitores, com um pouco de análise vocês vão notar que existe uma coerência no posicionamento dos elementos que compõem o site, porém, lembrem-se que eu não tinha nada definido ainda, aliás, busquei o recurso da lei dos terços justamente para me auxiliar nestas escolhas.
Vocês não tem acesso ao briefing e as pesquisas que fiz, portanto vou resumir algumas conclusões para este específico caso: Deveria haver destaque em quem é o artista, seus trabalhos e suas atuações.
Parte Superior:
1 - Apresenta ao internauta sobre o que se trata o site e deixa claro que o Ulysses é o artista do qual o site irá se referir ao longo das páginas;
2 - Slide com os trabalhos em destaque;
3 - Fiz questão de demarcar claramente quem é o Artista, já que uma das propostas do site é apoiá-lo em sua carreira e contribuir para torná-lo conhecido;
4 - Agenda: É o ponto fundamental, afinal, tudo converge em saber-se onde encontrar o Ulysses e onde apreciar as obras dele;
Na parte inferior os focos são no formulário de Orçamento e na experiência interativa (dois pontos de foco para cada um). Porém neste artigo vou me focar apenas na página inicial do site e, mais especificamente, na parte superior. Faço isso por dois motivos: O tutorial ficaria ainda mais extenso e, como já disse pra vocês na introdução, essa foi minha primeira experiência prática e efetiva em interface web com estas teorias, ou seja, não sou perito nisso e confesso que o desenvolvimento destes conceitos nas páginas internas não foram avançados como na página inicial. Vamos todos praticando e evoluindo juntos, ok? :)
Em tempo, vou fazer uma explanação: Uma das coisas que levei em conta nesta primeira aplicação é que existe uma diferença básica entre uma pintura em tela ou uma fotografia e um website. Diferente dos dois primeiros, o site quase sempre não é visto inteiro! Se em uma tela ou fotografia nós observamos a peça toda, por outro lado, o site vemos apenas partes dele e usamos do recurso de rolagem de tela para observar o resto.
Somando ao fato de que existem diferentes formatos de dispositivos de acesso a web, o site pode ser acessado em uma baixa resolução como em um Mobile por exemplo. Então existe uma diferença entre a experiência de usuário (”user experience”) dependendo da maneira que ele acessa o site.
Pensando nisso, este foi o motivo pelo qual apliquei a lei dos terços em duas partes (superior e inferior) ao invés de levar em conta o site inteiro. Assim sendo, cuidei de fazer outras análises com a lei dos terços, veja à seguir:
Foco na identificação do site/assunto e nos trabalhos (link e slide).
Foco na agenda (”onde encontrar o Ulysses” e “onde apreciar seus trabalhos”) e “Quem é o Ulysses?”.
Ao juntar todos os traços em uma só imagem, podemos notar claramente onde estão os pontos de atração e, com isso, avaliar se os seus objetos estão dispostos da melhor maneira possível.
Nota: Isso tudo eu defini nos esboços e wireframe. Jamais iria conseguir um bom resultado fazendo isso direto no site. Até porque, se no wireframe algo não está adequado, eu simplesmente estico, remodelo, etc., seria um tremendo desperdício de tempo fazer isso em um layout já caracterizado.
Nota 2: Saber a lei dos terços não é o suficiente. O que foi essencial pra que eu tomasse as diversas decisões de posicionamentos após aplicar a lei dos terços? Um bom briefing, uma boa avaliação desse briefing, dias de pesquisa, esboços e wireframe. Todos estes pontos de estudo, somente para determinar a posição e hierarquia das informações. Para construir o conceito do site, linguagem, cores, enfim, o site em si, existem dezenas de outras disciplinas responsáveis!
——————————————
A Proporção Áurea é um pouco mais complexa que a lei dos terços, porém, nenhum bicho de sete cabeças.
Esta proporção é dita como divina pois foi descoberto que ela pode ser encontrada em praticamente (não tenho conhecimentos pra generalizar essa afirmação - e quem é que tem? rs) tudo na natureza. Pesquisem na web e encontrarão tanto material de estudo - e exemplos - quanto sobre a lei dos terços.
Sintetizando, a proporção divina utiliza a proporção de 1,618 entre um elemento e outro.
Por exemplo:
Se você não entendeu a lógica matemática no modelo acima (dica: ignore o caracol) vou explicar de outra maneira:
“r” é proporcionalmente 1,618 vezes maior que “s”.
Ou melhor dizendo:
A largura do retângulo vermelho é 1,618 vezes maior que a largura do quadrado azul.
Vou iniciar a lógica lá do centro para ficar ainda mais claro:
A altura do vermelho é 1,618 vezes maior que a altura do azul.
A largura do verde é 1,618 vezes maior que a largura do azul/vermelho.
A altura do laranja é 1,618 vezes maior que a altura do azul+vermelho/verde.
A largura do rosa é 1,618 vezes maior que a largura do laranja ou azul/vermelho+verde.
(Entenderam a lógica? Se não entenderam aqui, como disse, tem muito material de estudo pela web, pois o foco deste artigo é a aplicação dos conceitos em um projeto e não a teoria básica.)
Em primeira instância, acredito que: Se “tudo” na natureza é composto sob as regras da Proporção Áurea, e inconscientemente talvez nós tenhamos a percepção de sua existência, aplicar essa lógica artificialmente talvez seja um passo importante para que a composição se torne mais natural (não artificial). Dessa forma - suponho - o layout poderá ser melhor apreciado, entendido e assimilado pelas pessoas, afinal, seria uma tentativa de se afastar do artificial e se aproximar do natural.
Em segunda instância, já citei Da Vinci e Michelangelo como usuários dessa técnica. Se eles, com todo o seu notório talento/técnica/habilidade/conhecimento/etc utilizavam tal técnica, no mínimo, devemos refletir sobre a validade de seu uso.
(Eu continuo estudando sobre o assunto, buscando bibliografia, etc. Eu sei que não sou nenhum expert do sobre o assunto e espero que você que esta lendo minhas experiências, não se contente com o conhecimento que estou compartilhando contigo. Estou sintetizando e simplificando o que sei sobre o assunto e fazendo uma análise de um caso específico. De maneira alguma este artigo irá lhe tornar entendedor do assunto se nem mesmo eu, que estou ensinando, sou um! ESTUDE!)
Agora vocês verão como eu defini as formas seguindo esta proporção de 1 para 1,618:
Fiz um quadrado (área azul) e aumentei a largura seguindo a lógica da proporção de 1,618 simplesmente multiplicando a largura do quadrado 593px por 1,618, resultando em 960px.
Ou sob a mesma lógica, defini que a largura do site é de 960px (defini isso por convenção, é uma boa resolução para usuários de 1024x768) e dividi por 1,618, resultando em 593px.
Para ficar mais fácil de ilustrar, sem valores diversos, no decorrer dos exemplos eu determinei que um lado do elemento possui o valor 1 e o outro lado possui o valor 1,618 (ou seja, esse lado é 1,618 vezes maior que o outro).
Observação: Quando um retângulo é formado pela proporção de 1 por 1,618, ele é chamado de Retângulo de ouro!
Ele pode ser desenhado sem calculadora e sem régua, veja como é simples!
- Desenhe um quadrado;
- Determine o meio de um dos lados do quadrado e faça uma marcação (ponto verde);
- Pegue um barbante e coloque uma ponta na marcação;
- A outra ponta você coloca em um dos cantos opostos ao quadrado (pontos azuis);
- E trace a circunferência como se fosse um compasso;
- Aumente o lado do quadrado (ligue os pontos vermelhos marcados na figura);
- E complete o retângulo!
Este adicional equivale exatamente a 0,618 dos lados do quadrado!
Em diversos pontos apliquei a regra do retângulo de ouro.
(Espero melhorar esse desempenho nos próximos trabalhos!)
As áreas vermelhas são 1,618 vezes mais largas que as áreas verdes.
As áreas vermelhas são 1,618 vezes mais altas que as áreas verdes.
As áreas vermelhas são 1,618 vezes mais altas que as áreas verdes.
A área vermelha é 1,618 vezes mais larga que a área verde.
Observação:
Recomendo fortemente o Illustrator para criar layouts que utilizam essas metodologias. O illustrator permite que você utilize sinais matemáticos (/,*,+ e -) nos próprios campos que indicam a altura e largura dos objetos! Isso facilita muito o processo, afinal, os cálculos podem ser realizados no próprio software.
Se você cria layouts no photoshop, ou outro software, não tem problema, mas considere a possibilidade de gerar o wireframe no illustrator :)
Conclusão:
Observem que foi necessário um longo processo que não durou apenas um dia ou uma semana. Estudei bastante o caso, fiz vários e vários testes, alterações, adaptações, larguei o papel, larguei o PC, voltei a pesquisar,…
Isso não é feito de um dia pro outro e não é simples como parece.
Espero que este artigo sirva para esclarecer um pouco mais do processo projetual de uma peça de design e que os estimule a pesquisar e estudar cada vez mais.
Não se satisfaçam com o senso comum, nem com as receitas, muito menos com os tutoriais, busquem novos horizontes, explorem!
Usei somente o que conheço sobre o assunto e experiências pessoais.
Sou passível de erros. Algumas imagens busquei no google, uma pesquisa super básica e você as encontrará em várias cópias em vários sites…não sei dizer as fontes reais/originais, se você é dono delas, por favor, me comunique e eu ficarei feliz em lhe atribuir o devido crédito!
Dúvidas? Quer debater sobre o assunto? Será um prazer enorme!
Abraços
—-
O Site utilizado como apoio ao artigo sofreu melhorias e pode ser visualizado em: www.ulyssesfarias.com.br
—-
Busquei ser o mais didático possível devido ao público-alvo primário.
Este artigo foi inicialmente escrito para um fórum dedicado em incentivar estudo de qualidade e a busca pela formação aos micreiros e designers iniciantes: www.nfx.com.br
—-
Rodrigo da Costa
rodrigo_freela [at] yahoo.com.br
