Re-desenhando um site (dica)

Por Canha | 14 de maio de 2009 | Tags: dicas, usabilidade, Web Design, Web Development, webdesign | 12 Comentários

Uma dica básica para quem está re-desenhando seu site: liste os problemas. Afinal de contas, um site só deveria ser refeito caso algo não esteja certo. E como identificar os problemas?

Identificando os problemas

Isso é extremamente importante. Se você está re-desenhando seu site é por que ele tem problemas. Quais? Qual o impacto desses problemas? Vou tomar como exemplo um site que estou re-desenhando:

site_problemas

Vamos fazer uma lista dos problemas que esse site apresenta:

Pouco contraste entre texto e fundo
Não há nenhuma descrição do que se trata o site
Cadê o link para a página inicial?
Cadê a busca?
A imagem principal é o que? Qual o objetivo dela?
O que é aquele “Hot news headlines”?

Há bem mais problemas (especialmente internamente), mas vamos nos focar nesses.

O ideal é que você tenha mais pessoas opinando sobre os problemas que o site pode apresentar. Faça um teste simples de usabilidade. Por exemplo, peça para alguém que você conhece que não saiba mexer muito com internet tentar navegar no site. Quais os problemas que ela encontra?

Com a lista de problemas em mãos, dá para começar a pensar em…

Possíveis soluções

Alguns problemas tem soluções fáceis e óbvias. Outras nem tanto. E é aí que vamos gerar outra lista oferecendo possíveis soluções aos problemas na mesma ordem (nesse exemplo, uso a / para oferecer mais de uma solução):

Deixar texto com cor preta / Escurecer o fundo
Colocar uma rápida descrição do que se trata o site no topo / Evidenciar o link “Sobre”
Colocar o link “Home” no menu
Criar uma caixa de busca rotulada “Busca” em um local específico do site
Dar menos ênfase àquela imagem (que é o portfólio) / Deixar apenas uma chamada ao portfólio
Remover o “Hot News Headlines” (que mostra as últimas do blog interno)

Faça tudo isso antes de começar a trabalhar no Photoshop ou desenhar rascunhos; com os problemas apontados e soluções oferecidas, o desenvolvimento do novo rosto do seu site vai ficar muito mais fácil.

Em tempo

Ando bem ocupado nessas últimas semanas com blog ficando fora do ar por problemas técnicos, novo emprego e vários serviços. Além disto, estou no processo de escrever um livro e atualizar o visual do Digital Paper. Eis um pequeno preview de como vai ficar:

v8_teaser

Em breve, novidades e mais atualizações ;)

Compartilhe o conhecimento

Canha

Criador e editor-chefe do Design Blog, trabalha como designer e programador no xCake. Nerd desde pequeno, ama tudo relacionado a internet. Seu maior sonho é entrar em algum quarto e dizer "Senhores, não se preocupem: sou da Internet".

Acesse seu site Siga no Twitter

Deixe seu comentário!

http://www.vlira.zip.net Vinícius Lira

Canha, Everaldo e companhia.. Só fera!!
Frank

Cara não concordo mto com suas soluções. O site usado como referência conheço bem…

O lance de contraste usar preto 100% nunca é aconselhavél, geralmente é bom usar uns 85% porque cansa menos a vista.
O nome da empresa já diz o que a empresa faz, não usaria um texto dizendo o que faz. Faria do mesmo jeito que é no link ABOUT, que é exatamente pra isso… como todas empresas costumam ter.
No campo de busca eu até gosto onde deixaram, talvez só mexeria no tom de onde digita o texto e faria como alguns campos deixando “digite aqui bla bla bla”.
No destaque da imagem achei válido do jeito que fizeram, porque é isso que é o foco deles, se não destacar isso, destacar o que?
Já o “hot news” tiraria mesmo, mas já que querem ter isso colocaria em um outro lugar mas sem tirar o foco maior nas outras coisas.

Abs
http://www.precisodedesign.com Diego Ghiggi

Concordo em partes. A única solução que eu realmente discordo é da cor das letras. Talvez um pouco mais escura, mas totalmente preto não ficaria bom.
http://digitalpaperweb.com.br Canha

Pessoal,
Escrevi “Possíveis soluções”. Não “soluções que devem ser aplicadas a todos os casos”. No caso desse site, a fonte é muito clara e em alguns monitores a legibilidade fica muito danificada. Não se atentem aos exemplos – são apenas exemplos ;)

@Frank – O nome da empresa nem sempre indica o que ela faz. A “Apple” não faz maçãs, né? ;)

Enfim, eu utilizei de exemplos para dar idéias. O objetivo deste artigo são as listas, não o conteúdo das listas que coloquei ali.

Abraços e obrigado pelos comentários
http://www.gemellaro.com.br Alexandre

Canha, há algum tempo tive a felicidade de conhecer o Digital Paper. Gosto muito de suas dicas e sugestões, são de grande valia para os profissionais que trabalham com design gráfico e web.

Sobre este artigo, concordo com vc… devemos antes de tudo identificar os problemas e SUGERIR soluções, não adianta perdermos tempo alterando tudo e no final percebermos que não era essa a solução.

Ia comentar o que os amigos acima disseram, mas vc já falou o que ia dizer…

Forte abraço, sucesso sempre!
http://digitalpaperweb.com.br Canha

Alexandre,
Muito obrigado e continue comentando aqui no Digital Paper ;)

Abraços,
http://www.anjodigital.com Anjodigital

Bem bacana, seu novo layout esta ficando muito bom,,, Parabéns!
http://www.heavytutorials.com Siriguela

O que eu faria: mudaria seria colocar o menu(topo) e colocaria no meio embaixo do banner e arrumaria as cores deles(tá parecendo feito com gradiente do fireworks baixado da internet.
E arrumaria o banner principal, tem uma bela parte vazia.

So isso mesmo
http://www.plastikastudio.com.br Renann Corrêa

Muito bom. Gerou algumas divergência de opniões quanto as soluções. mas entendo que é o redesign e não podemos imaginar essas soluções sobre o plano atual e sim como projeção!!

Gostei.
http://lourenzo.blog.br Lourenzo Ferreira

As imagens estão quebradas.
Felipe I. de Lima

Canha ótimo blog ( conheci hoje e já vi varios posts),

só uma coisa, as não estão aparecendo ^^

se cuida

http://design.blog.br canha

Valeu pela dica! Vou ver se encontro as imagens de novo ;)