Como escolher ferramenta para wireframe
Costumamos chamar o wireframe de esqueleto ou planta-baixa de um projeto web. Convictos de que ele é fundamental para reduzir o retrabalho no desenvolvimento de site ou app, reunimos 10 sugestões para facilitar sua produção. Na análise, incluímos as aplicações mais populares e outras já experimentadas ao longo do tempo. Se você está em dúvida sobre qual ferramenta para wireframe escolher, o GPD te ajuda.
Ao digitar “wireframe online”, a primeira página do Google destaca:
- LucidChart
- Pidoco
- Visual-Paradigm
- Moqups
- Mockflow – WireframePro
- Wireframe.cc
- Cacoo
- Mockingbird
Além destes, acrescentamos:
- 09: Uxpin
- 10: Axure
Como escolher a ferramenta para wireframe:
A experiência com arquitetura da informação (fazendo ou observando) ajuda a formatar alguns critérios para escolher ferramentas para wireframe. No início dos anos 2000, o conjunto de elementos, recursos drag and drop e a exportação eram fundamentais. Hoje a necessidade de incluir a colaboração de outros profissionais no processo ampliou o leque. Já falamos sobre o papel do wireframe para evitar retrabalho no desenvolvimento de site, agora é hora de ajudar você a escolher a plataforma ideal para os seus protótipos.
Destacamos abaixo o que vale a pena observar:
- Plataforma online
- Sem instalação na máquina, você garante mobilidade para o seu time e não precisa ficar transferindo arquivos ou instalando o programa;
- Número de usuários
- Observe o seu volume de trabalho médio e responda: Quantos profissionais fazem wireframe simultaneamente? Esse será o número de acessos mínimo de que precisa;
- Recursos de UI e UX
- Grids para mobile, guias para alinhamento e demais funcionalidades focada nas boas práticas para as diversas telas ajudam bastante.
- Comentários
- Assim você pode realizar o checklist com indicações direto na tela. Adeus a lista de alterações por email;
- Compartilhamento
- Somado aos comentários, o compartilhamento permite que você realize a validação sem precisar ficar trocando arquivos;
- Prototipagem
- Verifique se a ferramenta permite simular cliques e funcionalidades por meio de link entre as telas;
- Criação de sitemap
- Hierarquizar as telas é fundamental para entender a navegação;
- Guias e documentação para desenvolvimento
- Permitir a consulta ao tamanho, espaçamento e funcionalidades esperadas facilita a comunicação entre design e desenvolvedor. E nem precisa de um arquivo específico para comentar tela a tela;
- Exportação dos arquivos
- Para garantir a memória do projeto, a exportação das telas em .PNG e .PDF vão ajudar os times de desenvolvimento na hora do back end.
Análise de 10 ferramentas para wireframe
Confira abaixo o resultado da pesquisa sobre os recursos disponíveis em cada aplicação, de acordo com os sites oficiais. Cada ferramenta para wireframe está numerada pra facilitar a visualização.
1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | |
---|---|---|---|---|---|---|---|---|---|---|
Plataforma online: | ✔ | ✔ | ✖ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✖ |
Usuários por plano: | 1-3 | S.L | 1 | S.L | 1-3 | 0-1 | 0-10 | S.L | 1-3 | 1 |
Recursos de UI e UX: | ✔ | ✔ | ✖ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
Comentários: | ✔ | ✔ | ✖ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
Compartilhamento: | ✔ | ✔ | ✖ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
Prototipagem: | ✔ | ✔ | ✔ | ✔ | ✔ | ✖ | ✔ | ✔ | ✔ | ✔ |
Criação de sitemap: | ✔ | ✔ | ✔ | ✔ | ✔ | ✖ | ✖ | ✖ | ✔ | ✔ |
Guias e doc para DEV: | ✖ | ✔ | ✔ | ✔ | ✔ | ✖ | ✖ | ✖ | ✔ | ✔ |
Exportação em Imagem | ✔ | ✔ | – | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
Exportação em .PDF | ✔ | ✔ | – | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
Exportação em .HTML | ✖ | ✔ | – | ✖ | ✔ | ✖ | ✖ | ✖ | ✔ | ✔ |
Confira a legenda:
- Nome das ferramentas: 1 – LucidChart | 2 – Pidoco | 3 – Visual-Paradigm | 4 – Moqups | 5 – Mockflow – WireframePro | 6 – Wireframe.cc | 7 – Cacoo | 8 – Mockingbird | 09 – Uxpin | 10 – Axure
- Marcadores: ✔ Sim | ✖ Não | – Não informado | S.L : Sem limite