Pular para o conteúdo
Voltar para todos os projetos

Shopping Vila Bella

Landing page de um shopping fictício — exercício deliberado de movimento, hierarquia e layout responsivo.

Ano
2025
Função
Sozinho — design e desenvolvimento
Stack
  • React
  • TypeScript
  • Vite
  • Tailwind
  • Framer Motion
Shopping Vila Bella

Por que um cliente fictício

A maior parte do meu trabalho é sistema em que a interface existe para sair da frente — intranet, painel administrativo, lista. Esses são os instintos certos para ferramenta interna e os instintos errados para qualquer coisa que precise vender.

Então me dei o briefing oposto: uma landing page comercial de um shopping que não existe, onde o trabalho inteiro é persuasão visual e nada se esconde atrás de “é ferramenta interna”.

No que foquei

Movimento com propósito. Os elementos animam ao entrar na viewport, usando intersection observer para nada rodar fora da tela. A regra que segurei foi que toda animação precisava dirigir atenção para alguma coisa — movimento decorativo foi cortado.

Hierarquia acima de decoração. Uma landing page de shopping tem muita coisa para dizer ao mesmo tempo: lojas, horários, localização, eventos. O trabalho foi decidir o que quem chega pela primeira vez precisa nos três primeiros segundos e fazer todo o resto esperar a vez.

Responsivo como ponto de partida. Tráfego de varejo é esmagadoramente mobile. O layout estreito foi o primeiro que desenhei, não o que espremi depois.

O que tirei disso

Framer Motion torna muito fácil animar demais. A versão que foi para o ar tem visivelmente menos movimento que a primeira que construí, e ficou melhor por isso — contenção acabou sendo a habilidade de fato treinada.