Criação do wireframe digital: definição de telas e decisões sobre conteúdos e navegação

 Dentro do Figma o wireframe começa a ser estruturado ainda a partir de imagens das telas feitas à mão livre em papel:

Ele será a base para a construção do wireframe digital:

Na sequência, os conteúdos já definidos ou aqueles que ainda estão sendo analisados começam a ser posicionados em suas respectivas telas:

Inclusive já é possível simular a visualização do aplicativo como ele seria numa tela de celular:

Mas ainda há bastante trabalho para a equipe fazer até que o protótipo funcional fique pronto. 

A interface começa a ganhar cara

No último dia 10 de junho nos reunimos na sala CC-108 da sede Centro da UTPR, campus Curitiba, para sentarmos e botarmos no papel tudo que já tínhamos coletado em termos de dados obtidos a partir de uma pesquisa visando identificar o público-alvo. Inclusive com a criação de personas:

A partir das informações disponíveis cada um fez esboços de possíveis telas do aplicativo em folhas de papel A4. Estas folhas foram coladas na parede para que todos pudessem analisar e fazer comentários e sugestões por meio de post-its: 

Depois as telas desenhadas foram recortadas de suas folhas para que pudessem ser combinadas entre si: 

Agora era a hora de deliberar sobre quais as telas que melhor se encaixavam no projeto:

E as diferentes telas foram colocadas lado a lado simulando um wireframe:

O próximo passo agora era jogar essas telas no Figma para que toda a equipe pudesse manipulá-las e construir a versão digital do wireframe.