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.

Perfeito para aquele “binge-watching” de respeito, não é?

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).

Screenshots do aplicativo: Netflix.

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!

- é só clicar no link para acessar no Figma -

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!

- minha reação quando vi o protótipo bonitinho e funcionando -

Biologist based in Amsterdam. Discovering a new world at Ironhack Bootcamp: UX/UI Design

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store