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

amador-01.gif

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

amador-02.gif

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

amador-03.gif

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

amador-04.gif

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

amador-05.gif

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

amador-06.gif

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

amador-07.gif

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

amador-08.gif

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

amador-09.gif

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.

Mais informações

Encontre aqui mais artigos e links Úteis.


Outros Artigos
Palestra em Parauapebas - PA
2007, um novo site

Grupos do Google

Receba todas as minhas dicas no seu e-mail, de forma prática e rápida. Fique sabendo sempre que novos textos forem publicados. Para isso, cadastre seu e-mail no campo abaixo

E-mail:

Visitar este grupo

 


Escreva seu comentário

Qual a sua opinião sobre este artigo? Envie um comentário, sugestão, dica ou enriqueça mais esse artigo.

Comentários

Muito bom artigo.
Realmente é isso ai Brunão.

Para o Alto e Avante.

Muito bom Bruno.Ótima orientação..
Suas dicas, como sempre são excelentes.

É isso aí…

muito bom esse artigo. Cm essas dicas do bruno sempre eu aprendo mais e mais e tambem ja vi esses erros por ai. muito bom valeu.

Poisé, em constante aprendizagem, muito bom esse artigo!

Prosseguindo para o alto e avante!

abração!

Fala Brunão, cara este artigo está de parabéns.Eu sou diretor de arte de uma agência aqui em Ribeirão Preto e realmente os amadores sempre fazem esses mesmos erros.Ou ele não usa efeito e deixa os textos sem leitura ou ele abusa nos efeitos.E as vezes não nem por falta de formação adequada e sim por percepção ou seila oque.Mas é isso ai, um dia eles aprendem. abraços té mais.

Caramba! Mto bom o artigo, mas o q gostei mais foi da minha palavra do anti-span.. “Vitória”…

Que todos nós webdesigners e/ou programadores sejamos vitoriosos!!!

Simbora, para o alto e avante!

Mas todo mundo já cometeu algum desses erros.. pelo menos uma vez ! ;^)

Muito legal essas dicas, realmente, antes fazer um website devemos ter um pouco de embasamento teórico sobre cores, formas e disposição dos elementos no site. Acredito que em teu curso iremos aprender muito disso.

Bruno,

Gostei muito do seu artigo. Poderia dar sua opinião sobre o site da prefeitura onde trabalho? http://www.saomiguel.pr.gov.br
Sou responsável pelo desenvolvimento e manutenção do mesmo.

Abraços
Jackson

Bruno,

Você relatou itens que realmente encontramos em websites feitos por amadores, são que realmente não ficão bem visíveis.

É isso aê, espero que a partir deste artigo muitos possam refletir e outros possam identificar esses erros.

T++++
Um abraço!

Muito bom o artigo, vai me ajuda =)

Você tem toda razão.
Mais uma vez, tiro a gambiarra, quer dizer, o chapéu pra você.

Valeu pelas dicas !
e tem obrigado por dedicar seu tempo para fazer esse artigo.

Boa matéria,

informar para se obter mais qualidade no trabalho sempre é bom!

Obrigado Bruno!!!

Muito bom esse artigo

gostei muito, até pra nós que ja conhecemos alguns desses conceitos é bom sempre está relembrando.

Parabéns cara curto muito o seu trabalho.

otimas dicas Bruno!!! Valew

Parabéns! Sempre com ótimas dicas :)

Belo artigo. Realmente é o que geralmente percebemos em trabalhos amadores

[]’s

Esse é o meu futuro professor!! não é a toa que assim que recebi o email sobre a abertura de vagas eu me inscrevi para o seu Curso. …Ancioso pra começar….
Parabéns Bruno, como sempre!

Parece bobagem, mas realmente é bem chato o resultado desses pequenos detalhes. Dicas preciosas pra quem tá no inicio de carreira…

Gostaria de ver aqui alguma dica sobre tamanho de visualização do site X a resolucção do micro do internauta…

Super beijo!

Olá Bruno.

Está de parabéns com esse seu novo artigo muito bom.
Sempre aprendo muito com eles, e com esse também aprendi…

Valeu, abraços.

eh pessoal, vcs que leram o artigo e gostaram agora ta na hora de fazer o curso on line de design web, esses e outros ensinamentos super importantes estão tds sendo passados lá. Eu jah estou terminando o curso, agora eh a sua vez.

Muito legal vc disponibilizar esse artigo gratuitamente, sendo q mta gente paga p aprender isso. Sou seu aluno com muito orgulho, nesse curso de Design Web tenho aprendido mto, assim como todos os outros alunos. Eu recomendo o curso p todos os afins dessa área.

Abraços..

Esse negócio de “sempre” é complicado.

Textos blocados nem sempre são a melhor opção para um layout, já que dependendo da área disponível e da fonte utilizada buracos podem surgir dificultando a leitura.

Sem contar que o bloco formado fica muito mais pesado visualmente do que um texto em que uma das margens - normalmente a direita - flui e conduz o olhar.

