Para que serve um mockup
Uma captura de tela solta é plana e sem contexto. A mesma captura dentro de um celular mostra um produto que daria para segurar na mão. Parece pouca coisa. Numa página de loja ou num anúncio, muitas vezes é a diferença entre alguém rolar a tela ou tocar.
Os mockups aparecem:
- nas capturas da App Store e do Google Play;
- nas imagens de abertura e nos vídeos de produto dos sites;
- nos posts do Instagram, do TikTok e do LinkedIn;
- nas apresentações para clientes e nos portfólios;
- nos pitch decks para investidores.
Para quem desenha também há um lado prático. Um cliente olhando um PNG plano sempre acaba perguntando como aquilo fica no celular. O mockup responde antes da pergunta.
Tipos de mockup
Hoje se veem três tipos, e cada um é bom em uma coisa.
Mockup plano (2D)
A captura fica dentro de uma moldura de aparelho vista de frente. É rápido de fazer, o arquivo é leve e para as lojas costuma bastar. Mas tudo é visto do mesmo ângulo, e uma página cheia de mockups 2D logo fica repetitiva.
Mockup em foto
Alguém fotografa um aparelho de verdade, por exemplo um celular na mão ou um notebook numa mesa. A área da tela é marcada e o seu design entra com a perspectiva certa. Como a luz e o ambiente são reais, o resultado fica muito natural, e é por isso que funciona tão bem em redes sociais e sites.
Mockup 3D e vídeo de mockup
Um modelo tridimensional do aparelho. Você gira o celular em qualquer ângulo, move a luz e a sombra acompanha. A força está no movimento: o aparelho gira ou o notebook abre enquanto o app roda na tela. Para vídeos de lançamento e prévias da App Store, hoje é o tipo mais usado.
Mockup, wireframe e protótipo
Eles são confundidos o tempo todo. O wireframe é o esqueleto de uma tela: caixas, linhas, texto provisório e nada de cor. Serve para combinar o que vai onde. O protótipo é clicável: você toca num botão e abre a próxima tela. É o que se coloca na frente dos usuários nos testes.
O mockup mostra o design pronto, ou quase, num ambiente realista. Não dá para clicar; ele existe para ser visto.
Como criar um mockup
Antes havia dois caminhos: abrir um PSD com objetos inteligentes no Photoshop ou montar uma cena num programa 3D como Blender ou Cinema 4D. O primeiro é rápido mas limitado. O segundo é poderoso, mas leva semanas para aprender.
Hoje existem apps feitos para isso. No Mockup Center é assim:
- Arraste sua captura ou gravação de tela para o app.
- Escolha um aparelho (iPhone, Galaxy, iPad, MacBook, Apple Watch e outros) ou abra um modelo animado.
- Ajuste ângulo, luz e fundo e exporte em PNG ou vídeo.
O guia como criar mockup explica cada passo.
O que faz um bom mockup
Depois de ver muitas páginas de loja e posts de lançamento, os bons sempre têm os mesmos hábitos:
- A captura é nítida. Uma tela borrada deixa barata até a cena 3D mais caprichada. Faça na resolução real do aparelho.
- A barra de status está limpa: 9:41, bateria cheia, sem notificações. É detalhe, mas as pessoas notam.
- O fundo não compete com o produto.
- Cada imagem diz uma coisa só, com um recurso e um título.
