Usando um mockup no topo de uma landing page

O topo é onde a maioria decide se continua lendo. Um mockup ali tem uma função: provar que o produto existe e mostrar de que tipo de produto se trata no primeiro segundo, antes de qualquer palavra ser lida. Todo o resto — exportação e posicionamento — decorre desse prazo.

Recorte dentro do aparelho em vez de encolher

Um celular inteiro flutuando no topo parece pequeno em telas largas e a interface fica ilegível. Recorte para o aparelho sair por baixo ou pela lateral da seção — a curva superior reconhecível já diz celular — e deixe a tela ocupar área de verdade. Mockups recortados também escalam melhor entre breakpoints, porque você desloca o recorte em vez de encolher a imagem inteira.

Primeiro imagem parada; vídeo se merecer o peso

Um vídeo de mockup que começa sozinho no topo é eficaz e caro: atrasa a primeira pintura, gasta banda no celular e consome bateria. Se usar, mantenha curto e mudo, coloque em loop, forneça uma imagem de capa para algo aparecer na hora e desative em telas pequenas. Muitas vezes um topo estático mais um vídeo curto mais abaixo converte igual e carrega numa fração do tempo.

Combine a luz do mockup com a página

Um aparelho renderizado em fundo escuro colocado numa página branca sempre vai parecer colado, mesmo com fundo transparente, porque a luz no corpo sugere um ambiente escuro. Renderize o mockup contra o valor que sua página realmente usa. Esse é o argumento prático para guardar o projeto do mockup e não só a imagem exportada: quando o site for redesenhado, você renderiza de novo em vez de retocar.