Wireframes: Conceito & Ferramentas

Os wireframes têm como função simular visualmente a estrutura organizacional das informações de uma interface, sem a preocupação de apresentar uma interface gráfica final. Eles auxiliam na avaliação de como o conteúdo e as funcionalidades devem ser inseridas e representadas, ou seja, a produção de wireframes visa prever erros estruturais e de rotulação, evitando um possível re-trabalho após o desenvolvimento da interface gráfica final.

De Acordo com Van Dijck (2003), os wireframes são esboços da interface que o usuário terá contato. Mostram o design de interface sem mostrar ainda o design gráfico, indicando como funcionarão links, botões funcionais e outros elementos que possam influenciar o uso da interface e a relação entre eles. Chak (2004) afirma que os wireframes devem apenas mostrar o contorno daquilo que será a interface, sem aprofundamentos no design gráfico.

Acredito que a produção de wireframes seja uma etapa essencial para uma visualização mais concreta do que será o projeto, auxiliando não apenas na estruturação hierárquica das informações, mas também no próprio desenvolvimento da interface gráfica. Para este post listei abaixo 5 ferramentas web que otimizam a produção de wireframes:

1-iplotz:
O iplotz é uma ferramenta muito bacana, você pode usá-lo tanto web como instala-lo em seu computador. Ele permite que você exporte e visualize seu wireframe em HTML, utilize recursos de grid e ainda possibilita que uma outra pessoa o acesse. A interface desta ferramenta é bem intuitiva seguindo um padrão de clique e arraste. Sua versão “free”, permite gerenciar um projeto por vez. http://iplotz.com

2-Mockflow:
Assim como a anterior, ela limita as contas “free” para apenas um projeto por vez e com no máximo 4 páginas. Sua principal vantagem é a versatilidade, ela oferece alguns recursos gráficos para desenvolver wireframes voltados para ipad, iphone, facebook e android. http://mockflow.com


3-Pidoco:

O pidoco possui uma interface muito amigável, semelhante ao iplotz. Ele permite criar wireframes com fluxo e assim como o Mockflow, oferece recursos para plataformas mobile e recursos para teste de usablidade. O legal é que estão oferecendo um mês de trial (período de teste) para novos usuários. http://pidoco.com

4-Cacoo:
É uma ferramenta totalmente free, bem simples e fácil de usar, permite que você compartilhe o seu projeto e mantenha conversas online (chat) em tempo real com membros da equipe.http://cacoo.com

5-MockingBird:
Esta é outra ferramenta free, um pouco mais simples, mas ainda assim bem parecida com o Cacoo. Funciona no Safari, Firefox e no Chrome. O curioso é que consegui usar essa ferramenta sem estar cadastrado no site. Ela pode ser uma ferramenta bem rápida quando você estiver sem tempo. http://gomockingbird.com/

6-Fireworks, Illustrator, Corel Draw & Outros:
Você não necessariamente precisa utilizar programas específicos para desenvolver wireframes, eles podem ser desenvolvidos utilizando ferramentas gráficas como o illustrator e o corel, por exemplo. Mas, as vezes os prazos são curtos e algumas das ferramentas que listei acima oferecem recursos que permitem mais rapidez na produção e na avaliação do wireframe por membros da equipe.

Gabriel Pinheiro
@gabrielboco

—————–
Bibliografia
DE MORAES, Anamaria; SANTA ROSA, José Guilherme. Avaliação e projetos no design de interfaces. 1 ed. Rio de Janeiro: 2AB, 2008.

Anúncios

4 comentários

  1. reusmachado · março 10, 2011

    Gostei das ferramentas apresentadas!
    =)
    Parabéns pelo post.

  2. Gustavo · março 15, 2011

    Tenho usado o WireframeSketcher (http://wireframesketcher.com/).
    É um plugin para o eclipse. Para quem já tem o eclipse instalado e tem familiaridade, é uma excelente opção. E ele disponibiliza licenças gratuitas, sem restrições, dependendo do uso que você for fazer.

    • Gabriel Pinheiro · março 15, 2011

      Bacana Gustavo, acabei de dar uma olhada na ferramenta aqui e achei bem interessante por ser um plugin do eclipse né? Eu utilizo bastante o eclipse e pode ser bem ágil você construir o wireframe e a aplicação no mesmo programa, uma boa dica!

      Abraço.

  3. Cebes · abril 4, 2011

    Curti o post meu caro, mas existe alguma dessas ferramentas para plataforma Linux (ubuntu) ou alguma similar?

    Abraço

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s