Skip to content

Projeto desenvolvido no bootcamp de front-end da Laboratoria São Paulo (turma SAP007). No evento da Laboratória denominado como Demo-Day, e optamos por implementar funcionalidades e refatorá-lo. Decidimos implementar recurso áudio visual tornando possível escutar a descrição em cada card da aba filmes e também modificamos a paleta de cores para …

Notifications You must be signed in to change notification settings

natalieiss/DemoDay-StudioGhibli

 
 

Repository files navigation

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


Implementações para as próximas versões

Recursos para pessoas disléxicas; Recursos para pessoas autistas; Suporte para leitura em linguagem de sinais;


Como Utilizar? ⚙️

Na pagina inicial temos algumas informacoes sobre o studio.

No menu à esquerda você encontrará a opção de filmes e selecionando-o habilitará a opção de linguagem português ou inglês, selecione as bandeiras no canto superior direito da aplicação web:

No menu à esquerda você encontrará a opção de filmes e selecionando um card haverá a possibilidade de escolher a linguagem para utilizar a descrição áudio visual:

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

About

Projeto desenvolvido no bootcamp de front-end da Laboratoria São Paulo (turma SAP007). No evento da Laboratória denominado como Demo-Day, e optamos por implementar funcionalidades e refatorá-lo. Decidimos implementar recurso áudio visual tornando possível escutar a descrição em cada card da aba filmes e também modificamos a paleta de cores para …

Topics

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 78.5%
  • CSS 11.0%
  • HTML 10.5%