Erros inaceitveis em um layout

O que faz o cliente bater o olho num site e cancelar imediatamente a compra? Quando essa dvida vem, muitas vezes no sabemos explicar o porqu. Foi pensando em responder essa intri ante per unta que resolvi escrever esse arti o. !o fatos simples e claros, mas que podem passar despercebidos. "ten#o, voc, desi ner, $amais fa#a o que irei relatar a partir de a ora. JAMAIS ESTIQUE FONTES, IMAGENS E LOGOTI OS

%rro bem comum entre os iniciantes e casos de ur ncia. %ssa & uma das caracter'sticas mais v'siveis de um la(out amador. )esmo aos olhos do lei o & percept'vel que al o est* errado ali. O c&rebro interpreta a despropor#o das letras, das formas e c'rculos, dando a impresso clara de que al o foi esticado ou achatado. +amais cometa esse crime. "o manusear fontes, ima ens ou lo otipos, aumente ou diminua suas dimens,es de forma proporcional. E!ITE UTILI"A# GAM$IA##AS

Quantas vezes voc $* tentou corri ir o mal contato no seu fone de ouvido, utilizando um outro fio e uma fita isolante? -sso & o que chamamos de ambiarra. !eria uma maneira errada de se corri ir al uma coisa, evitando ter que fazer tudo de novo. . o que vemos no exemplo acima. O /ebdesi ner em questo pe ou um texto vermelho escuro e tacou num fundo azul escuro. 0esultado1 nin u&m conse uiu ler. %nto, para que no fosse preciso ter que refazer todo o la(out para que o texto vermelho ficasse le 'vel, o

nobre /ebdesi ner resolveu colocar um efeito de 2 lo/2, como se uma luz resplandescente iluminasse o fundo da palavra 2 ambiarra 3?. "' est* um exmeplo de ambiarra muito comum. 4tilizou5se um efeito totalmente artificial, mal empre ado, deixando a palavra pesada, polu'da. 6o satisfeito, o /ebdesi ner abandona a id&ia do lo/ e taca um contorno amarelo na palavra 2 ambiarra 7?. " ora sim, a palavra ficou mais pesada ainda, como uma rossa barra de ferro. %vite esse tipo de efeito, ao ver que a fonte no est* le 'vel ou sendo ofuscado, troque a cor do fundo ou da fonte at& encontrar o melhor contraste. % se for necess*rio, volte a estaca zero e monte o la(out novamente. "o utilizar efeitos, utilize com muito crit&rio e de uma forma que no fique artificial. E!ITE FONTES %OM LI%A&AS

8oc entendeu o que est* escrito a' em cima? 6em eu. %vite fontes de dif'cil leitura. 4tilize o bom5senso. %A&A FONTE, UM SENTIMENTO

" fonte utilizada acima & a 9omic !ans. 6ota5se seu estilo de 2revista em quadrinhos2. O que tem a ver esse tipo de fonte com uma funer*ria? :or isso utilize sempre um tipo de fonte que transmita o sentimento mais adequado. 6o caso da funer*ria, uma simples ;imes 6e/ 0oman cairia bem. T'TULOS &ESLO%A&OS A#A A &I#EITA

6ossa leitura se faz da esquerda para direita, como qualquer ocidental. :or isso encontramos em quase 3<<= dos sites ocidentais esse tipo de alinhamento. >eixar deslocado o t'tulo um pouco para a direita denota falta de alinhamento com o texto que vem embaixo. 6esse caso, alinhe o t'tulo com o texto. !e for um menu, pode colocar o texto que vem abaixo do t'tulo principal deslocado para a direita, dando uma id&ia de hierarquia.

MENU &ESALIN(A&O

%rro muito comum entre os iniciantes. ;ransmite falta de cuidado e quebra de leitura. 9oloque todos alinhados na mesma linha. 0ecomendo a utiliza#o de uma linha uia, caso tenha dificuldades em alinhar. TE)TOS SEM MA#GEM

!empre devemos dar mar ens no topo, rodap&, esquerda e direita do texto. "l&m de dar uma sensa#o de leveza, tamb&m serve como uma moldura invis'vel, destacando o texto como um elemento visual. E!ITE $E!EL

"ssim como o lo/, o efeito bevel tende a ser artificial. "o utilizar este tipo de efeito, use com bastante crit&rio, para que no d esse tom de artificialidade. %xa erar nesse efeito pode poluir a p* ina e deix*5lo mais pesado visualmente. E!ITE SOM$#AS

"s sombras tamb&m devem ser utilizadas com crit&rio e de forma muito delicada. 6o exemplo, vemos um exa ero do uso da sombra, dando um aspecto de queimado, su$o, poluindo a p* ina e dificultando a leitura.
Fonte: http://imasters.uol.com.br/artigo/6365/criacao/errros_inaceitaveis_em_um_layout