Após o desenvolvimento do fluxograma, foi desenvolvido o wireframe da aplicação, com a intenção de visualizar de maneira mais precisa como seria a distribuição de informações em cada tela e estudar sua viabilidade. O wireframe não contém textos e imagens, é uma versão de baixa resolução que foi analisada antes de ser transformado em protótipo.
Figma
O wireframe começou a ser estruturado em formato mobile, mas após integrações entre desenvolvedores e designers, foi adaptado para o formato inicial de desktop, uma vez que o PWA é responsivo, ou seja, adapta-se ao formato da tela do utilizador.
Desta forma, foi trabalhada o wireframe que serviu como primeira referência visual para que o grupo pudesse realizar definições mais incisivas do que seria mantido no protótipo e o que seria retirado ou adaptado.
O wireframe contém setas indicadoras e comentários para que todos tenham referência de como a aplicação fluirá.
https://www.figma.com/embed?embed_host=notion&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FPQPVk5k67eoy2GVm7U1iJT%2FBookfolio-Fluxograma-e-Wireframe%3Fnode-id%3D61%253A4178
<aside> 💡 Link: https://www.figma.com/file/PQPVk5k67eoy2GVm7U1iJT/Bookfolio---Fluxograma-e-Wireframe?node-id=61%3A4178
</aside>