- 1.Resumo do projeto e definição de produto
- 2.Sobre Rick and Morty
- 3.Objetivos de aprendizagem
- 4.História do usuário
- 5.Design
- 6.Teste de usabilidade
- 7. Linguagens e ferramentas utilizadas
- 8.Criadoras
O projeto foi desenvolvido pensando nos fãs da série Rick and Morty que gostariam de saber mais informações sobre os personagens. Nesta ferramenta poderão buscar informações a partir de filtros, como espécies, gênero e nome. Além disso irão encontrar cards com informações relevantes, como, local de origem, status, quantos episódios os personagens aparecem e também a imagem dos personagens.
Rick and Morty (em português Rick e Morty) é uma série de animação adulta norte-americana de comédia e ficção científica criada por Justin Roiland e Dan Harmon para o bloco de programação noturno Adult Swim, exibido no canal Cartoon Network.
A série estreou em 2 de dezembro de 2013 e acompanha as perigosas aventuras do cientista alcoólatra Rick e seu neto Morty, que divide seu tempo entre a vida familiar e viagens interdimensionais. Em 2016, suas duas primeiras temporadas foram lançadas na Netflix com a dublagem brasileira realizada pelo estúdio Dubbing Company, de Campinas, com tradução de Carlos Freires, e também foi transmitida nos canais pagos TBS, I.Sat e TNT Séries, atualmente é exibida no Brasil pelo canal Warner Channel desde 4 de maio de 2020 com a estreia do bloco do Adult Swim no canal. Em agosto de 2015, o Adult Swim renovou a série para uma terceira temporada de 10 episódios, que estreou no dia 1 de abril de 2017 com o resto da temporada programada para ir ao ar durante o verão do mesmo ano.
- Uso de HTML semântico
-
Uso de seletores de CSS
-
Empregar o modelo de caixa (box model): borda, margem, preenchimento
-
Uso de flexbox en CSS
-
Uso de seletores de DOM
-
Gerenciamento de eventos de DOM
-
Manipulação dinâmica de DOM
-
Diferenciar entre tipos de dados primitivos e não primitivos
-
Manipular arrays (filter, map, sort, reduce)
-
Manipular objects (key | value)
-
Variáveis (declaração, atribuição, escopo)
-
Uso de condicionais (if-else, switch, operador ternário)
-
Uso de laços (for, for..of, while)
-
Uso de funções (parâmetros, argumentos, valor de retorno)
-
Testes unitários
-
Uso ES modules
-
Uso de linter (ESLINT)
-
Uso de identificadores descritivos (Nomenclatura | Semântica)
-
Diferença entre expression e statements
-
Git: Instalação e configuração
-
Git: Controle de versão com git (init, clone, add, commit, status, push, pull, remote)
-
Git: Integração de mudanças entre ramos (branch, checkout, fetch, merge, reset, rebase, tag)
-
GitHub: Criação de contas e repositórios, configuração de chave SSH
-
GitHub: Implantação com GitHub Pages
-
GitHub: Colaboração pelo Github (branches | forks | pull requests | code review | tags)
- Desenhar a aplicação pensando e entendendo a usuária
-
Criar protótipos para obter feedback e iterar
-
Aplicar os princípios de desenho visual (contraste, alinhamento, hierarquia)
- Planejar e executar testes de usabilidade
Nós escolhemos 4 usuários para trabalhar em nosso web site.
Com base neles conseguimos visualizar bem o que seria necessário para atender as necessidades deles e desenhar o layout da página:
Começamos fazendo um desenho a mão para ter um ponto de partida e ter uma ideia de por onde começar...
Então depois disso fizemos o protótipo de alta fidelidade no
figma, que possibilitou a simulação do resultado da aplicação. Nossa intenção foi fazer uma interface simples, amigável e escolhemos cores que que remetesse a série. E este foi o resultado final...
Ao finalizarmos a aplicação compartilhamos o projeto com algumas pessoas que no geral deram um feedback positivo do site e também tivemos retorno de alguns problemas de usabilidade, como os cartões estarem em dois idiomas, o campo da pesquisa não estava bem claro que era só por nome, difícil de deixar o mouse no meio da tela (os cartões ficam virando) e demora pra carregar as fotos.
O problema do idioma resolvemos deixando o site todo em inglês por causa do arquivo de dados que estão todos em inglês e a parte do campo de pesquisa deixamos mais explicativo.
 Marione Pereira |
 Julia Benedicto |