Mockups de notebook que fazem um app web parecer real

O mockup de notebook é o jeito habitual de dizer que algo roda no navegador. Funciona porque a moldura traz um contexto que a captura sozinha não tem: escala, superfície e ponto de vista. O risco é que a tela de notebook é larga e baixa, então a interface dentro vira um borrão em tamanhos pequenos se você não planejar a captura pensando nisso.

Capture uma janela sensata, não o monitor inteiro

Ajuste o navegador para algo como 1440 × 900 antes de capturar. Uma captura de monitor ultrawide espremida em uma moldura de notebook desenha o texto na metade do tamanho e transforma seu layout em textura. Se a página deixar muito espaço horizontal vazio nessa largura, aumente o zoom da página em vez de reduzir a moldura: o mockup deve mostrar o layout que um visitante real vê, em tamanho legível.

Ângulo e tampa: pouco já basta

Uma inclinação leve dá profundidade; um ângulo forte transforma a tela em paralelogramo e mata a legibilidade. Se o mockup animar a tampa, abrir a partir de quase fechada é uma entrada de dois segundos bem eficaz em vídeo, mas para imagem parada mantenha a tampa quase vertical e a câmera quase de frente. Qualquer perspectiva que encurte um lado da tela em mais de dez por cento custa mais legibilidade do que agrega atmosfera.

Ancore com uma sombra e pare por aí

A sombra de contato suave sob a base é o que impede o notebook de flutuar. Mantenha pouco contrastada e perto do corpo; a mancha grande e borrada embaixo do aparelho é a assinatura visual de um template de 2013. Em fundo escuro, um fio de luz na borda superior ancora melhor que uma sombra. Uma única decisão de iluminação aplicada ao conjunto inteiro vale mais que luz ajustada imagem a imagem.