Introdução
O Aprendizagem 21 é a mais nova aposta da Inca Tecnologia. Uma plataforma voltada inteiramente para o ensino a distância com foco na educação infantil. A plataforma deve atender o uso para professores e alunos.
Desafio
Todo layout das telas já havia sido projetado por por outro parceiro da Inca Tecnologia. Então, o desafio que veio pra mim foi: “dar vida as telas estáticas para que seja possível ver além do layout”. E também, uma forma de apresentar o projeto aos stakeholders de maneira que mostrasse o mais próximo possível do resultado final.
Entendendo o projeto
Para começar, eu analisei todo projeto e componentes para entender suas telas, fluxos e variações possíveis.
Feito isso, eu comecei a mapear os pontos chave que seriam cruciais e dariam o norte da prototipação.
O eixo principal dessa plataforma é seu menu de navegação, o qual vai sustentar toda prototipação.
Para deixar esse menu 100% navegável e funcional eu precisei reconstruí-lo trabalhando com micro componentes interativos.
E por fim, eu fiz todas as conexões entre o menu e com todas as telas do projeto.
São 4 menus, porque temos 4 estados possíveis de interação que não refletem na mudança de página e sim, somente, na abertura de submenus. É possível ver que as linhas lilás são conexões entre o menu, enquanto as azuis são as que levam para as páginas.
Organizando as telas e fluxos
Um ponto importante em projetos extensos como este, é a organização no Figma (ou qualquer que seja o software que use).
Como são muitas e muitas conexões, é muito fácil de se perder no meio de tudo isso. Então deixar uma organização limpa e com clareza na ordem e hierarquia vai te ajudar muito.
Visão geral com todas as telas e fluxos.
Visão no detalhe do fluxo de alunos.
Animações
Além das transições, eu busquei utilizar algumas animações para agregar mais ao resultado final.
Fluxo para criar o efeito de entrada dos itens do dashboard.
Componentes soltos que compõem algumas animações.
Animação de tela de espera.
Resultado final
Como o projeto está em execução ainda, não posso compartilhar o link do protótipo para poderem experimentar por vocês mesmos(as).
Então para conseguir compartilhar o resultado, eu gravei um vídeo de demonstração. Espero que gostem 🙂