O objetivo principal deste projeto é que aprenda a desenhar e construir uma interface web onde se possa visualizar e manipular dados, entendendo o que o usuário necessita.
- 1 - Projeto
- 2 - Experiência dos Usuários
- 3 - Desenho de interface do usuário
- 4 - Objetivos de Aprendizagem
- 5 - Testes de Usabilidade
- 6 - Desenvolvedoras
Projeto proposto no bootcamp da Laboratória. Proposta do projeto, construir uma página web para visualizar um conjunto (set) de dados que se adeque às necessidades do usuário do tema escolhido.
Nosso tema escolhido foi Studio Ghibli e terá uma página web pensando nos usuários que gostam e admiram os filmes e que permita visualizar dados dos filmes e personagens, filtrá-los, ordená-los e mostrar uma média de informação que seja relevante ao usuário (cálculo agregado).
Ao definir nosso tema buscamos entender quem eram os usuários e suas necessidades, realizamos uma pesquisa usando o Forms para obter mais informações, o que gostariam de ver, ou saber na página web.
Idades dos usuários
Usuário
- Informações, avaliações e sugestões relacionadas aos filmes
- Testes de personalidade, perfils dos personagens
- Todos os filmes feitos pelo estúdio
- Acho que idade sobre eles (Personagens)
- Informações sobre os filmes
- Curiosidades
Aceitação
- Adicionar funcionalidades a História do Usuário
- Adicionar nome, idade, sexo, espécie dos personagens conforme interesse dos usuários
- Adicionar filmes e informações sobre eles
- Inserir busca e filtros para facilitar a busca das informações
Pensando na interação e visualização dos dados, pensamos inicialmente em trazer cards das imagens dos filmes e personagens e os filtros no inico da página.
Protótipo de baixa fidelidade e Protótipo de alta fidelidade
As paletas de cores foi escolhida seguindo as cores da imagens selecionada para o fundo da página.
Neste projeto foi utilizado
HTML e CSS
- Uso de HTML semântico.
- Uso de seletores de CSS.
- Construir sua aplicação respeitando o desenho realizado (protótipo).
- Uso de flexbox em CSS.
DOM e Web APIs
- Uso de seletores de DOM.
- Gerenciamento de eventos de DOM.
- Manipulação dinâmica de DOM. (appendChild |createElement | createTextNode| innerHTML | textContent | etc.)
JavaScript
- Uso de condicionais (if-else | switch | operador ternário)
- Uso de laços (for | for..in | for..of | while)
- Uso de funções (parâmetros | argumentos | valor de retorno)
- Manipular arrays (filter | map | sort | reduce)
- Manipular objects (key | value)
- Uso ES modules (import | export)
- Diferenciar entre expression e statements.
- Diferenciar entre tipos de dados atômicos e estruturados.
Testing
- Teste unitário.
Estrutura do código e guia de estilo
- Organizar e dividir o código em módulos (Modularização)
- Uso de identificadores descritivos (Nomenclatura | Semântica)
- Uso de linter (ESLINT)
Git e GitHub
- Uso de comandos de git (add | commit | pull | status | push)
- Gerenciar repositórios de GitHub (clone | fork | gh-pages)
- Colaboração no Github (branches | pull requests | |tags)
Desenvolvemos pelo Forms uma pesquisa, solicitando os usuários acessar nossa página através de um desktop, tablet ou mobile, usando todas as funcionabilidades proposta para teste e nos retornando feedback ou sugestões de melhorias.
Retorno dos usuários
- 100% acharam que o site não demorou carregar;
- 100% não tiveram dificuldade ao usar os filtros;
- 98% não tiveram nenhum questão em visualizar as imagens;
- 98% não tiveram nenhuma questão com a leitura e tamanho das descrições;
Melhorias
- Imagens dos cards sendo reajustada para mobile
- Fonte e ajustes nas descrições estão sendo feita para mobile
| Erica Serpa | Joice Souza |
|---|---|
 |
 |
|
|