wireframe_capa

Wireframe: ferramenta indispensável para o web designer

Começar um site já usando um programa como o Dreamweaver nem sempre é uma boa idéia. Mas isso não é uma regra pois vai depender também do tipo de trabalho.

Quando iniciamos com um editor web a tendência é achar que estamos ganhando tempo. Mas na prática quase sempre não é assim. Definir já de cara o tamanho das páginas, das imagens, dos textos, da navegação e a disposição destes elementos vai nos poupar um enorme trabalho que teríamos depois.

As ferramentas para a construção de wireframes se multiplicam na web e quase todas oferecem basicamente o mesmo serviço.

Além da disposição dos elementos na página (ou na tela, como preferirem), outra grande funcionalidade é o teste de navegação, quando também podemos conferir se o site tem uma coerência de cores, fontes, imagens, menus, etc.

Nos sites especializados dá para encontrar muitas dicas de aplicativos de wireframe com uma listagem grande de ferramentas.

Para mim, depois de alguns testes, estes são os escolhidos:

Obs: todos possuem alguma restrição — número máximo de páginas ou são versões de teste.

iPlotz

Bem completo e bastante flexível. Dá para fazer um projeto básico com 5 páginas. É pouco, mas o suficiente para visualizar várias soluções de design e de navegação. Possui funcionalidade drag and drop, trabalha com PNG, JPG e PDF e pode-se compartilhar a edição com outras pessoas. Tem preview de html.


MockFlow

Não possui tantas ferramentas quanto o iPlotz mas comporta um mockup mais refinado. Trabalha melhor com grids (tem o 960) e tem até reguas, um item que é uma mão-na-roda.. Uma de suas funções legais é a capacidade de montar um sitemap. Restrito a 4 páginas.


FlairBuilder

É o mais intuitivo de todos. Trabalha muito bem com text boxes, check boxes, tabs, drop-downs e “events”.


Cacoo

Não é muito intuitivo, meio complicado de se achar as funções. Mas, por outro lado, é bem simples e dá para se criar um layout com facilidade. Não se esqueça de usar o botão direito do mouse se quiser usar um grid.


Fireworks

Não é propriamente um criador de wireframe. Na verdade é uma ferramente bem completa, que permite se trabalhar com imagens de vetor, bitmap, além, é claro, de sua capacidade para se iniciar um site na  sua parte gráfica.

O Fireworks vai mais além: aceita css e fatias, se bem que estas funções são muito melhor executadas em editores específicos de web, tipo Dreamweaver.


Papéis para Wireframes

Se você prefere simplesmente o papel e lápis para poder desenhar mais livremente, existem também modelos de wireframes para imprimir:

Concept7 sketching paper A4 – PDF – 330Kb

Concept7 sketching paper A3 – PDF – 270Kb

Storyboard Template – PDF

Sites sobre Wireframes

CioHappyHour – oferece uma lista da maioria dos wireframes disponíveis e as suas principais funções.

Wireframes Magazine – um dos mais completos sobre o tema, com artigos, dicas, etc.

35 Excellent Wireframing Resources / Smashing Magazine – artigo bem completo com dezenas de links sobre o tema.

Wireframeshowcase – mostra como foi feito o wireframe de diversos sites. Excelente.

///

Paz

J Paz Filho - Sou jornalista, trabalho na produção de conteúdo editorial e na criação, desenvolvimento e manutenção de websites - incluindo e-commerce. Tenho especialização em design gráfico na Unisinos e já fui editor de mais de uma dezena de jornais e revistas especializados. Faça um orçamento enviando uma mensagem no contato; ou por email.

  • Patrícia

    Muito legal sua matéria. Parabens!

    • Paz

      Obrigado, Patricia. Qualquer dúvida é só postar aqui.

  • Patrícia

    Muito legal sua matéria. Parabens!

    • Paz

      Obrigado, Patricia. Qualquer dúvida é só postar aqui.