[ Destaque Home ] [ Usabilidade, AI, UX ]
Cinco ferramentas para a produção de wireframes
18 de março de 2011, 23:28
O wireframe é etapa essencial para visualizar projetos, estruturar informações e desenvolver a interface gráfica. Conheça ferramentas que ajudam muito.
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 isso listei abaixo 5 ferramentas web que otimizam a produção de wireframes:
iPlotz
O iPlotz é uma ferramenta muito bacana, que pode ser usada na web e também instafada no 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.
.
Mockflow
Assim como a anterior, o Mockflow 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.
.
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.
.
Cacoo
É uma ferramenta totalmente free, bem simples e fácil de usar. O Cacoo permite que você compartilhe o seu projeto e mantenha conversas online (chat) em tempo real com membros da equipe.
.
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 o MockingBird sem estar cadastrado no site. Ela pode ser uma ferramenta bem rápida quando você estiver sem tempo.
.
Fireworks, Illustrator, Corel Draw e 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 às 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.
Bibliografia
DE MORAES, Anamaria; SANTA ROSA, José Guilherme. Avaliação e projetos no design de interfaces. 1 ed. Rio de Janeiro: 2AB, 2008. [Webinsider]
…………………………
Conheça os planos de hospedagem da HostLayer.
Acompanhe o Webinsider no Twitter.
(Sem avaliação)
Loading ...Palavras-chave relacionadas a este texto: [Formação profissional] [wireframe]
Comentários
24 comentário(s)
Adesivos EtiBrasil
Data : 13/10/2012 às 12:05
Cidade: São Paulo
Atividade:
Muito bacana! Tenho aprendido muito e aplicado com essas ferramentas.
Karen
Data : 07/07/2012 às 14:53
Cidade: São paulo
Atividade: Diretora
Vamos co tudo Photoshop! ;)
Luiz
Data : 07/07/2012 às 11:27
Cidade: São Paulo
Atividade: Criação e Otimização de Sites
Uso o Axure!
Na minha humilde opinião é o melhor que existe rs
Grande artigo
abs
4 Cores Comunicação
Data : 04/07/2012 às 16:36
Cidade: Criciúma
Atividade: Otimização de sites
Concordo com o Pablo Augusto, nada como improvisar com os bons e velhos Photoshop e Illustrator... haha
Escritorio de Advocacia
Data : 04/06/2012 às 13:23
Cidade: São Paulo
Atividade:
Muito fera as dicas! Valeu galera
Ribbon Misto
Data : 04/05/2012 às 11:25
Cidade: São Paulo
Atividade:
Valeu muito o artigo. Saudações
Paulo Alexandre
Data : 01/05/2012 às 18:40
Cidade:
Atividade:
Parabéns pelo POST, vai ajudar muito em nossos próximos projetos!
Fitas de Cetim
Data : 27/04/2012 às 09:14
Cidade: São Paulo
Atividade: Webdesigner
É interessante também salientar sobre as ferramentas da mestreSEo. Trazem diversas ferramentes no que atine a melhorias no site.
Fitas de Cetim
Data : 21/04/2012 às 10:02
Cidade: Barueri
Atividade:
Conforme salientou o Marcelo o iPlotz e o Mockflow é realmente única. Vale a pena conferir.
André Ribbon
Data : 21/04/2012 às 09:58
Cidade: São Paulo
Atividade: Webdesigner
Não podemos deixar de citar a ferramenta de notas da mestreseo. A mesma possibilita a verificação de todos os requisitos onpage de uma página.
Luiz Monteiro
Data : 27/03/2012 às 12:17
Cidade: Belo Horizonte
Atividade: CEO Brasil na Web
Usamos recentemente o PIDOCO e o MockingBird com base nas sugestões aqui da Webinsider. Muito boas as ferramentas e tem ajudado bastante no processo de planejamento e arquitetura da informação para a criação de sites.
Marcelo Leal
Data : 31/10/2011 às 16:49
Cidade:
Atividade:
Se estiver pensando em ferramentas online com certeza hoje o iPlotz e o Mockflow são os mais indicados, mas até mesmo papel e caneta são muitos bons para este trabalho, o que temos que nos conscientizar é que fazer o wf poupa muita dor de cabeça dinheiro e tempo, já que quase sempre há algum tipo de retrabalhos se tudo não estiver muito claro para a equipe de desenvolvedores.
Gabriel Pinheiro
Data : 19/10/2011 às 19:47
Cidade:
Atividade:
Com certeza Juliano, os WF servem para evitar o re-trabalho que consome tempo e aumenta o custo do projeto.
Além disso, é uma excelente forma de para organizar as ideias e realizar bastantes testes e experimentos.
Obrigado,
Abraço.
Juliano Barbosa
Data : 19/10/2011 às 15:55
Cidade:
Atividade:
Excelentes dicas que auxiliam bastante no dia a dia da agência. Ganha-se bastante tempo no desenvolvimento do projeto quando se produz o WF antes de iniciar a criação efetiva do job.
Peter Severin
Data : 15/04/2011 às 03:54
Cidade:
Atividade:
Another rapid wireframing tool is WireframeSketcher: http://wireframesketcher.com . It comes in two flavors: a standalone version and a plug-in for any Eclipse IDE.
Ricardo P. Silva (RPS.info)
Data : 25/03/2011 às 14:43
Cidade:
Atividade:
Acho relevante também citar o Balsamiq (http://balsamiq.com/products/mockups)
André Rocha
Data : 25/03/2011 às 11:40
Cidade:
Atividade:
Para prtótipos navegáveis nada mais completo e simples de usar do que o Axure!
http://www.axure.com/
adreson
Data : 22/03/2011 às 23:52
Cidade:
Atividade:
O livro do Santa Rosa é um pouco incompleto, fala em prototipagem em papel mas sem mencionar os wireframes.
Reforçando os outros comentários, temos os recursos:
- lápis e papel
- Pencil project
- Power Point (há empresas grandes que utilizam)
- Axure (completo, porém pago, PC/MAC)
- Omnigraffle (MAC)
O uso do Illustrator e o Corel para wireframes nem sempre é vantajosa, depende da habilidade do designer. Além níveis de detalhamento, o que conta mais em certos projetos é a demonstração da interação.
Gabriel Pinheiro
Data : 20/03/2011 às 21:52
Cidade:
Atividade:
Bacana todos os comentários gente, obrigado.
Com certeza vou dar uma conferida nas sugestões de vocês, acho que a utilização de plugins nos navegadores será uma coisa cada vez mais constante e útil.
O lápis, papel, improviso e a criatividade sempre tem que estar a nossa disposição, sendo indispensáveis para nossas criações diárias. ótima dica.
Assim que eu der uma experimentada nesses aplicativos, venho aqui falar com vocês.
Abraço, e sintam-se á vontade para add o meu email.
Pablo Almeida
Data : 19/03/2011 às 23:42
Cidade:
Atividade:
Temos o Axure (Windows e Mac) e o OmniGraffle (Mac), que são bem completos e ideal para projetos mais parrudos. No caso das ferramentas on-line, acho que o iPlotz e o Mockflow são as melhores.
Correndo por fora, temos também: Fireworks, Photoshop, Illustrator e até mesmo o PowerPoint! Hehehe...é a arte do improviso!
Excelente post, Gabriel! :)
Adriano
Data : 19/03/2011 às 20:48
Cidade:
Atividade:
Alem do citado Pencil Project, temos o Axure.
Ananda Matos
Data : 19/03/2011 às 16:09
Cidade:
Atividade:
Esqueceu de mencionar o bom e velho lápis e papel.
Edir Dumaszak
Data : 19/03/2011 às 09:24
Cidade:
Atividade:
Adicionaria mais um item a sua lista:
- Pencil Project
Plugin para o firefox, ele permite construções de wireframes e outros diagramas no estilo do MS Visio.
É GPL e pode ser baixando em:http://pencil.evolus.vn
Newsletter
Rafael Paulino desenvolvedor web e mobile
Data : 26/02/2013 às 12:05
Cidade: São Paulo
Atividade: Desenvolvedor web e mobile
Eu utilizo o mockflow.com para a criação dos meus wireframes, essa ferramenta vem crescendo muito e é uma excelente opção por um custo bem acessível.