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!