O trabalho, que se torna um novo gênero em sí mesmo, será chamado... COWBOY BEBOP

Atualização

No dia 2 de novembro de 2021, recebi uma notificação no discord com a incrível notícia de que meu projeto venceu a competição com a maioria dos votos!! Vou deixar um screenshot do anúncio aqui porque fiquei muito orgulhoso disso.Abre em uma nova aba

01
Por que?

Eu criei esse projeto para a segunda edição da .

O desafio dessa WebJam foi criar uma website de uma página e não scrollavel para um filme qualquer. O site deve funcionar em qualquer tela e ilustrar o filme escolhido.

02
Design

Minha escolha de filme foi Cowboy Bebop, é um dos meus favoritos e ele grita personalidade com sua arte. A mistura de Jazz, Noir, Western e Espaço é única e serve como uma ótima inspiração para um site.

O principal desafio desse exercicio foi espaço. Tomei inspiração de tipos de mídia com a mesma limitação, como posters, artes de capa e a série em sí. Depois de passar uma quantidade desconfortável de tempo reassistindo a abertura de Cowboy Bebop, percebi que precisava incluir uma das cenas icônicas de silhuetas em um fundo colorido; Até encontrei uma das peças que inspirou os artistas do programa: a arte de capa do filme "Tokyo Drifter".

A esse ponto eu já havia decidido que seguiria a direção de um website que poderia ser confundido com um poster. Fiz um rascunho rápido em um pedaço de papel e comecei a programar.

03
Desenvolvimento

Evitando complexidade desnecessária, Eu abordei esse projeto de uma perspectiva minimalista, criei um arquivo HTML limpo com tailwindcss e construí um design responsivo com dois blocos principais, um para o conteúdo em texto e outro para a silhueta; No segundo, me inspirei na abertura do anime onde encontramos um paragrafo misturado na cor de fundo, contando uma história que acaba na ambiciosa frase que dá titúlo ao website "O trabalho, que se torna um novo gênero em sí mesmo, será chamado... COWBOY BEBOP".

Ficou claro que eu precisaria criar midia para a silhueta. Baixei o Adobe Illustrator depois de anos para fazer algumas figuras e me surpreendi com os resultados. Apesar do meu plano inicial de usar a silhueta como uma "máscara" que continha a animação da nave não ter funcionado, fiquei satisfeito quando usei um elemento de clip-path para cobrir a silhueta com um padrão de estrelas. Adicionar animações à fumaça e uma trilha criada pela nave deu vida ao que seria um poster entediantemente estático.

Para os toques finais, eu deixei o título quebrar sua caixa e sobrepor os elementos da silhueta, dando aquele sabor que faltava. Para criar aquela sensação de poster que eu queria, Adicionei uma imagem de papel amassado e com CSS filters transformei o website em algo que você acharia colado numa parede e finalmente tudo estava pronto.

04
Resultado

Você pode ver o website clicando aquiAbre em uma nova aba.
ou olhando para essas imagens:
Depois de trabalhar nesse projeto, estou mais confiante na minha habilidade de criar um design legal e traduzi-lo para código. Além de trabalhar com ferramentas de design como o Adobe Illustrator e Photoshop quando necessário. Também tive a chance de aprender uma nova biblioteca de animação chamada Motion One e adorei cada segundo do processo.

Gostei da experiência de WebJam e estou animado para participar das futuras edições.
Tipo de trabalho
  • Desenvolvedor FrontEnd,
  • UX/UI Designer
Ferramentas
  • Javascript,
  • TailwindCSS,
  • CSS,
  • Motion One,
  • Vite,
  • Rollup,
  • HTML,
  • Adobe Illustrator
Data

Out 2021

Tipo de projeto

Pessoal

Proximo projetoWasm Conversor de Gifs