13 / 03 / 17

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:

  1. LucidChart
  2. Pidoco
  3. Visual-Paradigm
  4. Moqups
  5. Mockflow – WireframePro
  6. Wireframe.cc
  7. Cacoo
  8. Mockingbird

Além destes, acrescentamos:

  • 09: Uxpin
  • 10: Axure

Como escolher a ferramenta para wireframe:

Ferramentas para wireframe online

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.
Analise wireframing
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:

Larissa Lima

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *