Tecnologia&Design

 Powered by Max Banner Ads 

Um bom design deve ter impacto, deve ter estilo. Mas, as vezes, isto não é o suficiente.

Para funcionar bem, um projeto de design, seja ele qual for, tem que ter elementos que ressaltem seus pontos fortes. Felizmente, cada parte do conteúdo de um projeto tem “linhas de força” inerentes.

Um layout bem projetado, ou seja, o arranjo do conteúdo em um projeto gráfico ou eletrônico, é fundamental para o sucesso deste projeto. Entre outras coisas, o layout deve priorizar a distribuição e a hierarquia do conteúdo a fim de levar o olhar ou a leitura das pessoas de um elemento para outro.

Quando isto é  bem feito, as pessoas ficam tão interessadas no conteúdo que não percebem nenhuma dificuldade em compreender a idéia principal que este conteúdo tenta passar.

Após o jump, mais detalhes e dicas para a criação de layouts que vão funcionar em seus projetos de design.

—-

Com o exemplo abaixo, a maioria das pessoas irá notar, em primeiro lugar a foto, depois o primeiro título, em seguida o texto e finalmente os links.

Os leitores podem não perceber que o título, o texto e o rosto da modelo são apresentados em uma disposição de um terço e dois terços da página, respectivamente (em homenagem a regra dos terços), ou que o título e os links são escritos em cores tiradas de amostras das cores encontradas nos lábios da modelo, ou que a curva de seu ombro abre espaço para o texto, ou que o olhar da modelo leva os olhos do leitor para as chamadas, convidando para a ação de ler o conteúdo.

Neste exemplo, texto, foto e chamada fazem, em conjunto, uma composição. Se um destes elementos sair fora do lugar, a peça inteira falhará.

Onde é que vamos colocar as coisas, os elementos que devem constar em nosso layout? Deixe que elas mesmas nos digam! As excentricidades de gráficos, fotos e porções de texto tornam-se aparentes quando se encontram em uma página. Alguns trabalham melhor em conjunto do que outros, e alguns só funcionam quando colocado uma certa maneira. Por exemplo, nosso layout tecnicamente funciona de duas maneiras:

A Figura 1 mostra o esquema utilizado em nosso exemplo acima. Os blocos cinza representam a chamada, a foto e o texto.

A Figura 2 mostra como os mesmos princípios se aplicam a sua inversão: um elemento de grande equilíbrio por dois elementos de menor dimensão. Esta foto, em particular fica melhor na direita, apesar de tudo.

Nossa modelo está olhando para a esquerda. Na figura 1, ela está olhando para o texto. Na figura 2, ela está olhando para longe do texto. Isso poderia ter funcionado, se ela estivesse olhando para a câmera, mas porque ela está olhando para longe, ele perde algum impacto. Não muito, mas o suficiente para comprometer o resultado final.

A modelo, na diagramação à esquerda, mostra interesse no texto e, quando invertida a posição de sua foto, passa a ignorá-lo. A disposição dos elementos ou estabelece uma atitude positiva ou negativa.

Às vezes o que faz com que elementos funcionem de certa forma, também fornece pistas sobre o espaço e o alinhamento. Notamos como os olhos da modelo apontam para a esquerda, mas a foto e o texto contêm outros elementos visuais.

Esta composição é pródiga em Linhas de Força (ou Grade), justificando a colocação dos elementos, (foto, textos, chamada), por exemplo:

• O olho da modelo, os lábios e a ponta do nariz delimitam a borda da coluna direita do texto.
• A coluna esquerda do texto está alinhada à margem esquerda do título. Ela quase atinge a borda do cabelo da modelo, mas fica aquém de ficar alinhada com a margem direita da coluna de texto.
• O rosto da modelo (em especial os olhos ea boca) define o espaço vertical do título.
• O fundo da foto marca o terço inferior da composição (na regra dos terços).
• Os olhos do modelo são um terço da parte superior da composição.
• O centro do rosto do modelo e a margem direita do título delimitam o terço central da composição.

Alguns elementos têm mais força do que outros. Designers e fotógrafos poderão discutir, por exemplo, se os olhos de um modelo são mais influentes do que sua silhueta em uma determinada composição. Mas um layout baseado em algum ponto de referência forte é sempre melhor do que um layout que os ignora.

Non-designers ou designers iniciantes tendem, as vezes, arranjar os elementos com base em como eles se encaixam na página. Em geral, o espaço ocupado pelos elementos deve ser respeitado, mas nem sempre esta abordagem leva a um melhor resultado.

Figura 5, elementos estão alinhados ao espaço da página e tudo se baseia nos limites da tela.

A Figura 6, porém, baseia a sua distribuição em pontos focais na foto. O resultado é uma aparência mais dinâmica.

A Figura 5 é ineficiente porque deixa os leitores saltitando entre os pontos focais: do título para o rosto, do rosto para o texto. O mais simples seria uma linha reta em termos de leitura. Assim, a figura 6 orienta o olhar do espectador facilmente a partir da esquerda para a direita, de um elemento para o próximo. O cerne do segundo layout é uma estreita faixa que corre ao longo do layout, indo da chamada para o rosto e em seguida para o texto.

Nestas imagens, os leitores são atraídos para o rosto da modelo, o título e o texto, geralmente nessa ordem. Isso é três áreas diferentes de se olhar. Alinhando-as corretamente se obtém um foco para o layout.

Todos os três layouts a seguir usam a mesma chamada, foto e elementos de texto:

O primeiro layout tem mais “espaço para respirar”. O segundo respeita o texto. O terceiro layout utiliza espaço negativo para atingir o equilíbrio. Todos os três usam os pontos fortes dos elementos, mas de maneiras diferentes. Teria algum melhor?

A busca de uma resposta pode nos cegar para o óbvio: que várias soluções podem ser igualmente válidas quando os elementos trabalham em conjunto. Pontos Fortes são oportunidades, não regras. Dê uma nova olhada no primeiro projeto.

Quanto mais os elementos seguem às Linhas de Força ou Grade, tanto mais um elemento que não segue estas Linhas vai se destacar. Aqui, o designer quebra a regra ressaltando a palavra “Landmarks”, tirando ela do alinhamento vertical blocado do texto, enfatizando esta como uma palavra-chave.

Não há nenhuma dúvida sobre o que a página está promovendo. O sucesso não é medido pela forma como os elementos seguem estritamente os princípios de design, mas sim pela maneira como o projeto comunica sua mensagem.