Segundo projeto realizado para o Bootcamp da Laboratória. O objetivo consiste em uma aplicação responsiva com informações sobre o jogo League of Legends, com opções de ordenação alfabética, por função do campeão e filtragem por nome, por exemplo.
Acesse o projeto: aqui
Desenvolvido por
Ana Leticia B. Prince
Linkedin | Github
Ana Paula Januário
Linkedin | Github
- 1. Resumo do projeto🗒️
- 2. Protótipos📽️
- 3. Pesquisa de Campo🖊️
- 4. Histórias de Usuários📌
- 5. Interface💻
- 6. Responsividade📱
- 7. Extra⏭️
- 8. Checklists de Objetivos Alcançados🏆
O projeto desenvolvido "Escolha seu Campeão" entrega ao usuário a possibilidade de escolher o melhor campeão para sua partida em League of Legends. A aplicação conta com as informações básicas para que o usuário realize sua escolha.
Desenvolveu-se protótipos de baixa e alta fidelidade. Para o primeiro (de baixa fidelidade) utilizamos uma folha sulfite branca. Para o segundo, utilizou-se o programa Figma. As interações da aplicação foram desenvolvidas com base em nossa pesquisa de campo e histórias de usuários. Todo o projeto foi criado pensando em todos os tipos de usuários, sejam eles novatos ou não.
Ao dar início a aplicação, foi desenvolvido um formulário com interesse em levantar todas as informações que um jogador de LoL gostaria de acessar. Já incluso imagens do protótipo de alta fidelidade para o usuário visualizar. Dentre elas: filtros por nome do campeão, ordenar de A-Z ou Z-A, filtros por funções, etc.
Após a pesquisa de campo utilizando o formulário, e após criação dos protótipos de alta e baixa fidelidade, montou-se por fim as histórias de usuários. Tela 1: Histórias de usuários de 1 a 8. Todas foram executadas no projeto desenvolvido.
A interface desenvolvida levou em conta todas as sugestões respondidas pelos usuários em nossa pesquisa de campo com potenciais usuários de nossa aplicação, e também com as histórias de usuários desenvolvidas.
Tela 1: Página inicial da aplicação. Ao lado esquerdo: menu de navegação com botões "Sobre", Buscar por: "Função" e "Dificuldade", "Ordenar Por" e "Mostrar todos". Na parte superior, logo do jogo, título, e botões interativos "Pesquisar por nome" e "Jogue agora!" com redirecionamento para o site de download do jogo.
Tela 2: Página "Sobre" com informações e histórias do jogo. ao lado esquerdo foi desenvolvido um botão "Voltar" para que o usuário retorne à pagina principal.
Tela 3: Animação de flip criada para os todos cards mostrarem mais informações dos campeões na parte de trás. É mostrado informações de Ataque, Defesa, Magia e Dificuldade, ordenadas com uma escala de 0 a 10 do campeão.
Tela 1: Criamos uma interface responsiva para telas com menos de 900px. Nessa aplicação, o logo e o botão "jogue agora" não aparecem para melhor funcionalidade do projeto em telas menores.
Tela 2: Foi desenvolvido um Side Bar na vertical, onde aparecem os botões de interação da aplicação, conforme versão desktop. O campo "Pesquisar por nome", ao ser pressionado, se abre para receber o nome do campeão desejado.
Desenvolveu-se um cálculo agregado na aplicação. Exemplo: usuário escolhe filtrar por função, e escolhe a opção: "Atiradores". Dessa forma, aparece na tela o número total de campeões com aquela função, e a porcentagem, como: "Campeões com essa função: 24. Ou seja: 17.91% do total."
- [:star2:] Usar VanillaJS.
- [:star2:] Passa pelo linter (npm run pretest)
- [:star2:] Passa pelos testes (npm test)
- [:star2:] Testes unitários cobrem um mínimo de 70% de statements, functions, lines e branches.
- [:star2:] Inclui uma definição de produto clara e informativa no README.md.
- [:star2:] Inclui histórias de usuário no README.md.
- [:star2:] Inclui rascunho da solução (protótipo de alta fidelidade) no README.md.
- [:star2:] UI: Permite ordenar dados por um ou mais campos (asc e desc).
- [:star2:] UI: Permite filtrar dados com base em uma condição.
- [:star2:] UI: É responsivo.