Rodrigo Muniz > 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

Compare Preços de: MP3, iPod, celulares, notebooks, câmeras no Buscapé.

Tags:AI, conteúdo, redesign, redesing5.0