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

Publicado em 5 de Nov de 2007 às 00:40

Da prototipagem em papel ao wireframe

E continuamos trabalhando no Projeto Interdisciplinar da faculdade e o prazo das apresentações de layout correndo contra nós. Agora o grupo está dividido no tratamento de conteúdo e layout. Já temos 2 propostas de layout da home (quase) prontas para escolher uma que defenderemos na terça-feira para a professora de Planejamento Visual, tudo tem que ser justificado e isso é pior que criar 10 layouts. Terminamos os wireframes há um tempo mas não contei com detalhes como foi feita a prototipagem em papel e estruturação antes da digitalização.

Prototipagem em papel

O protótipo em papel nada mais é que um rascunho “responsável” da estrutura da página, ou seja, é rascunho mas há um limite para que não seja feito de qualquer modo e vire tempo perdido. Foi uma fase importantíssima para que o grupo pudesse soltar as idéias e pudéssemos discutir a organização de conteúdos cabeludos como Recordes de atletas e para-atletas, além de evitar perder tempo com a estrutura das páginas na fase do layout. Segue um exemplo não muito legível (a foto foi tirada com uma iSigth de um Macbook):

Prototipagem em papel
Era para ser a Inicial :)

Essa brincadeirinha no papel foi um pouco mais fácil porque já tínhamos criado o diagrama com a arquitetura da informação do site, se tivéssemos que criar a arquitetura ao mesmo tempo seria um desastre. Com a pilha de páginas em punho estava na hora de passar tudo pro computador.

Wireframes

Miniatura do wireframe da homepage

Sim, eu usava o Flash para fazer os Wireframes e já usei o Microsoft Visio, todos com seus prós e contras. Para esse trabalho acabei usando o Axure RP e é realmente muito fácil de operar como dizem, principalmente para criar wireframes de baixa e média fidelidade. Quem quer criar um protótipo navegável vai ter que estudar um pouquinho a documentação do produto, eu particularmente não gosto deles prefiro que a navegação nesse caso seja feita pelo sitemap mesmo. Enfim, o Axure não é perfeito mas é a melhor opção talvez devido ser feito com a finalidade quase que exclusiva de criar protótipos de softwares. Wireframes do projeto prontos e aprovados é hora de ir para o layout, mas isso eu conto depois da apresentação de terça.

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

  • Eu uso o Fireworks pra tudo, desde os wireframes (ele já vem com algumas bibliotecas que facilitam pra caramba, como radio, textarea e etc) até a criação final. :P

  • Muito legal a série :)

    Eu uso o flash para fazer wieframe também, gosto do jeitinho dele, mas não tive tempo de tentar usar o visio e o axure ainda.

    Abraços

  • Hehehehe… tá ralando no interdisciplinar, né. Já passei dessa fase. No meu caso, foi dado um tema: Bar Farândola. A idéia era formarmos equipes que competiriam para fazer o melhor site. A equipe vencedora (não, não foi a minha) fez por merecer: http://www.vagaweb.com.br/asjr/farandola/

    Sobre o post, normalmente eu uso o FireWorks ou o Corel para fazer wireframes. Talvez não seja a forma mais recomendada mas é como me sinto mais confortável. Já tentei usar o Axure (até coloquei um comentário na Infusa) mas não gostei muito não.

    Abraço!

  • Interessante esse processo. Gostei do wireframe gerado pelo programa… Vou dar uma olhada depois :)

  • Aaaaw eu fico tao emocionada quando eu vejo um esboço em papel :D no meu trabalho, e no teu, soh vejo o povo rascunhando direto no computador.
    Sim, eu sou louca. Kkkk
    Boa sorte p vcs ai :D
    Bjs

  • Teo

    Olá Rodrigo, gostaria de saber se existe: Investimento inicial para que um projeto necessite disso.

    Pois vejo que para projetos pequenos isso não é usual, estou correto?

  • @Teo Não entendi muito bem sua pergunta. A prototipagem é um processo que faz parte de qualquer projeto. Projetar qualquer coisa sem um protótipo fica complicado e até inviável.

    No caso de um website, se você começa direto no layout não vai ter o resultado que esperava porque além de se preocupar com o visual vai ter que decidir o lugar e função de cada elemento das páginas enquanto está criando a interface. Então essa fase já deve estar previsto no orçamento e no prazo passado para o cliente, sim. Espero ter respondido sua dúvida.

  • Teo

    Muniz, eu digo o seguinte: Vou criar um site simples, coisa de 20 páginas. Menu e sub-menus. Então para um site pequeno ñão é necessário ok?

    Apenas para sites “grandes” ou que sua arquitetura seja diferente, seria essa a minha pergunta.

  • Olá rodrigo,

    Esse Axure RP que gera a página com o sitemap ao lado? Gostei muito do produto gerado, sabe se existe algum produto free para essa finalidade, tão bom quanto? Sempre procurei, mas só acho produtos bacanas com licenciamento privado e pago.

    Abraço.

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