Estou procurando recursos na composição de páginas da web.
Gostaria de aprender sobre os prós e os contras de diferentes layouts de página e técnicas para deslocar os olhos pela página.
Estou procurando recursos na composição de páginas da web.
Gostaria de aprender sobre os prós e os contras de diferentes layouts de página e técnicas para deslocar os olhos pela página.
Respostas:
A pergunta pode ter uma resposta bastante ampla que precisa de dias e dias de estudos, mas vou tentar algo breve.
Você precisa projetar seu layout seguindo uma grade invisível, como no papel e na Web, que o ajudará a manter tudo no alinhamento e na organização certos. As dificuldades são que, na web, os tamanhos e proporções são alteráveis e o conteúdo é dinâmico em muitos aspectos (configuração de preferências, calibração do monitor, iluminação, tamanho do monitor, navegador, sistema operacional, etc.).
Por esse motivo, não vamos considerar a proporção entre as coisas, mas vamos nos concentrar em uma configuração clássica. Um layout clássico é o cabeçalho na parte superior, o rodapé na parte inferior e as 3 colunas no centro (com a esquerda e a direita menores que o centro). Pode ser um site em duas colunas ou mais colunas, tudo depende da quantidade de informações que você possui e de quanto deseja exibir ou de quanto "ar" (espaço em branco) você deseja colocar entre as informações que possui .
Nota: Esteja ciente de que existem algumas limitações técnicas de CSS, como alinhar colunas (que estão na mesma linha horizontal) na mesma altura quando tiverem conteúdo diferente que preencha a coluna. As pessoas estão tentando corrigir a solução criativa até que o navegador atualize sua renderização CSS no mais novo padrão
Existem 4 layouts possíveis:
1) Layout fixo: você define todas as divs em px que cabem dentro de um tamanho específico que será visível dentro de um navegador (por exemplo, dentro: 800x600)
pro: o design é estável con: você pode ter muito espaço em branco, dependendo da tela do usuário
Nesta solução, você pode optar pela esquerda (sabendo que uma grande lacuna estará à sua direita e você poderá jogar com um fundo gráfico) ou alinhar o centro (dividindo o espaço em branco à esquerda e à direita, reduzindo sua quantidade do que o alinhamento à esquerda).
2) Layout do fluido: a página se adaptará ao tamanho da tela, movendo e adaptando o conteúdo
pro: ele sempre preencherá a página, sem deixar espaço em branco descontrolado; você perderá o controle sobre as proporções e a grade em que posiciona seu conteúdo (exemplo: um parágrafo em mais linhas que se tornam uma frase longa e única em resoluções mais altas)
Exemplo de técnica ou outro mais complexo
3) Layout original: baseiam-se na quebra das regras de layouts e grades. Eles não usam o layout de coluna clássico e baseiam-se principalmente em efeitos de design gráfico, como a exibição de informações em todo o site, e estão usando um posicionamento mais absoluto do que qualquer outra solução. Bom para diversão artística na web ou portfólio maluco e nada mais (não sou contra, mas eles exigem conhecimento das regras de comunicação em design da web, esforço técnico e bom trabalho criativo).
Não encontro um exemplo no momento, desculpe.
pro: excelente estética e con original: você não pode usá-lo em sites comerciais, blogs ou qualquer coisa com uma grande quantidade de informações.
4) Layout fixo dinâmico: é o que eu uso hoje em dia nos meus sites pessoais e nos sites clientes que têm tempo para gastar para tornar um site flexível, mas sob controle. Não é nada além de um layout fixo, mas com um javascript que verifica constantemente o tamanho da tela (no caso de redimensionar ou determinar qual o tamanho) e passa o css apropriado para esse tamanho. Portanto, independentemente do tamanho da sua tela, você sempre terá um bom controle. Por exemplo, se eu tiver um layout de 3 colunas, se eu redimensionar o navegador, posso decidir que a terceira coluna desaparecerá e ficará na parte inferior do conteúdo, antes do rodapé.
pro: controle completo + flexibilidade con: muito esforço para projetar e depurar o tempo a ser gasto para verificar se está tudo bem, pensando no futuro, porque você adicionará novo conteúdo mais tarde no futuro e tudo funcionará bem.
Artigo em que me inspirei (hoje em dia jquery faz um ótimo trabalho com redimensionar (), há 3 anos eu tinha um longo e longo script para isso :))
Uma última observação Atualmente, existe uma nova tendência nos designers gráficos da Web (pessoas que são mais designers gráficos do que programadores), que, usando o layout fixo, estão criando cada página do blog, como as revistas fazem com os artigos. Criativo e projetando cada artigo com seu próprio estilo.
Um expoente é Jason Santa Maria
Outros artigos:
Existem mais artigos por aí. Procure por "layouts de css". Ou siga lugares onde conversas sobre usabilidade e design como Signal Vs Noise
Tudo o que há para saber sobre composição é experiência e estudo ou teste de usabilidade (tentativa e erro). Coloque alguém na frente do seu site e veja como eles reagem ao seu design. Ou um dispositivo de rastreamento ocular :)
Como sou autodidata, não posso sugerir livros sobre composição, mas um bom livro sobre layout de grade pode ajudá-lo bastante.
Se você deseja um bom sistema para criar designs da web, dê uma olhada no sistema de grade 960 . É o que eu uso na maioria dos meus layouts. Eu acho que também há uma boa seleção de modelos para usar em diferentes pacotes, como Photoshop e InDesign, além de alguns imprimíveis para todas as necessidades de desenho do seu site.
Também um bom exemplo de layouts diferentes pode ser visto aqui: http://designshack.co.uk/articles/layouts/10-rock-solid-website-layout-examples