Layout Web - Pequenos detalhes levam você a um layout perfeito.

Neste tópico vou abordar como pequenos detalhes, desde uma palheta de cores adequada, até a fonte utilizada podem interferir no layout de seu web site.

Antes de mais nada é preciso lembrar que aprender a "enxergar" estes "erros" no desenvolvimento do layout é uma questão de treino. Precisamos treinar o olhar constantemente e fazemos isso nos questionando o que poderíamos fazer para melhorar o site. Quais efeitos, imagens, fontes, etc , poderia ser aplicado para alcançar essa melhora? E o mais importante, se um layout não esta agradável, onde esta o erro?

Ainda tenho muito a aprender, então vamos aprender juntos. Vou postar aqui dicas de como corrigir alguns problemas que geralmente se encontra em um layout web, poste o sua dica também.

Essa não é uma tarefa fácil, mas possível de se aprender, então mãos a obra.

*Viviane Vresk - Designer da agência **W3Case*

Nesse primeiro tópico vou mostrar como as escolha das cores, fonte e distribuição do conteúdo no espaço pode influenciar o layout. Lembre-se que este é apenas um detalhe, mas ele influencia imensamente no layout total do site.

/applications/core/interface/imageproxy/imageproxy.php?img=http://forum.imasters.com.br/uploads//1307362897/gallery_158259_82_182384.jpg&key=8bde56ca37f63d324a177ba65b2eef1a17b7eaf58032ac711101ea0b1204bf88" alt="gallery_158259_82_182384.jpg" />

Imagem 1 - Observe essa tabela de indicadores rurais: foi utilizado a fonte verdana somente na cor preta; ela é legível; não existe diferença entre o produto, prazo e valores; e foi utilizado o espaçamento mínimo entre o conteúdo da tabela.

Imagem 2 - Melhorando ela um pouco: Mantive as fonte; apliquei um itálico ao titulo para dar mais suavidade; mudei a cor do prazo e preço para destacar do produto; reduzi o tamanho da fonte em "atualizado" e mudei a cor para destacá-la do conteúdo ; aumentei o espaçamento entre os produtos facilitando a leitura da tabela e utilizado melhor o espaço.

Imagem 3 - O final: Mudei a fonte para uma mais arredondada e sinuosa, essa é uma fonte do google fontes, portanto não será preciso salvar imagem; adequei as cores das fonte para a cor utilizado no background da tabela, pensando também no assunto abordado; e realinhei "atualizando". A tabela esta mais harmônica agora, a fonte melhorou muito a estética dela, sem deixar o site pesado e continua sendo de fácil atualização.

Existe ainda um monte de explicação teórica sobre fonte, cores e espaçamento que não coloquei aqui, mas pra quem se interessa sobre o assunto, busque livros de Gestalt, tipografia e teoria das cores, eles vão te ajudar a entender melhor o porque dessas pequenas mudanças alteram tanto o aspecto geral de uma tabela simples como essa.

Viviane Vresk - Designer da agência W3Case