Identificando um layout amador

O que faz a gente bater o olho num site e perceber: esse design está amador? Quando essa dúvida vem, muitas vezes não sabemos explicar o porquê. Foi pensando em responder essa intrigante pergunta que resolvi escrever esse artigo.

Um layout, para ser considerado amador, deve possuir algumas características em comum. As possibilidades são inúmeras mas existem alguns erros que aparecem freqüentemente nesses layouts. São esses erros que apresento agora. Atenção, você, webdesigner, jamais faça o que irei relatar a partir de agora.

JAMAIS ESTIQUE FONTES, IMAGENS E LOGOTIPOS

Erro bem comum entre os iniciantes, essa é uma das características mais vísiveis de um layout amador. Mesmo aos olhos do leigo é perceptível que algo está errado ali. O cérebro interpreta a desproporção das letras, das formas e círculos, dando a impressão clara de que algo foi esticado ou achatado. Jamais cometa esse crime. Ao manusear fontes, imagens ou logotipos, aumente ou diminua suas dimensões de forma proporcional.

EVITE UTILIZAR GAMBIARRAS

Quantas vezes você já tentou corrigir o mal contato no seu fone de ouvido, utilizando um outro fio e uma fita isolante? Isso é o que chamamos de gambiarra. Seria uma maneira errada de se corrigir alguma coisa, evitando ter que fazer tudo de novo. É o que vemos no exemplo acima. O webdesigner em questão pegou um texto vermelho escuro e tacou num fundo azul escuro. Resultado: ninguém conseguiu ler. Então, para que não fosse preciso ter que refazer todo o layout para que o texto vermelho ficasse legível, o nobre webdesigner resolveu colocar um efeito de “glow”, como se uma luz resplandescente iluminasse o fundo da palavra “gambiarra 1″. Aí está um exmeplo de gambiarra muito comum. Utilizou-se um efeito totalmente artificial, mal empregado, deixando a palavra pesada, poluída.

Não satisfeito, o webdesigner abandona a idéia do glow e taca um contorno amarelo na palavra “gambiarra 2″. Agora sim, a palavra ficou mais pesada ainda, como uma grossa barra de ferro.

Evite esse tipo de efeito, ao ver que a fonte não está legível ou sendo ofuscado, troque a cor do fundo ou da fonte até encontrar o melhor contraste. E se for necessário, volte a estaca zero e monte o layout novamente. Ao utilizar efeitos, utilize com muito critério e de uma forma que não fique artificial.

EVITE FONTES COMPLICADAS

Você entendeu o que está escrito aí em cima? Nem eu. Evite fontes de difícil leitura. Utilize o bom-senso.

CADA FONTE, UM SENTIMENTO

A fonte utilizada acima é a Comic Sans. Nota-se seu estilo de “revista em quadrinhos”. O que tem a ver esse tipo de fonte com uma funerária? Por isso utilize sempre um tipo de fonte que transmita o sentimento mais adequado. No caso da funerária, uma simples Times New Roman cairia bem.

TÍTULOS DESLOCADOS PARA A DIREITA

Nossa leitura se faz da esquerda para direita, como qualquer ocidental. Por isso encontramos em quase 100% dos sites ocidentais esse tipo de alinhamento. Deixar deslocado o título um pouco para a direita denota falta de alinhamento com o texto que vem embaixo. Nesse caso, alinhe o título com o texto. Se 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 DESALINHADO

Erro muito comum entre os iniciantes. Transmite falta de cuidado e quebra de leitura. Coloque todos alinhados na mesma linha. Recomendo a utilização de uma linha guia, caso tenha dificuldades em alinhar.

TEXTOS SEM MARGEM

Sempre devemos dar margens no topo, rodapé, esquerda e direita do texto. Além de dar uma sensação de leveza, também serve como uma moldura invisível, destacando o texto como um elemento visual.

EVITE BEVEL

Assim como o glow, o efeito bevel tende a ser artificial. Ao utilizar este tipo de efeito, use com bastante critério, para que não dê esse tom de artificialidade. Exagerar nesse efeito pode poluir a página e deixá-lo mais pesado visualmente.

EVITE SOMBRAS
As sombras também devem ser utilizadas com critério e de forma muito delicada. No exemplo, vemos um exagero do uso da sombra, dando um aspecto de queimado, sujo, poluindo a página e dificultando a leitura.

E então, gostaram? Acredito que esses sejam as principais características de um layout amador. Se você anda cometendo um desses crimes por aí, não tem problema, tenho certeza que depois de ler esse artigo você irá se redimir.

Para o alto e avante!

Bruno Ávila é webdesigner e cantor de banheiro.

Bruno Ávila

Um pequeno menino risonho e falante, que gosta de arroz, batata-frita e chocolate. Sua diversão é fazer layouts, publicidade e cursos marotos para alunos supimpas. E nas horas vagas, claro, trabalha um pouquinho. ;D

31 Comentários

Ma

07/01/2010 às 7:01 pm

É, confesso que já cometi um ou outro erro acima, alguns efeitos prontos das ferramentas de edição são tentadores…
Parabéns pelo ótimo artigo!

helder

07/01/2010 às 8:02 pm

Bacana o post. Só discordo do uso do bevel e das sombras, que se usadas corretamente e moderadamente dão um ótimo look.

Guilherme Dantas

08/01/2010 às 7:54 am

Muito interessante!

Navegando por uns quinze minutos na internet, podemos notar alguns exemplos que provam o que foi dito acima.
Parabéns pelo post.

Cleyton

08/01/2010 às 12:33 pm

Ótimo post, muitos são erros comuns por iniciantes na web, e erros como esses ainda acontecem em muitos sites, o bom de tudo isso que temos sites como esse, em que o pessoal disponibiliza estudos e comentários para auxiliar os iniciantes.
Parabéns.

Alexandre

08/01/2010 às 8:23 pm

Bom em site nunca cometi, mas em animação no AE, reconheço que ja utilizei a opção de stroke para dar visibilidade a fonte….rs Mas faz tempo

Adener

09/01/2010 às 11:33 am

rsrs, Post muito bom Bruno parabéns, Mais confesso que ja utilizei o Bevil uns anos atráz . rsrs , Abraços ;P

Mariana

09/01/2010 às 9:05 pm

Nossa, foi muito bom ler isso, tô começando agora e ajudou muito. Obrigada, Bruno, você é demais!

Jouderian Nobre

09/01/2010 às 9:56 pm

Amigo TU anda pegando jeito para artigos, estão ficando cada vez melhores, parabéns.

Kadu Fernandiz | Juiz de Fora-MG

11/01/2010 às 12:48 pm

Pra ser sincero, quando comecei a “brincar” com web eu cometi vários erros destes citados aí no post do Bruno. Mas são coisas de iniciante, com o tempo vamos aprendendo a reparar estes erros. Parabéns pelo post.

Renato Vieira

11/01/2010 às 1:08 pm

Citaria mais um ponto, que não faz parte do layout mas deixa o site amador, são aqueles .: Titulo da página :. :: :: , esses pontinhos que a galera gosta de usar na tag title,principalmente os programadores.

Vinícius Ramon

11/01/2010 às 3:03 pm

Cantor de banheiro…Hehehe.

Weverson Ramos

11/01/2010 às 3:12 pm

Quem nunca fez isso que atire a primeira pedra! meu primeiro layout parecia + ou – com a cidade de las vegas.

John Silva

13/01/2010 às 11:09 am

Nossa!
Já fiz muito essas loucuras, mas graças a Deus existem blogs como este, além do curso Design Web que realmente fez grande diferença para meu aprendizado.

Abração Bruno!

Willian Almeida – Jaru RO

17/02/2010 às 1:42 pm

nossa…quando vejo as pessoas usando o efeito glow…chega da um “tre” ruim …
muito bom o post…vo imprimir ele e mostrar para os clientes…kkk
brincadeiras a parte….parabens pela sua contribuição pela arte…sucesso

breno alves

19/02/2010 às 5:29 pm

ja cometi varios.. é como… porem com o tempo tudo muda…

Lothar Matthaus

22/02/2010 às 9:44 pm

Concordo com todas as regras, óbvio que alguns desses efeitos em “boas mãos” se tornam ferramenta excelente.

A questão da fonte acho bacana, acho que fontes diferentes usadas uma vez perdida em um lugar bem localizado fica bem bacana !

Antonio

19/03/2010 às 2:36 pm

Excelentes dicas, procuro seguir à risca o conceito International Style de “menos é mais”, o bicho é que nem sempre quem programa tem este embasamento e às vezes detonam o nosso layout. Evito ao máximo o uso de bullets e setinhas em menus mas não adianta, insistem em colocá-los.

Alessandro Guimarães de Andrade

03/04/2010 às 8:01 pm

Parabéns pela iniciativa de postagem!
Excelente abordagem!

rosana

20/04/2010 às 4:21 pm

Muito bom o post.
É importante lembrar que quando não tomamos cuidado o que deveriam ser efeitos passam a ser (D)efeitos!

DragOnLukOs

22/04/2010 às 2:32 am

Muito Bom Mesmo.

Henrique Meirelles

21/08/2010 às 1:33 pm

Ótimas dicas.

Adriana

15/10/2010 às 11:59 am

Que loucura né! Vejo muitos desses erros na empresa onde trabalho. Temos alguns terceirizadores que trazem alguns trabalhos aqui. e, Puutz!! Cometem quase todos os erros q vc mencionou! Sério, da vontade de mataaar!! :P

Abraço, e parabens pelo post. Muito interessante!!

Aluisio Martins Junior

03/01/2011 às 9:34 pm

Muito bom, mas aí esqueceu dos famigerados “GIFS” todo amador utiliza e os sites ficam parecendo verdadeiras máquinas de fliperamas… Caraca tem gente que nem sabe o que é “fliperama”, kkkk, podemos dizer que são os “pais” das LAN HOUSES.