Matemática é linda. Parece um pouco estranho? Eu tinha certeza disso quando comecei a projetar. A matemática é tão chata. Você pode se surpreender ao descobrir que os mais belos designs, obras de arte, objetos e até mesmo pessoas têm algo matemático em comum. Principalmente a proporção áurea, também conhecida como proporção divina, representada pela letra grega Φ (phi). Este tutorial irá detalhar o layout de um site e como dividi-lo em proporções áureas.
Esqueleto da página da web
Estes são os principais elementos das páginas da web. Existem muitas maneiras diferentes de organizá-los, mas esse layout talvez seja o mais usado.
Recipiente
Todas as páginas da web usam um contêiner, principalmente para o mesmo propósito: conter alguns elementos da página. No entanto, esse método é implementado de forma diferente. Por exemplo, a tag body ou o div mais comumente usado. Até mesmo a tabela que era comumente usada no passado (não use a tabela como contêiner, esse é um método quebrado). Pense em um contêiner como a parede externa da sua casa, que contém os quartos, a cozinha, a sala, etc.
Tipo de contêiner:
Líquido: Preencha de acordo com a largura do navegador.
Corrigido: a largura especificada não mudará de acordo com a largura do navegador.
Cabeçalho
O cabeçalho não é realmente um elemento específico, embora algumas pessoas argumentem que é. Ele é usado mais no nível superior da página da web, onde você coloca seu logotipo, barra de navegação e slogan. Muitas pessoas preferem colocar esses elementos em uma div para facilitar a separação do estilo e do conteúdo da página. O cabeçalho será considerado um container, portanto possui dois tipos de opções, sendo elas líquida ou fixa citadas acima.
Logotipo
Seu logotipo é sua identidade e marca. O método mais comumente usado é colocar o logotipo no canto superior esquerdo do cabeçalho. Nosso hábito de leitura é da esquerda para a direita e de cima para baixo, por isso seu diário deve ser colocado onde os visitantes possam vê-lo à primeira vista.
Navegação
A navegação na página é um dos elementos mais importantes que seus visitantes precisam para usar seu site. Deve ser fácil de encontrar e usar, e é por isso que a maioria das pessoas o coloca na seção do cabeçalho, pelo menos próximo ao topo da página.
tipo de navegação:
Horizontal: exibição horizontal, chamada 'navegação'
Vertical: exibição vertical, chamada 'menu'
Conteúdo principal
Todos (deveriam) saber que o conteúdo é rei! Quando as pessoas visitam o seu site, é o elemento principal que desejam ver. Deve ser o ponto focal da página web, para que os visitantes possam encontrar rapidamente o que procuram.
Barra lateral
A barra lateral é um elemento que coloca seu conteúdo secundário, como alguns anúncios, busca no site, links de assinatura (RSS, Twitter, Email, etc.), métodos de contato, etc. Este elemento não é obrigatório, embora muitos sites o utilizem. Ele é colocado principalmente à direita, mas você também pode colocá-lo à esquerda ou em ambos os lados, desde que não atrapalhe a navegação no conteúdo principal. Os sites usam navegação horizontal ou vertical, e as barras laterais costumam usar navegação vertical.
Rodapé
Sempre há um rodapé no final de uma página da web para que o visitante saiba que ele chegou ao final da sua página. Assim como o cabeçalho, o rodapé não é um elemento especial. Inclua direitos autorais, aviso legal e informações de contato principais no rodapé. É uma boa ideia incluir alguns links importantes, como página inicial, página de contato, etc. Alguns sites utilizam esta área para fornecer materiais relevantes ou outras informações importantes.
"Espaço em branco"
Você pode ter um forte desejo de preencher os espaços em branco nestas páginas, mas por favor não o faça. O “espaço em branco” também é muito importante. Você pode ver como o site NetTuts usa efetivamente os espaços em branco para criar equilíbrio na página e dar uma boa sensação.
O texto acima é o esqueleto da página da web. Agora vamos ver como dividir esses elementos em seções douradas.
A Seção Áurea e o Uso de Grades
Lembra quando eu disse que a matemática era linda? Achamos que o apelo visual é baseado em proporções (por exemplo, a seção áurea). Durante milhares de anos, artistas, designers, arquitetos, etc. usaram, consciente ou inconscientemente, uma proporção comum para aumentar a beleza do seu trabalho. O que é esse número mágico 1,62 (na verdade 1,618...) Não vou te contar a origem desse número, mas vou te dizer como usá-lo.
Usar a seção áurea é muito simples. Por exemplo, você pode querer encontrar a largura do conteúdo principal e das listas da barra lateral. Você pegará a largura total da sua área de conteúdo e dividirá por 1,62. Isso dá 555,55px. Não precisamos ser tão precisos, então usaremos apenas 555px. Agora você sabe que seu elemento de conteúdo principal tem 555px de largura e sua barra lateral tem 345px. Viu como é fácil?!
Mas espere, a diversão não para por aí! Você também pode aplicar a seção áurea na largura e na altura de outros elementos.
Usando grades
Se você for como a maioria das pessoas, não vai querer ter que segurar uma calculadora para calcular a proporção áurea todas as vezes. Então a maneira mais fácil é usar a grade. Então o que você precisa fazer é dividir sua largura ou altura em terços.
Para produzir uma grade mais detalhada, continue dividindo-a em terços. Se você ler o artigo anterior "Contato íntimo com a estrutura CSS do Blueprint", verá que a estrutura CSS do Blueprint usa um sistema de grade detalhado. O design da grade não apenas é mais fácil e rápido, mas também cria um layout bonito. Se você ainda não usou o design de grade, esta é uma ótima oportunidade para experimentá-lo. Você pode baixar modelos de grade para fogos de artifício, photoshops ou outro software em http://960.gs.
Como você pode ver, o NetTuts segue muito bem a proporção áurea. O terço superior da página é novamente dividido em terços, muito próximo da proporção áurea. Não admira que o design do NetTuts seja tão atraente!
Se você for fazer um novo design, recomendo fortemente que você encontre alguns sites populares e revise seus layouts e como eles aplicam a proporção áurea e a grade. Em seguida, reserve algum tempo para praticar o uso da seção áurea e da grade em seus layouts.