O poder do Wireframe para desenvolvimento de aplicativos

Felipe Kaça Petersen
Kaça Falcão
Published in
3 min readJan 5, 2021

O que é um Wireframe?

Wireframes são prótotipos que servem essencialmente para apresentar a ideia de um aplicativo, mostrando seu fluxo, distribuição de elementos como botões e textos. Ele não precisa (nem deve!) ter um design caprichado e detalhado, inclusive, muitas pessoas usam caneta e papel para faze-los.

Wireframe vs Design final

Quando estamos planejando o design de um aplicativo, é normal termos diversas ideias sobre cores, formatos, ilustrações que queremos nele… Porém nada disso é importante para o wireframe! Ele tem o propósito de validar aquilo que queremos desenvolver, antes de realmente começar a colocar a mão na massa. Ele se tornou uma ferramenta muito importante nos dias de hoje, por ser muito mais flexível de mudar, e que é compreendido por todos os participantes do desenvolvimento, servindo para o alinhamento dos mesmos.

Pensando do ponto de vista do designer, o wireframe também é muito interessante para apresentar para os clientes. Afinal, um wireframe é muito mais fácil e rápido de mudar do que um design final bem trabalhado, com cores, fontes e tamanhos já decididos. O que é melhor jogar fora: uma folha de papel rabiscado ou uma tela inteira que levou algumas boas horas para fazer? O wireframe está ai para ser jogado fora assim que aparecer alguma mudança!

Sanar dúvidas e alinhar times

Vamos colocar numa sala algumas pessoas: um cliente, um gerente de projetos, um designer e três desenvolvedores. Agora, vamos pedir para que todos pensem numa tela de criação de conta. Cada uma das pessoas vai imaginar essa tela de uma forma diferente. Qual ordem dos campos? Nome, email, senha? Quais campos são importantes? Quantos passos vai ter esse fluxo, tela única ou mais de uma tela?

Esse cenário é muito comum quando começamos a planejar um aplicativo. E também é o momento perfeito para começar a desenhar. Com o wireframe, é possível ter um elemento visual para todas os membros do time, facilitando o alinhamento e a melhoria da tela e do fluxo. Além disso, muitos pontos que poderiam passar despercebido, são resolvidos no wireframe.

O design certo

Um wireframe é uma ótima ferramenta para alinhamento e entender aquilo que será feito. Porém, devemos ter cuidado para quem apresentamos ele. Se não for explicado o fundamento do wireframe e qual o seu propósito, pode ser que a pessoa fique confusa, achando que aquele pode ser como será o design final, ou pior, achar que você está sendo “preguiçoso”. Por isso, é importante deixar claro que o design final não será nada parecido com o wireframe, e que este serve apenas como uma referência e que existem muitas mudanças para serem feitas.

Vai um wireframe aí?

Quer fazer um wireframe do seu app? Conversa com a gente! Nós possuimos templates para facilitar a sua vida, e podemos te ajudar a monta-los, tudo isso de graça!

Feito com carinho pela Kaça Falcão

--

--

Felipe Kaça Petersen
Kaça Falcão

Desenvolvedor por 4 anos, sendo 2 dedicados a Flutter e 2 dedicados a iOS, com passagens também como UI/UX em projetos pontuais.