Pular links da navegação e ir direto para o conteúdo

Publicado em 17 de May de 2010 às 08:45

Redesign: Sitemap e Wireframes. É a hora do conteúdo

A série de posts sobre a versão 5 do site continua e a coisa agora fica quente. Já estou cheio de idéias para fazer a faxina na casa e a hora de começar de fato a estruturá-las é agora.

Antes de estruturar o sitemap e os wireframes, que tal dar uma analisada como ficaria o sitemap novo com a mesma estrutura que o blog atual tem?

O antes

  • Acessibilidade
  • AI
  • Brasil
  • Cultura
  • Dicas e Resenhas
  • Faculdade
  • Geral
  • Navegadores
  • Opensource
  • Postuxos
  • Software
  • Tecnologia
  • Usabilidade
  • Vídeos
  • Web
  • Wenetus
  • WordPress

São 17 categorias que na verdade nada organizam, isto é exatamente o resultado de um site/blog sem foco. Tenho 5 anos de blog e 4 são deste site (tinha um blogger vergonha alheia) e quanto mais o tempo passava, mais me enrolava para classificar o meu conteúdo. Não houve planejamento. Em função disso não sabia exatamente o que ia escrever amanhã, poderia escrever sobre tudo. Pra mim, hoje esse blog poderia ter só a categoria “Geral”, não faria diferença.

Para a nova versão pensei até em usar só tags para resolver o problema, mas ai vou cair no risco de não obedecer o foco que quero dar, preciso de uma estrutura amarrada pra isso. E algumas coisas realmente podem ser reaproveitadas e outras podem ser agrupadas da estrutura atual.

O depois

Pensando no planejado para o público, olhando o conteúdo das principais categorias, e também dando uma olhada nos blogs de profissionais web por ai, cheguei a seguinte solução:

  • Dicas
  • Resenhas
  • Misc (Brasil, Cultura, Faculdade, Geral)
  • Mercado (Navegadores, Opensource, Software, Tecnologia)
  • Postuxos
  • Vídeos
  • Web & Interface (Acessibilidade, AI, Usabilidade)
  • Wenetus
  • WordPress

Sobraram 9 categorias, uma boa enxugada. Resolvi separar as resenhas das dicas, pois vou tentar dar um foco maior à dicas para desenvolvimento e produção de projetos web. Ia excluir a categoria “Postuxos” por ser uma piada sem graça e por existir o Twitter para desabafar e falar besteiras, mas ela da um toque pessoal e às vezes 140 caracteres não são suficiente. Então temos a versão final da lista do sitemap com outros pequenos ajustes:

Ai passei isso para o organograma:

Mas ai eu analisei e pensei, por que o Início já não poderia ser o Portfolio? O organograma final:

Pronto, é hora dos wireframes.

Não vou criar um inventário de conteúdo, não faz muito sentido quando eu mesmo sou o cliente e estou trabalhando sozinho. Mas em projetos do dia-a-dia é uma das fases que mais evita furos no escopo por parte do cliente e também o retrabalho, ou seja, não ignore a planilha de inventário para levantamento do conteúdo.

Wireframes

É importante agora, no início desta fase, ter um e apenas um objetivo fixo em mente para poder começar acertando, mesmo que você tenha mais de um objetivo no projeto foque no principal para começar. O meu será: Estrutura simples para apresentar a mim e meu trabalho. Então vamos tentar cortar da mente toda essa baboseira de blog que rodeia essa versão atual. É importante ir para o papel antes de abrir qualquer programa gráfico. Vá por mim, o resultado é muito melhor. A primeira tentativa:

*PEEEEN* – Depois de terminar essa versão eu só tinha uma coisa na cabeça: “Mas que merd* é essa?”. Isso não passa nem perto do simples e minimalista que tenho em mente. Mas o sono era o problema, tive uma semana pesada de reuniões e madrugadas de trabalho. Nada como “dormir no problema”.

No outro dia fui à caça de inspiração e percebi que realmente o modelo de blog/life streaming não queria sair da minha mente e eu precisava abraçar de vez o objetivo de criar uma coisa que fosse realmente simples. Comecei do zero e inclusive tomei outra decisão-chave para o conteúdo: a home será em inglês. O motivo é que acredito (nesse caso específico) que usando o inglês na home consigo atingir um público mais amplo com meu portfolio divulgando também a Wenetus. E minha proposta é tratar a home realmente como uma coisa especial e bem separada do blog, que continuará em português. Também tive a idéia de dividir a publicação deste redesign em 2 fases jogando primeiro a home nova no ar, deixando o blog intácto na primeira fase, mas isso é papo pra depois.

Usando o template para OmniGraffle do sistema de grid 960gs consegui chegar numa estrutura que finalmente me agradou:

De cara já me apresenta rapidamente com um texto curto (algum erro de ingles?), relevante e com vários links. Continuando já mostra uma área grande com um slideshow não só com imagens mas também já com detalhes dos trabalhos e as abas para filtrar.

Sacrifiquei do texto da descrição a faculdade, realmente não acrescentava muito no momento. Dessa home eu só não estou mostrando a solução que estou pensando para o Twitter, pois quero que seja um fator surpresa no lançamento. :) O que você achou? (Eu sei, em tempos de Twitter ninguém vai responder a um texto tão grande). Próxima etapa: O layout!

Faça o download do PDF completo

Você é Desenvolvedor ou Designer?
Leia o blog do VTEX Lab, núcleo de inovação para ecommerce da VTEX. Também escrevo por lá. :)

Tags:, , ,

  • por Muniz
  • Web

  • meu comentário é apenas um: eu quero ve o layout :D

  • Guilherme

    Muito bom Lança logo o layout euhuue.

  • Elisama Santos Cavalcanti de Souza

    gostei muito do seu fundo de tela.

Sobre

Nascido em 1984 é Desenvolvedor Web autodidata desde 2002. Hoje especialista em Design da Informação pela UFPE é Designer na equipe de UX no VTEX Lab (núcleo de inovação para ecommerce), da VTEX.

Saiba mais