Este projeto foi lançado na data do aniversário de Brasília, porém somente agora pude divulgá-lo.
O planejamento, conteúdo, arquitetura de informação, design, animação e desenvolvimento foram feitos pela TV1. Eu cuidei da parte de Arquitetura de Informação, começando pela infoestrutura:
O especial fala da história de Brasília, e além de textos, contém vídeos, áudios e galerias de imagens. A proposta foi fazer uma linha do tempo diferenciada, um pouco fora do padrão de linha do tempo que estamos habituados a ver, então parti para a segunda etapa como de costume: os benchmarks e em seguida os Rafes:
Para que todo o conteúdo não ficasse dentro de menus tradicionais, a ideia é que a navegação fosse feita através de três principais áreas (A cidade, O povo e A história) e a partir daí filtros que o usuário pudesse selecionar conforme o seu interesse.
Enquanto os rafes passavam pela aprovação, passei para a arte ir adiantando, pois como não tínhamos muito prazo as etapas tiveram que ser feitas no mínimo de tempo.
Conceito aprovado, iniciei então o desenho dos wireframes.
Não costumo colorizar os protótipos que faço, justamente para que a cor não influencie nas decisões do cliente, mas desta vez fiz questão de colorir algumas áreas, pois a presença da cor neste caso foi essencial para mostrar o funcionamento da navegação do site.
E como não se trata de uma navegação comum, criamos também mais de uma opção de navegação: Através das setas do teclado, pela roda do mouse, clicando nos conteúdos e finalmente pela própria timeline padrão que fica localizada abaixo do conteúdo central.
E para que não precisasse desenhar todas as telas, fiz uma página só de templates prevendo comportamentos diversos, como texto+imagem, texto+vídeo, texto+áudio e etc. Assim o editorial poderia escolher o template de acordo com a característica de cada conteúdo.
Enfim algumas telas do layout que o Caio Andreolli, Diretor de Arte aqui da agência desenhou:
O trabalho de motion e programação foi feito pelo Alessandro Luz
#1 por Rogerio Fratin at June 14th, 2010
Marco, Marquito…
Tava pensando em algumas coisas enquanto apreciava seu post. Por diversas vezes toquei projetos “pra ontem”, que a pedido (ordem) dos chefes ou responsáveis “não precisava perder tempo com wireframe, era melhor fazer direto o layout”. Sei que você também teve que encarar essa situação tão chata de desvalorização da estrutura principal dos projetos digitais. Ainda bem que saímos dessa fase, depois de muito custo e várias pequenas conquistas, mas sabemos que muitos designers ainda precisam fazer tudo a “toque de caixa” pra entregar e, muitas vezes nesse ritmo, não podem se dedicar ao início do projeto, à sua estrutura. E nem digo de lugares que não tem um especialista em USER EXPERIENCE como você. Tô falando das empresas que não investem num arquiteto e ainda por cima, não permitem que o designer junto com um jornalista, por exemplo, façam esse tipo de trabalho.
Seu belo post, além de mostrar cada etapa do projeto, permite que quem não conheça esse tipo de estudo e etapa passe a ter noção de como é um bem feito e também da importância que isso tem. E não só pra ele, pro chefe dele também, pro par, pra todo mundo.
Muito bem, Marquinho, é um esforço coletivo pra “tornar a internet melhor”. Sua parte você tá fazendo. E muito bem, aliás.
Parabéns novamente,
[ ]s
Roginho