image

Acesse bootcamps ilimitados e +650 cursos pra sempre

60
%OFF
Article image
Rafael Biasiolo
Rafael Biasiolo15/03/2024 17:48
Compartilhe

A Clockwork Orange Project - Processo Criativo

  • #JavaScript
  • #Bootstrap
  • #SASS

Gostaria de compartilhar meu processo criativo para o desenvolvimento do projeto A Clockwork Orange, no qual criei um site dedicado ao filme.

https://a-clockwork-orange-project.vercel.app/

Decidi utilizar Bootstrap e Sass, seguindo o conceito de Mobile First. Após pesquisa e compilação de textos, encontrei e implementei a Tipografia e Paleta de Cores oficiais do filme, dando início à concepção.

Sem um layout definido, já que não costumo usar protótipos, configurei o ambiente de desenvolvimento e criei uma estrutura padrão em HTML e CSS, trabalhando na primeira tela. A partir dessa tela, desenvolvi o conceito e organizei as seções baseadas na identidade do site.

Em seguida, realizei dezenas de testes, criando e ajustando imagens em diferentes tamanhos e formatos, utilizando o Canva. A diagramação de cada seção seguiu um estilo específico, com testes de disposição, espaçamento e alinhamentos.

Após criar todas as seções, refinei a estrutura e fiz ajustes mais detalhados, como troca de imagens, implementação de recursos (incluindo iframes do Youtube e Spotify) e padronização de estilos, além da revisão dos textos.

Após finalizar o design, fiz o primeiro deploy do site, enfrentando alguns contratempos com configurações, mas que foram resolvidos. Em seguida, integrei o site com os serviços do Google e fiz ajustes de otimização de SEO.

Todo o processo durou 3 dias, com momentos mais intensos de trabalho e desenvolver um projeto de ponta a ponta foi um desafio gratificante que envolveu diversas etapas e áreas do desenvolvimento web, desde a pesquisa inicial até a implementação final. Sei que o caminho de aprendizado ainda é bastante longo, mas aos poucos, vamos evoluindo.

Espero que gostem e aproveitem o site!

Compartilhe
Comentários (0)