No mais, são boas dicas.

muito bom o texto! inclusive, aproveitei para corrigir o alinhamento do meu blog. O http://misterinfo.blogspot.com.

valeu pelas dicas!

Muito bom o post, comecei a ler e rachar de dar risada, isso realmente acontece muito pela web, Parabens pelo post.

Abraços.

Erick Souza
http://www.ericksouza.com.br/blog

Muito bom Bruno, parabens pelos seus artigos……… me ajudam bastante…
Bruno para Presidente……..
tah bom…..sem puxasaquismo…….
vlw cara

São erros comuns de quem esta começando, de quem não entende muito sobre design, chega a ser irrelevante pensar nisso porque as chances de uma amador cometer erros sempre é grandes, salvo se o cara é o deus do design. Mas não são apenas os amadores que cometem erros. Alguns “profissionais” da área também cometem seus erros, talvez pior. Um exemplo de erro comum desses “profissionais” é sacrificar a acessibilidade ou usabilidade em nome da estética. O amador vai aprender fazer direito um dia, mas o profissional que acha que está certo?

Muito bom o artigo, corresponde exatamente a tudo que aprendi no seu curso.

Parabéns Bruno..de forma simples e resumida vc disse: Tudo!

Obrigada mais uma vez.

valeu bruno! seus conhecimentos e seu espirito coletivo nos ajudam sempre.

avante sempre

Perfeito, principalmente do uso de sombras e glow..é batata.

Você poderia ter comentado o uso indiscriminado e javascript..com aquelas mensagens rolando no rodapé ou efeitos que fica perseguindo o mouse…

Otimo artigo Bruno , Geralmente isso acontece sempre…em alguns site amadores

Parabéns, muito bem colocado.

Deus lhe abençoe, Bruno, por estas dicas que você tem nos dado e lhe ilumina cada vez mais.

Realmente são dicas muito interessantes que, com certeza, irão ajudar a todos.

Valeu!

Deus te guarde!!!

Muito bom o artigo, mas sou iniciante e graças a Deus não cometi um desses erros ainda, procuro fazer tudo nos minimos detalhes.

Abraços.

Olá Bruno!

O artigo mostra mesmo os vários e comuns erros que os iniciantes cometem.

Eu com mais de seis anos de experiência com internet e webdesign, posso afirmar isso tranquilamente, pois já cometi esses erros no início e já vi e vejo muitos deles por aí até hoje.

Continue com o trabalho do blog.
Seu conteúdo tem qualidade!

Um abraço,
Felipe Gomes
http://www.felipegomes.com.br

Excelentes dicas, isso nos ajuda cada a vez mais. Muito bom.
Obrigada!

Abraços!
Terezinha

Grande Bruno..
Muito boa suas dicas hein, e gostei dessa nova mudança para blog, o WordPress pra mim é o melhor sistema de blog q existe..

vlw…

Muito bom o artigo…dicas excelentes! Confesso que gosto e faço uso dos efeitos, mas, sempre procuro ser criterioso…agora mais ainda…obrigado!!!

Bruno, é de facto bastante triste como se continuam a cometer erros de palmatória em webdesign. Promover a profissionalização apontando os erros comuns é uma forma de educar os designers ainda menos conscientes e experientes, bem como de sensibilizar os clientes que por vezes são parte do problema e não da solução.

Bom trabalho a todos!
votos do “webilidade”

Muito bom seu post, Bruno.
Vc, como sempre, ótimo.

Abs.

Oi Bruno!!! Adorei o post sobre o assunto, inclusive postei isso lá na minha página ;)

Abraço!!

Isso. Vamos ensinar aos amadores como eles devem fazer o trabalho com qualidade. Assim quando os clientes trocarem nossos serviços profissionais pelos dos sobrinhos deles, pelo menos estarão trocando algo caro e bom por algo barato e bom.

Realmente esse erros são dose, e isso infelizmente acaba sujando o mercado de Design. Note que essas pessoas cobram valores irreais e tornam o mercado cada vez mais desacreditado!

Concordo plenamente, mas o amadorismo de webdesigners se estende até na hora de cobrar, onde sem nenhum pudor, eles cobram muito barato e acabam não dando conta de fazer o serviço… Sou dono de agência e pego bastante serviço de gente que começou e não terminou rsrsrs. VLW

45 comentários, o que escrever depois disso!?

Vivendo e aprendendo?
Aprendendo com seus erros?
Pedalar pela primeira vez é pedir uma queda? (…ou não)

Tudo tem um começo, mas vale as dicas para nossos caros amadores (iniciantes que seja!!)

Muito boa essas dicas por enquanto eu sou novo no ramo e nos meus sites (pelo menos na maioria) não vejo nenhuma destes erros.

Caramba!
Deveria ter lido esse artigo antes de terminar meu último site.
rs.. brincadeira.
Já fiz muito isso, hoje em dia n mais.
Será q n sou mais amador?!
rs..

Obrigado Bruno e parabéns.

Bom Artigo, realmente é verdade, eu já vi muitos sites com as “caracteristicas” … rs

