Programar um app sem ter desenhado as telas é uma boa forma de refazer tudo no meio do caminho. O wireframe resolve isso com pouco esforço.
O que é e para que serve
Wireframe é o esqueleto de uma tela. Você marca onde ficam o título, o menu, as listas, os campos e os botões, sem se preocupar com cor, fonte ou foto. Ele ajuda a:
- Decidir o que aparece em cada tela e em que ordem.
- Mostrar a ideia a outras pessoas e receber opinião cedo.
- Estimar o tamanho do trabalho antes de começar.
- Perceber telas que faltam, como erro, lista vazia ou confirmação.
Passo a passo para fazer o seu
- Escreva em uma frase o que o usuário quer fazer no app.
- Liste as telas necessárias para completar essa tarefa, do início ao fim.
- Desenhe cada tela em papel ou em uma ferramenta digital, usando retângulos e textos curtos.
- Ligue as telas com setas para mostrar o caminho entre elas.
- Revise cortando tudo que não ajuda na tarefa principal.
Ferramentas
O papel e a caneta funcionam muito bem. Entre as digitais, há editores de design e quadros online, vários com plano gratuito. Os recursos e limites mudam, então compare antes de escolher.
Teste antes de programar
Mostre o desenho a duas ou três pessoas do público do app e peça que expliquem o que fariam para concluir a tarefa. Observe onde elas hesitam, sem explicar nada. Cada dúvida é um ponto a ajustar agora, quando mudar custa quase nada.
Para saber a quem o app se destina, veja público-alvo e persona de um app.
