/Demo-StudioGhibli

Um catalogo de filmes de animação, com foco em ferramentas de acessibilidade, como audio descrição, tradução e paleta de cor apropriada para daltônicos

Primary LanguageJavaScript

Projeto Data Lovers - Desenvolvido no Bootcamp Laboratória

Studio Ghibli

Sumário


Definição do Produto ✏️

O Ghibli Wiki Foi elaborado com a finalidade de facilitar o dia a dia dos fãs e orienta-los com informações das suas obras preferidas do Studio Ghibli.

O Design do site foi pensando para trazer uma verdadeira imersão para o usuário, com a página Home sendo o portal de entrada, contendo um pouco do Studio e um Slide Show com alguns dos filmes mais famosos do Studio aqui no Brasil.

No site o usuário tem uma página de filmes com informações como, data de lançamento, diretor, produtor e Nota, fazendo com que o site reúna uma verdadeira Ghibli Wiki com variedade de filmes e seus detalhes.

Temos também a página de personagens, para aqueles que querem saber um pouco mais sobre cada personagem e suas particularidades, podendo ser usado para pesquisas ou apenas para matar a curiosidade apos ver um filme do Studio Ghibli. Nesta página é possível pesquisar por nome e ordenar por filme.

O site conta com responsividade, sendo possivel acessar do Desktop, Mobile(425px) ou Tablet(767px)

Implementamos recursos áudio visuais e alteramos as cores e contraste para proporcionar as pessoas com deficiência visual uma melhor experiência na utilização do produto.

Em Suma, Desejamos que o projeto consiga ajudar muitos admiradores do Studio Ghibli.


Usuário

Quem são os Usuários? 📜

  • Homens e mulheres a partir dos 18 anos.
  • Crianças a partir dos 7 anos que já iniciaram a leitura e escrita e adolescentes;
  • Pessoas com deficiência visual;
  • Fãs e simpatizantes de animes e mangás;
  • Pessoas que gostam de histórias relacionadas a cultura japonesa;
  • Consome conteúdo de qualidade, criativo, ilustrações;
  • Gosta de assistir filmes de aventura e fantasia;

Proto Personas 🙋‍♀️🙋‍♂️

Proto Personas

História de Usuário ✎

Historia de usuario 1


Protótipo

Protótipo de baixa fidelidade
Home

Protótipo Home

Movies

Protótipo Movies

Characters

protótipo Characters

Alta Fidelidade

Mobile(425px)

Mobile

Tablet(767px)

Tablet

Desktop

Desktop Desktop

Paleta de cores com contraste

Utilizamos as funcionalidades do adobe color para criar um melhor contraste e proporcionar uma melhor experiência no site para pessoas daltônicas.

Recurso Áudio Visual

Implementamos recurso áudio visual no nosso produto tornando possível escutar a descrição nos cards dos filmes. (Atenção, o áudio estará disponivel de acordo com o pacote de voz instalado no seu dispositivo.)

(inserir o gif do video aqui)


Como Utilizar? ⚙️

Na pagina inicial temos algumas informacoes sobre o studio.

Com o Click(Mobile ou Tablet) ou apenas passando o mouse por cima do menu lateral voce pode ter acesso ao restante do site e minhas redes de contanto.

Pagina Movies

Ao acessar pagina Movies temos várias formas de filtrar e pesquisar.

Barra de pesquisa: Podemos pesquisar por nome do Filme.

Filtro A-Z: Podemos ordenar os filmes por ordem alfabética, por data e por nota.

Filtro Director: Podemos ver todos os filmes do Diretor escolhido.

Filtro Producer: Podemos ver todos os filmes do Producer escolhido.

Para saber mais detalhes sobre o filme, basta apenas selecionar a capa ou nome de qual desejar.

Pagina Characters

Ao acessar pagina Characters temos várias formas de filtrar e pesquisar.

Barra de pesquisa: Podemos pesquisar por nome do personagem.

Filtro de A-Z: Podemos ordenar os filmes por ordem alfabética.

Filtro de Species: Podemos pesquisar por Espécies existentes no universo do Studio Ghibli.

Filtro Movies: Podemos pesquisar por Filme e encontrar todos os personagens.

Para saber mais detalhes sobre o Personagem, basta apenas selecionar a foto de qual desejar.


Tecnologias 🚀

Tec's
Figma
Git
JavaScript
CSS
HTML
Node.Js
Jest-Testes

Algumas demonstrações das funcionalidades:

Home

Resultado Final Home

Movies

Resultado Final Movies

Characters

Resultado Final Characters


Sobre as desenvolvedoras 🌻

  • Dayane Rodrigues



  • Flavia Almeida



  • Isabela Soares



  • Karina Mel



  • Louiza Lima



  • Natalie Silva




Badges

-figma Node.js EsLint Git JavaScript