Muito bom, logo quando eu comecei a arranhar sites, eu usava mto isso ae, que são os efeitos basicos do Fireworks.. Hj procuro usar o mínimo de efeitos em texto… mas isso já conhecia por outro Web Design…

Afinal, lá na SOS COMPUTADORES - ALDEOTA - FORTALEZA-CE, um professor meu disse pra os alunos (inclusive eu) que o Bruno Ávila é o maior Web Design do BRASIL.. O bixo é importante mesmo… Flw

Muito legal seu q estou lendo um poko atrasado mas muito bom as dicas

Muito bom o seu artigo…
Com certeza vou precisar de algumas dicas…
Valeu!!

Cara, sou programador de sistemas web a algum tempo e as vezes tenho que me aventurar no Design, portanto sou um designer amador, só que não cometo estes erros aí por noção estética.. mas tenho certeza que cometo muitos outros, então seria bem legal se você fizesse uma continuação desse artigo, seria bem útil para mim :)

Bom, em 1º lugar, gostaria de parabenizá-lo por este post.

Agora, tentando acrescentar mais sobre esse assunto, posso relatar a minha mínima experiência de Webdesign, já que sou músico e policial de profissões e como não gosto de ficar parado, tento me aventurar neste mundo maravilhoso que é a computação em geral.

Acredito que, para qualquer novato ou “noob”, (como gostam de chamar nos games), o que interessa: é o resultado de seu trabalho. Eu não estou falando em um resultado, onde os profissionais da área elogiariam após verificarem que os erros são normais. O que acredito eu, é que: em qualquer situação que um ser humano passe, onde tudo seja novidade e qualquer mudança por uma atitude de sua parte, possa fazer uma grande diferença (visualmente) em seu trabalho é o máximo para ele.

Voltando a falar de mim, agora entendo o porque de uma garrafa de (LEMON ICE) ou qualquer que seja a marca de ICE, ser tão bonita e diferente. Ou vocês nunca perceberam isso?

Afinal o designer está em todo lugar e não só na tela do computador!

Um fator que devemos considerar em todo começo nesse segmento, é que: geralmente o programa vem em inglês, dificultando (para a grande maioria) o início de qualquer um. A angústia de fazer uma pequena mudança na cor da letra, no tamanho, ou seja lá o que for, acaba se transformando em uma sombra ou um Glow bem exagerado no seu trabalho. Nada que desmotive-o, ao contrário! Na verdade é um super efeito para quem está começando, mas com o tempo todos acabam aprendendo. Bom pelo menos quase todos.

Eu por exemplo, autodidata que sempre gostei de ser ou me entitular, demoro para aprender. Mas com essas dicas que vou encontrando pela Net, fica mais fácil compreender e filtra o que realmente interessa para uma nova empreitada.

Agora não a o que discutir. Um novato feliz, vale mais que mil profissionais stressados!

O que realmente importa é se o que você faz, te faz feliz, ma se o que você faz depende do seu sustento, então meu amigo… corre atrás de todas as informações possíveis para o aprimoramento de seu trabalho(lei do retorno).

Sem mais blá blá blá….. fiquei bastante admirado com todos os erros que venho cometendo nos meus blogs, achando que estava arrasando. Fazer o quê, gosto de me aventurar fora da pressão e aprender aos poucos os caminhos por caminhos incertos o mais certo.

E é por isso que acabei lendo esse blog e timidamente acabei escrevendo aqui.

Na verdade niguém nasce sabendo, claro que você pode encontra mais facilidade em uma coisa e dificuldade em outra, mas o que realmente importa é que: sempre vai ter alguém sabendo mais que você. Isso você pode ter certeza.

Esperamos que este alguém esteja disposto a ensinar e não apodrecer com seus conhecimentos no fundo do seu egoísmo narcizista. Por que afinal de contas, o que seria mais útil depois de tanto esforço próprio e não a trasmissão para o engrandecimento do seu semelhante?

A evolução do mundo depende des seus mestres, que em tempos passados, foram alunos de seus mestres, que em tempos passados deixaram de aprender um pouco mais por falta de amor com seus alunos. Mas que complementaram seu estudos com o conhecimento de terceiros, que nunca se importaram com o sacrifíco e deixaram vários alunos que se transformaram em mestres seguindo esta filosofia para o crescimento evolutivo da humanidade.

Viva os compartilhadores de comnhecimentos.

Salve os experiêntes compartilhadores!

Muito bom!!! Parabéns pela iniciativa da busca e por compartilhar com agente.
Abs

Parabéns Bruno, td o q vc citou é bem verdade.

Aguardamos mais matérias como esta!

cara, gostei
mas tipo acho q sombra, eh uma coisa q se usa pra algumas coisas, tipo pra dar um toque show no lay

maas gostei do artigo,
vlws

Muito boas essas dicas… Me ajudou no trabalho de web design…

:)

Bjões…

Parabésn pelas dicas. continue por favor dando dicas pra gente. abraçaõ.