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

[W3Case 0]

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.

 

 

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

[WilliansS 73]

Muito bom teu tópico, parabens.

Realmente alguns detalhes e formas diferentes de construir determinado elemento faz toda a diferença. Poste mais sobre o assunto =), conhecimento nunk é demais!

 

Obrigado

[W3Case 0]

Muito bom teu tópico, parabens.

Realmente alguns detalhes e formas diferentes de construir determinado elemento faz toda a diferença. Poste mais sobre o assunto =), conhecimento nunk é demais!

 

Obrigado

 

 

Obrigada, fico muito feliz que tenha gostado. Pode deixar que vou postar mais dicas de criação ;)

[W3Case 0]

Acho que todos Designer quando começam a se aventurar pelo mundo da criação, tem vontade de aplicar em uma imagem todos os efeitos surpreendentes que aprenderam, mas a coisa não é bem assim, muitas vezes o menos é mais, guarde os efeitos para a hora certa.

 

Mas qual é a hora certa?

 

A hora certa é aquela em que você precisa fazer uma imagem impactante, que chame a atenção do usuário, ou seja, nos banners, propagandas, e-mail marketing e afim. Evite usar background mirabolantes e sites complexos de difícil manutenção. Lembre-se que se o site possuí uma área de texto, é porque alguém irá ler o conteúdo, efeitos excessivos irão atrapalhar, tornando a visita ao site desagradável e levando água abaixo seus esforços.

 

Vou postar aqui o exemplo de um banner que desenvolvi.

 

 

Tratasse de um dos maiores evento da região, o cliente nos mandou a logo de forma simples, conforme esta na imagem "original".

 

A marca original não cria aquela expectativa, então decidi aplicar um efeito de chanfro para da volume e aumentar a profundidade, uma leve rotação para dar movimento, brilho para aumentar o destaque e um "chão" que tem função de iluminar o fundo chapado e dar mais destaque a logo.

 

Como vê, usei um monte de efeitos nesse trabalho, mas todos ele foram pensados e vieram para agregar valor. Use quantos efeitos achar necessários, mas justifique seu uso, quando puder fazer isso, irá notar uma melhora significativa em seu trabalho, isso falo por experiência própria. Trabalhe mais seu olhar, para poder apontar o que uma arte precisa para atingir seu objetivo, não é fácil conseguir isso, é um aprendizado eterno, mas vale a pena.

Viviane Vresk - Designer da agência W3Case

[zdoug 1]

Show de bola! São os pequenos detalhes que, justificados, compõem a essência de um bom design! Parabéns!

[Rafael CG stz 0]

Os pequenos detalhes são aqueles que enchem os olhos, muuito bom cara. Pessoal recomendo o livro "Design para quem não é design" mostra tudo sobre tipografia, alinhamento e cores.