Desktop Mockup
Coloque as capturas do seu site ou protótipo na tela de um notebook 3D. Os visitantes rolam a página dentro da tela e passam de uma captura para outra com as setas do teclado ou pela barra de navegação.
Criar um Desktop MockupO que é um Desktop Mockup?
Um projeto Desktop Mockup mostra suas capturas em um notebook 3D que já vem com a tampa aberta. Uma imagem é uma tela. Imagens altas não são reduzidas para caber: o visitante rola dentro do display, do mesmo jeito que rolaria a página real. Cinco capturas viram cinco telas, percorridas uma por vez.
- Uma captura alta por tela, rolando dentro do display do notebook
- Roda do mouse, trackpad ou arrastar sobre o dispositivo para rolar a tela atual
- Setas do teclado e barra de navegação para passar de uma tela para outra
- Arraste o fundo para girar o notebook e ligue os botões de zoom da barra para ler textos pequenos
- Os hotspots podem ser colocados em qualquer lugar da captura, e os dois mockups os desenham no display
- Um contador de telas que também mostra o título da tela, além da barra de links
- Funciona em celulares e tablets, onde o arrastar substitui a roda do mouse
Melhores casos de uso
Landing pages
Mostre uma landing page inteira rolando como ela rola de verdade, sem mandar ninguém para uma URL no ar
Tours de produto
Uma funcionalidade por tela, na ordem em que você quer que sejam vistas
Revisão de protótipos
Compartilhe exportações de design com o cliente e deixe ele percorrer todo o fluxo
Apresentações para clientes
Apresente um site que você construiu dentro de uma proposta ou de um estudo de caso
Portfólios de web design
Reúna os sites que você desenhou, um por tela
Capturas de aplicativos
Mostre como um app web se parece sem pedir cadastro a ninguém
Criando um Desktop Mockup
Passo 1: Envie suas capturas
No editor do projeto, abra a aba Conteúdo e adicione uma imagem por tela:
- Qualquer formato de imagem que seu navegador abra, JPG, PNG e WebP inclusos. Um PDF também serve, e cada página vira uma tela
- Uma imagem é uma tela, então uma captura de página inteira entra como está, sem recorte
- Envie vários arquivos de uma vez, ou importe um a partir de uma URL
- Um PDF aceita até 200 páginas e 50 MB por arquivo, e os links dentro dele viram hotspots na tela em que estavam
- As capturas são otimizadas automaticamente para carregar rápido
Capture em uma largura de desktop, perto de 1440px, e deixe a imagem tão alta quanto a página. A largura é ajustada ao display e a altura é o que o visitante rola.
Passo 2: Ordene e nomeie as telas
A ordem na aba Conteúdo é a ordem em que os visitantes percorrem:
- Arraste uma tela para movê-la
- Dê um título a cada tela: ele aparece no contador, então o contador precisa ficar ligado para o título ser visto
- Apague a tela que não quiser mais, ou limpe todas de uma vez pelo menu de Conteúdo
- Adicione mais telas a qualquer momento
Passo 3: Ajuste a tela e a rolagem
Defina como o display aparece e como ele se move na aba Configurações:
- Cor do dispositivo: tinge o corpo do notebook, sendo o branco o modelo como foi construído
- Fundo da tela: a cor atrás da sua captura
- Brilho, contraste e saturação da tela: os três começam em 1, que é a imagem exatamente como você subiu
- Contador de telas: mostra ou esconde a posição e o título
- Velocidade e amortecimento da rolagem: quanto cada giro da roda avança e com que rapidez ele para
Passo 4: Adicione hotspots
Coloque hotspots sobre uma captura para abrir um link, ir para outra tela ou mostrar uma nota. O hotspot fica ancorado na imagem inteira e não na parte visível, então ele continua na seção da página a que pertence enquanto o visitante rola. Os dois mockups os desenham no display, e eles continuam clicáveis em celulares.
Configurações do Desktop Mockup
O display e a rolagem têm seções próprias na aba Configurações. Fundos, barra de links, zoom e rotação usam os mesmos painéis dos outros tipos de projeto.
Cor do dispositivo
Tinge o corpo do notebook. Começa em branco puro, que é o modelo exatamente como foi construído, e qualquer outra cor tinge esse acabamento em vez de repintá-lo.
Fundo da tela
A cor pintada atrás da sua captura. Ela também preenche o espaço acima e abaixo quando a imagem é mais curta que o display, então escolha algo próximo do fundo da sua página.
Brilho da tela
Quanto o display parece ligado, de 0,2 a 1,6. Começa em 1, que são exatamente os pixels que você subiu: abaixo disso a tela escurece e acima ela estoura, como um celular no brilho máximo.
Contraste da tela
Aplicado à captura na hora de desenhar, de 0,5 a 2, começando em 1 com a imagem intacta. Suba um pouco quando um design plano perde as bordas no display pequeno.
Saturação da tela
A mesma ideia para a cor, de 0 a 2 e começando em 1. Em 0 a captura fica em escala de cinza, um jeito rápido de mostrar um wireframe sem exportar um.
Contador de telas
Um selo pequeno com o título da tela na frente e a posição depois, por exemplo Preços · 2 / 5, ou só 2 / 5 quando a tela não tem título. É onde os títulos aparecem, então desligar também esconde os títulos, o que faz sentido com uma única captura.
Velocidade da rolagem
Quanto o conteúdo avança a cada giro da roda. Diminua em páginas muito longas para o visitante conseguir parar onde quer.
Amortecimento da rolagem
Com que rapidez o conteúdo alcança a roda. Valores baixos freiam suave, valores altos respondem na hora.
Fundo da cena
O cenário atrás do notebook: uma cor sólida, um gradiente, um padrão ou uma imagem sua.
Como os visitantes navegam
São dois movimentos separados. O conteúdo se move dentro da tela, e as telas mudam uma por vez. Um não dispara o outro.
Rolar dentro da tela
A roda do mouse, o trackpad ou um arrastar que começa sobre o notebook movem a captura atual para cima e para baixo. As setas para cima e para baixo e as teclas Page Up e Page Down fazem o mesmo.
Trocar de tela
Esquerda e Direita passam de uma tela para outra, Home e End vão para a primeira e para a última, e a barra de navegação tem os mesmos botões. Chegar ao fim de uma tela não avança para a próxima, e toda tela abre no topo.
Girar o notebook
Um arrastar que começa no fundo gira o dispositivo até 75 graus para a esquerda e para a direita e 40 graus para cima e para baixo, e ao soltar ele volta a ficar de frente. Um arrastar que começa sobre o notebook rola em vez de girar.
Zoom
Os botões de zoom aproximam a câmera, que é como o visitante lê os textos pequenos de uma captura. Eles vêm desligados até você ligá-los na aba Menu. A roda sempre rola a captura, ela nunca dá zoom.
O que ele não faz
Parte disso é de propósito e parte ainda não foi construída. De qualquer forma, é melhor saber antes de gravar uma demo:
- O notebook é o único dispositivo desta página. Para um celular, crie um Mobile Mockup. Ainda não há tablet.
- A tampa já está aberta. Não há animação de abertura.
- Chegar ao fim de uma tela não passa para a próxima. Trocar de tela é sempre uma ação deliberada.
- Há uma tela no display por vez. As outras não ficam visíveis em volta.
- A seção Tela pinta a carcaça do notebook, mas o acabamento em si já vem embutido no modelo.
Dicas para bons Desktop Mockups
- Exporte uma captura de página inteira por tela em vez de juntar pedaços
- Mantenha todas as capturas na mesma largura para o conteúdo não mudar de tamanho entre telas
- Iguale o fundo da tela ao fundo da sua página para que uma captura curta não fique sobre uma faixa branca
- Nomeie as telas pelo que elas mostram, não Tela 1 e Tela 2
- Coloque os hotspots onde o visitante clicaria no site real
- Reduza a velocidade da rolagem quando a página for muito longa
- Teste no celular: o notebook fica menor e textos pequenos podem deixar de ser legíveis