Usando Marcos Faz Fácil Layout de Página
Um design pode ter impacto. Pode ter estilo. Mas ter isso não é suficiente.
Para funcionar bem, um design precisa ter elementos que exercitem os pontos fortes um do outro. Felizmente, cada parte do conteúdo tem diretrizes inerentes.
Layout, ou a disposição do conteúdo em uma página da web, é fundamental para o sucesso de um design. Entre outras coisas, o layout prioriza o conteúdo para levar as pessoas de um elemento para o outro.
Se feito corretamente, as pessoas estarão tão interessadas no conteúdo que não notarão mais nada.
Continue lendo para mais detalhes e dicas para criar layouts que funcionem em seus designs.
Com o exemplo abaixo, a maioria das pessoas notará a foto ou o título primeiro, depois o texto e finalmente os links.
Eles podem não notar que o título, o texto e o rosto do modelo estão definidos um terço e dois terços na página respectivamente (honrando a regra dos terços), ou que o título e os links estão escritos em cores retiradas dos lábios do modelo, ou curva de seu ombro leva o olho em direção aos apelos à ação.
Texto, foto e título compõem uma composição. Se alguém ficar fora do lugar, a peça inteira falha.
Acordo baseado no respeito mútuo
Onde colocamos as coisas? Deixe que eles nos digam. As peculiaridades de gráficos, fotos e pedaços de texto se tornam aparentes quando se encontram em uma página. Alguns trabalham juntos melhor do que outros, e alguns funcionam apenas quando colocados de uma determinada maneira. Por exemplo, nosso layout funciona tecnicamente de duas maneiras:
A Figura 1 mostra o layout usado em nosso exemplo acima. Blocos cinza representam o título, foto e texto.
A Figura 2 mostra como os mesmos princípios se aplicariam à sua inversão: um elemento grande balanceado por dois elementos menores. Esta foto em particular parece melhor à direita, no entanto.
Nosso modelo está olhando para a esquerda. Na figura 1, ela está olhando para o texto. Na figura 2, ela está desviando o olhar do texto. Isso poderia ter funcionado se ela estivesse olhando para a câmera, mas porque ela está olhando para longe, ela perde algum impacto. Não muito, mas o suficiente para importar.
O modelo alternadamente mostra interesse no texto e, quando invertido, o ignora. A disposição dos elementos estabelece uma atitude positiva ou negativa.
Alinhamento Baseado em Marcos
Às vezes, a coisa que faz os elementos funcionarem de determinada maneira também fornece pistas sobre espaço e alinhamento. Observamos como os olhos do modelo apontam para a esquerda, mas a foto e o texto contêm outras indicações visuais.
Linhas implícitas entre pontos de referência na tipografia e a imagem são abundantes nesta composição:
- O olho e os lábios do modelo e a ponta do nariz encontram a borda da coluna da direita do texto.
- A coluna do texto à esquerda encontra a borda esquerda do título. Quase atinge a borda do cabelo do modelo, mas fica aquém para ficar consistente com a coluna da direita.
- O rosto do modelo (particularmente os olhos e a boca) define o espaço vertical do título.
- A parte inferior da foto marca o terço inferior da composição (na regra dos terços).
- Os olhos do modelo são um terço do topo da composição.
- O centro da face do modelo e a borda direita do título encontram-se nos pontos de um terço e dois terços da largura da composição.
Alguns marcos têm mais poder que outros. Designers e fotógrafos poderiam debater, por exemplo, se os olhos do modelo são mais influentes do que sua silhueta. Mas um layout baseado em qualquer marco é melhor que um layout que os ignora.
Usando recursos para criar harmonia
Os não-designers que experimentam layouts às vezes organizam elementos com base em como eles se encaixam na página. O espaço deve ser respeitado, mas nem sempre leva ao melhor design.
A Figura 5 alinha os elementos ao espaço da página e baseia tudo nos limites da tela.
A Figura 6 , no entanto, baseia seu layout em pontos focais na foto. O resultado é uma aparência mais simplificada.
A Figura 5 é ineficiente porque os espectadores oscilam entre os pontos focais: até o título, até o rosto, até o texto. A linha mais simples é reta. Assim, a figura 6 guia o olhar do espectador facilmente da esquerda para a direita, de um elemento para o outro. O ponto crucial do segundo layout é uma faixa estreita que corre ao longo do alinhamento do texto da face do título.
Nessas imagens, os leitores são atraídos pela face do modelo, pela manchete e pelo texto - geralmente nessa ordem. São três áreas diferentes para se olhar. Alinhando-os, dá o foco do layout.
A resposta certa
Todos os três layouts abaixo usam os mesmos elementos de título, foto e texto:
O primeiro layout tem mais espaço para respirar. O segundo respeita o texto. O terceiro layout usa espaço negativo para alcançar o equilíbrio. Todos os três usam pontos de referência, mas de maneiras diferentes. É um dos melhores?
Buscar uma resposta pode nos cegar para o óbvio: que várias soluções podem ser igualmente válidas quando os elementos trabalham juntos. Marcos visuais são oportunidades, não regras. Dê uma outra olhada no primeiro design.
Quanto mais os elementos estiverem em conformidade com as linhas implícitas, mais um elemento não-conforme se destacará. Aqui, o designer quebra a palavra “Marcos” do alinhamento vertical do outro texto, enfatizando a palavra-chave.
Não há dúvidas sobre o que a página está promovendo. O sucesso não é medido pela forma como os elementos estão estritamente em conformidade com os princípios de design, mas pela forma como a página comunica sua mensagem.
Escrito exclusivamente para Webdesigner Depot por Ben Gremillion. Ben é um escritor e designer freelancer quem resolve problemas de comunicação com melhor design.
Como você segue marcos em seus projetos? O que funciona melhor para você e o que não funciona?