Case 10 / 11

Imóveis de Primeira

Landing page do Poty, studios ao lado do Shopping Mueller, com a marca e as pinceladas tiradas do e-book.

Cliente: Imóveis de Primeira Norte, imobiliária de Curitiba, para o Poty, da construtora Martelli
Meu papel: Direção, design e construção da página
Entregas: Landing page com abertura própria, hero em cena, andar e prédio em infográfico, mapa com rotas, galeria e formulário

AberturaO vitral da capa do e-book se desenha, a assinatura se escreve e voa para o hero; depois a página rola até as plantas. Gravação real da página.

Problema

Um lançamento de studios no Centro de Curitiba e um e-book de 30 páginas como todo o material: marca, pinceladas, paleta, fotos e plantas. A imobiliária precisava de uma página de campanha com a cara do prédio, rápida no celular e que levasse ao formulário e ao WhatsApp.

Solução

A marca saiu do e-book: o vitral da capa virou a abertura, as pinceladas viraram molduras, o andar foi redesenhado sobre a planta de pavimento e o mapa ganhou as rotas a pé e de carro. HTML, CSS e JavaScript estáticos, sem framework, com cada clique medido por evento.

(01)

Hero

A primeira tela, com a assinatura.

Papel à esquerda com a assinatura, o título, o preço e dois botões; a fachada à direita, com o recorte colorido da capa transbordando para o papel. Embaixo, cinco fatos que são atalhos para as seções.

Hero do Poty: a assinatura Poty, o título Morar e investir ao lado do Shopping Mueller, studios a partir de R$ 285 mil, os botões, e à direita a fachada do prédio com o recorte colorido do vitral — HeroAssinatura, título, preço e botões no papel; a fachada e o vitral à direita; os cinco fatos embaixo.

(02)

Infográficos

O prédio desenhado, nível por nível.

O andar visto de cima foi redesenhado sobre a planta de pavimento do e-book, na proporção real. O corte da torre liga os cinco níveis às fotos, e o mapa traz dez pontos com a rota de rua, a pé e de carro.

Seção de plantas do Poty: abas Studio, 1 dormitório e 2 dormitórios, a planta ampliável, metragem e preço, e embaixo o andar tipo visto de cima, redesenhado sobre a planta de pavimento, com o corredor, os studios, os elevadores e a escada — AndarO andar visto de cima: paredes, portas, janelas e móveis onde a construtora desenhou, com as unidades da aba acesas.

Infográfico do Poty: o corte da torre com a faixa de madeira, os níveis rooftop, 3º ao 18º, 3º andar, 2º e térreo, e o trilho de fotos ao lado — PrédioO corte da torre, do rooftop ao térreo, com a foto de cada nível.

Localização do Poty: o título O Centro inteiro a uma caminhada, três números, as fotos da praça e do shopping em molduras de pincel, o endereço, o mapa com os pontos a pé e de carro e a lista de lugares com o tempo até cada um — MapaO Centro a uma caminhada: dez pontos com a rota de rua desenhada e o tempo a pé em cada um.

(03)

Celular

A página inteira, rolando no celular.

Na primeira página da série, 88% das visitas vieram do app do Instagram e do Facebook. O Poty nasceu para essa tela: fachada em tela cheia, preço e botão acima da barra fixa, andar girado para caber em pé e formulário que cabe na janela do navegador do app.

RolagemDa fachada ao formulário.

A seção de plantas no celular: o andar tipo visto de cima girado em pé, com a rua em cima, os studios acesos e os nomes ao lado das janelas — PlantasO andar girado 90°, nunca esticado.

A seção do prédio no celular: o título Espaços que descomplicam a rotina, o corte da torre e a lista dos níveis, do rooftop ao térreo — PrédioO corte da torre, com os cinco níveis.

A localização no celular: o endereço, o filtro a pé e de carro e o mapa preso no topo, com a lista de lugares passando por baixo — LocalizaçãoO mapa fica preso; o ponto que passa por baixo acende.

(04)

Resultado

Uma página no ar.

Estática, leve e medida por evento. O que a primeira página da série ensinou entrou aqui desde o começo.

0,96 saté a primeira tela aparecer no computador, 0,93 s no celular, medido com CPU quatro vezes mais lenta e rede de 10 Mbps

~500 KBe 24 requisições na primeira carga, com as fotos em AVIF e WebP

0frameworks e dependências em produção: HTML, CSS e JavaScript estáticos

10pontos no mapa com a rota de rua desenhada, a pé e de carro

O que a primeira ensinou

A análise das sessões da primeira página da série mostrou que 88% das visitas vinham do app do Instagram e do Facebook. No Poty, o preço ficou na primeira tela do celular, as fotos abrem ao toque e o formulário cabe inteiro na janela do navegador do app.

(Próximo case) 11 / 11

V4 Fighters

Um jogo de luta de fliperama com o time como personagens, feito para engajar e divertir.

Abrir o case

Imóveis de Primeira

Problema e solução

A primeira tela, com a assinatura.

O prédio desenhado, nível por nível.

A página inteira, rolando no celular.

Uma página no ar.