Challenge 2: Wireframing
(PT-BR) Esse desafio conclui a unidade de User Interface do Prework do Bootcamp!
Nessa etapa, obtive o meu primeiro protótipo interativo, realizado no Figma. YAY!
O app escolhido como referência para essa tarefa foi o NETFLIX. O app possui diversas funcionalidades sem deixar de ser bastante intuitivo e clean.
Para obter o protótipo interativo passei por algumas etapas e vou contar um pouco para vocês.
Primeiro, escolhi um “user flow” e capturei algumas telas (6 para ser exata).
A partir delas criei a minha versão wireframe no Figma. Confesso que apesar de complexo -por não tenho prática no software- eu adorei essa etapa, consegui descobrir coisa novas e praticar bastante. Achei muito gratificante ver tudo pronto!
O “user flow” escolhido foi a partir do momento em que o usuário abre o aplicativo no celular até encontrar o vídeo para assistir e realizar configurações de idioma e legendas.
Frame 1: Select User - o usuário pode escolher o seu perfil individual para acessar o app. Vale lembrar que no protótipo, a qualquer momento o usuário pode retornar a essa tela, através do ícone: home.
Frame 2: Home- a primeira página contém informações da página inicial, menu de navegação e acesso a alguns trailer. Nessa etapa o usuário pode acessar a página de pesquisa através do ícone: lupa.
Frame 3: Search - o usuário pode buscar seu título favorito, diretamente no campo de busca no topo da página. Também são exibidos os “top searches”. Ele precisa pressionar a opção escolhida para ser direcionado para as próximas páginas.
Frame 4: Info - após escolher o título o usuário é direcionado para as informações mais detalhadas. Como por exemplo: é possível fazer download do episódio? Onde parei? E por último, mas não menos importante, há o botão de PLAY.
Frame 5: Player - Chegou a hora de assistir! Aqui o usuário pode usufruir do seu momento de lazer e assistir o conteúdo escolhido. Muitos aplicativos de reprodução de vídeos oferecem algumas opções de configurações e o app da Netflix não seria diferente!
Frame 6: Settings - Ao clicar no ícone de configurações no frame 5, uma tela se abre acima da tela em que o vídeo é exibido. É possível alterar o idioma e a legenda dos episódios.
Você pode acessar o meu protótipo interativo aqui e depois comentar comigo o que achou. Que tal?
Essa etapa foi desafiadora, mas empolgante e divertida. O que eu mais tenho gostado dessa etapa do pre-work é a possibilidade de me colocar a prova em cada tarefa e perceber o quanto eu sou capaz de aprender. Ainda tem um longo caminho pela frente, mas estou super orgulhosa do que venho fazendo e animada para continuar!
