Meu primeiro wireframe
- Pedro Iury
- 12 de jan.
- 2 min de leitura
Do esboço à estrutura: como transformei pesquisas, personas e análises competitivas em um wireframe funcional.
Tempo de leitura: 4 min~
Data: 12/01/2026
Olá, seja bem-vindo de volta!
Nos posts anteriores, percorremos uma jornada completa: mergulhamos nas dores da Leatrice através do Mapa de Empatia, mapeamos cada passo de sua rotina na Jornada do Usuário, definimos claramente o problema e até analisamos o que a concorrência oferece (e onde falha).
Mas hoje chegamos em um momento mágico: a hora em que todas essas análises, dados e insights finalmente ganham forma visual. Apresento a vocês meu primeiro wireframe de baixa fidelidade para o aplicativo PDV - o ponto onde a teoria encontra a prática.
Sobre o Processo
Antes de abrir o Figma e começar a desenhar retângulos, precisei responder a uma pergunta fundamental: "Como traduzir empatia em interface?"
Parece abstrato, mas foi exatamente esse o exercício. Durante essa fase, enfrentei a tentação comum a muitos designers iniciantes: pular direto para a estética. Querer fazer telas "bonitas" antes de fazer telas "úteis".
Mas me lembrei de tudo que aprendi com a Leatrice: sua necessidade de agilidade não era sobre ter animações legais, mas sobre reduzir toques. Seu desejo de controle não era sobre somente gráficos coloridos, mas sobre informação clara no momento certo.
Cada insight da pesquisa, cada dor do mapa de empatia, cada oportunidade da auditoria competitiva precisava encontrar seu lugar na estrutura da interface.
Criar wireframes de baixa fidelidade não é sobre fazer desenhos preliminares - é sobre validar a arquitetura da informação antes de se apaixonar por pixels. É a ferramenta que nos impede de construir uma casa bonita com a planta errada. E foi assim que criei meu primeiro Wireframe!
Todos os passos da minha pesquisa de UX — incluindo mapas de empatia, declaração de problema, jornada do usuário e auditoria competitiva — estão documentados no meu blog. Lá, compartilho meu processo de aprendizado e demonstro como executei cada uma dessas etapas!
Conclusão
Criar este wireframe de baixa fidelidade foi como dar o pontapé inicial, o start para tudo aquilo que venho trabalhando anteriormente . A frustração da Leatrice agora tem um botão para resolvê-la. Sua ansiedade com o caixa agora tem um dashboard para acalmá-la. Seu medo de errar agora tem confirmações visuais para preveni-lo.
O mais valioso desse processo? A capacidade de testar e iterar sem apego. Como não gastei horas escolhendo cores perfeitas ou ícones bonitos, posso mudar completamente o fluxo amanhã se um teste de usabilidade mostrar que não funciona.
Este wireframe é uma pergunta, não uma resposta. Ele pergunta: "Esta estrutura atende às necessidades reais que descobrimos?" E estou animado para buscar essa resposta nos próximos passos: testes de usabilidade, insights e wireframe de alta qualidade Nos próximos posts, vou mostrar exatamente como este wireframe evoluiu com base em testes reais, e como as decisões tomadas aqui se refletirão no protótipo de alta fidelidade.
Obrigado por acompanhar até aqui! A jornada está ficando cada vez mais concreta - e emocionante!
obrigado :)
Comentários