Mockups de UX/UI em 3D que rolam no notebook e celular

Você manda o link do arquivo e o cliente abre um canvas com quarenta frames. Ele não sabe qual é a home. Clica em alguma coisa, o cursor de outra pessoa passa pela tela e ele fecha a aba. Chega na call sem ter visto nada, e os primeiros dez minutos vão para explicar a ferramenta em vez do design.

O arquivo de design é onde o trabalho acontece, não onde ele é visto. Quem não abre esse arquivo todo dia precisa de uma página que se comporte como página. É isso que um mockup de site é no i3Dify: seus prints na tela de um notebook 3D, num único link, sem nada para instalar.

O print da página inteira rola dentro da tela do notebook

Render estático corta. Uma landing de 6000 pixels colada num frame de dispositivo fica cortada na dobra ou encolhe até o texto ficar ilegível. Aqui a imagem se ajusta à largura da tela e rola na vertical, como a página rola no navegador, então o design inteiro é lido de cima a baixo, na largura real.

Os controles são separados de propósito. Arraste a tela ou use a roda do mouse e a página rola. Arraste o fundo e o notebook gira. As setas do teclado e o dock trocam de tela, e o contador acima do dock mostra o título que você deu a cada uma. Assim Home, Preços e Checkout estão onde o cliente espera quando você conduz a apresentação ao vivo numa call.

O hotspot acompanha o print em vez de flutuar por cima

Um mockup de telas de app é a mesma ideia num celular 3D, e é ali que os hotspots mais trabalham. Hotspot é uma área clicável da tela que abre um link. Você clica num ponto, o botão de checkout por exemplo, e liga ele a um destino: a próxima tela, a versão em produção, a especificação, um fluxo gravado. O hotspot fica preso à imagem, então acompanha o pixel a que pertence enquanto a pessoa rola, em vez de ficar numa camada fixa por cima.

Aberto num celular de verdade, que é onde um link encaminhado costuma ser lido, esses hotspots respondem ao toque. Uma pasta de exports soltos vira um fluxo que alguém percorre com o próprio polegar. Vale dizer dois limites. Não há campos de formulário nem estado, então isto é uma apresentação guiada, não um protótipo. E a rolagem para no fim da tela atual: passar para a próxima é pelo dock ou pelas setas, nunca por acidente no meio de um feed.

A captura é o único passo que tem truque

Envie uma imagem por tela, arraste na ordem em que quer apresentar, dê um título a cada uma e publique. A montagem é só isso. O que o pessoal erra é o export, porque o viewer precisa da altura total da página, não do que cabia na janela quando você apertou a tecla.

No Chrome, fica no menu de comandos do DevTools, em Capture full size screenshot. No Figma, exporte o frame na altura real. PDF também funciona e cada página vira uma tela. Só que no celular uma página ajustada à largura da tela não ocupa a altura toda, então ela fica centralizada com faixas em cima e embaixo, sem rolar.

Capture em 1x, não em 2x. O viewer reduz a imagem antes de aplicar na tela 3D, então os pixels extras não acrescentam nada e só fazem quem abriu o link esperar. Eles também consomem os 50 MB do plano gratuito, e um conjunto de telas compridas de dashboard chega lá mais rápido do que parece.

O link continua valendo depois da rodada de feedback

Troque as telas no editor depois de uma revisão e o link não muda. O que está na caixa de entrada do cliente e o que foi colado num documento três semanas atrás continuam funcionando, e os dois mostram a versão atual. Ninguém volta com comentário sobre um design que você já descartou. Enquanto o trabalho está em revisão, o projeto pode ficar não listado ou protegido por senha em qualquer plano, inclusive o gratuito.

O arquivo de design é onde você trabalha. O link é para a reunião, para o encaminhamento e para a decisão que vai ser tomada três dias depois, sem você na sala.

Coloque sua próxima rodada de telas num notebook e num celular.