Forum de Design
9

Re-desenhando um site (dica)

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 ;)

Artigos relacionados

Foto do autor

Canha

Canha é o criador do Design.blog e co-fundador do xCakeBlogs. Ele é designer e blogueiro. Arquivado na categoria Web Design



9 Comentários

  1. Vinícius Lira
    14/05/2009 às 10:29 | #

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

  2. Frank
    14/05/2009 às 17:49 | #

    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

  3. Diego Ghiggi
    15/05/2009 às 00:01 | #

    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.

  4. Canha
    15/05/2009 às 12:55 | #

    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

  5. Alexandre
    15/05/2009 às 17:29 | #

    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!

  6. Canha
    18/05/2009 às 11:12 | #

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

    Abraços,

  7. Anjodigital
    18/05/2009 às 13:01 | #

    Bem bacana, seu novo layout esta ficando muito bom,,, Parabéns!

  8. Siriguela
    19/05/2009 às 13:17 | #

    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

  9. Renann Corrêa
    29/05/2009 às 15:16 | #

    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.




Antes de comentar...

Antes de comentar, observe o seguinte:

  • Perguntas já respondidas na Lista de Perguntas Freqüentes serão ignoradas
  • Design é a profissão. O profissional é designer
  • Leia o artigo inteiro antes de comentar.
  • Em caso de pergunta, veja se já não foi respondido nos comentários acima
  • Comentários que começam com "Você pode..." ou variável, terá como resposta "Não. Faça sozinho". Use o Google e deixe de ser preguiçoso.
  • Spam, criancice e comentários em tiopês/miguxês serão apagados
  • É necessário ter o primeiro grau completo para comentar aqui. Se você abusar de frases sem pontuação ou mensagem em caps-lock, me reservo ao direito de escrachar você. Você foi avisado.

 

*
*