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 pelo dock.
Criar um Desktop MockupO que é um Desktop Mockup?
Um projeto Desktop Mockup mostra suas capturas em um notebook 3D cuja tampa se abre quando a página carrega. Uma imagem é uma tela. Imagens altas não são reduzidas para caber: o visitante rola a imagem dentro do display, do mesmo jeito que rolaria a página real. Envie cinco capturas e você tem cinco telas, que o visitante percorre uma por vez.
- Uma captura alta por tela, rolada dentro do display do notebook
- Roda do mouse, trackpad ou arrastar sobre o dispositivo para rolar a tela atual
- Setas do teclado e o dock para passar de uma tela para outra
- Arraste o fundo para girar o notebook, e ligue os botões de zoom do dock para ler textos pequenos
- Hotspots em qualquer lugar da captura, que rolam junto com a página
- Uma tela ao vivo: cole um link e a página real carrega dentro do display
- Um contador de telas que também mostra o título da tela, mais um painel de links
Ideal para
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
Arquivos e limites
- Imagens ou PDFs. Uma imagem é uma tela, e cada página de um PDF vira uma tela.
- Um PDF pode ter até 200 páginas e até 50 MB. Os links dentro dele viram hotspots nas telas em que estavam: um link da web abre a página, e um link interno do documento leva para aquela tela.
- As capturas são ajustadas à largura do display. Uma captura com mais de 2048 px de largura, ou muito longa, é reduzida na proporção e nunca recortada, então uma captura de página inteira mantém todo o comprimento.
- Envie vários arquivos de uma vez, ou use Importar de URL para trazer uma imagem de um endereço da web.
- Adicione uma tela ao vivo para carregar uma página real da web no display, em vez de uma imagem dela. A página precisa permitir ser incorporada; o editor verifica isso quando você a adiciona.
- Os envios contam no armazenamento do seu workspace: 50 MB no Free, 10 GB no Pro e 25 GB no Business.
Crie um Desktop Mockup
1. Envie suas capturas
Abra a aba Conteúdo e adicione uma captura de página inteira por tela, ou um PDF.
- Capture em uma largura de desktop, perto de 1440 px, e deixe a imagem tão alta quanto a página
- Ou adicione uma tela ao vivo com o link de uma página
2. Ordene e nomeie as telas
Arraste uma tela para movê-la. Dê um título a cada uma: os títulos aparecem no contador de telas, então deixe o contador ligado se quiser que eles sejam vistos.
3. Adicione hotspots
Na aba Hotspots, coloque pontos clicáveis sobre uma captura para abrir um link, ir para outra tela, mostrar uma dica ou abrir um pop-up. O hotspot fica preso à imagem inteira, então ele rola junto com a parte da página a que pertence.
4. Defina o dispositivo e a tela
Em Configurações, na sub-aba Geral, escolha a cor e o ângulo da tampa do notebook, ajuste a tela e regule a rolagem.
5. Compartilhe
Salve e depois copie o link ou o código de incorporação na aba Compartilhar.
Configurações
Tudo o que está abaixo fica na aba Configurações do editor, organizado pela sub-aba onde você encontra cada item: Geral, Cena ou Câmera.
Geral
As informações básicas (o título e a descrição do projeto) ficam no topo em todos os tipos. Logo abaixo vêm as configurações do próprio objeto.
Dispositivo
Cor do dispositivo: o branco mantém o acabamento de alumínio original do notebook, e qualquer outra cor tinge o corpo, nunca a tela. Ângulo da tela, de 0 a 120 (90 por padrão), define o quanto a tampa fica aberta: 0 fecha, 90 deixa em pé, e acima de 90 ela se inclina para trás como um notebook sobre a mesa.
Tela
Fundo da tela preenche o display atrás da sua captura, e também as faixas acima e abaixo de uma captura curta. Brilho (0,2 a 1,6), contraste (0,5 a 2) e saturação (0 a 2) começam todos em 1, que é a imagem exatamente como foi enviada; saturação 0 mostra a imagem em escala de cinza. Mostrar contador de telas, ligado por padrão, mostra o título e a posição, como Preços · 2 / 5.
Rolagem
Velocidade da rolagem (0,25 a 3, 1 por padrão) é quanto um giro da roda move a captura. Suavização da rolagem (0,02 a 0,5, 0,12 por padrão) é a rapidez com que ela alcança a roda: valores mais altos acompanham a roda de perto, valores mais baixos deslizam até parar.
Cena
O que fica ao redor do objeto, e o acabamento de Realismo sobre todo o quadro.
Fundo
Uma cor sólida, um gradiente ou uma imagem sua (com desfoque opcional), mais um padrão opcional por cima.
Realismo
Grão de filme sobre o quadro (de 0 a 100, 15 por padrão) e quanto dele cai sobre a tela, grão parado ou animado, uma vinheta, a sombra que o notebook deixa na superfície (com a escuridão e a suavidade dela), e Reflexo da tela, o quanto o vidro reflete (0 é fosco, 40 por padrão).
Câmera
Onde a vista começa e quanto os visitantes podem movê-la.
Câmera
Zoom inicial, de 0,5 a 2, mas a vista nunca abre tão perto que o dispositivo saia do enquadramento. Zoom mínimo (0,3 a 1) e Zoom máximo (1 a 3) limitam os botões de zoom do dock, por isso só aparecem enquanto esses botões estão ligados. Rotação horizontal (até 75 graus para cada lado) e Inclinação vertical (até 40) apontam a câmera. Arrastar para girar, ligado por padrão, deixa os visitantes girarem o notebook arrastando o fundo. Restaurar padrão volta o zoom, os limites e os dois ângulos ao valor inicial, e mantém Arrastar para girar como está.
Hotspots, menu e sons
Ao lado de Arquivos, a aba Conteúdo tem mais três sub-abas: Hotspots, Menu e Sounds.
Hotspots
Os hotspots vão em qualquer lugar de uma captura. Eles ficam presos à imagem inteira, então rolam junto com a página, e continuam tocáveis no celular.
Um hotspot pode levar a outra página, abrir um link, mostrar uma dica ou abrir um pop-up. Como funcionam os hotspots
Sounds
Todo tipo de projeto pode ter música de fundo. Adicione faixas em MP3, M4A, WAV, OGG ou FLAC, de até 20 minutos cada. Elas são comprimidas para cerca de 1 MB por minuto e contam no armazenamento do seu workspace. Você pode repetir a lista, ajustar o volume e mostrar um pequeno player ao lado do dock. A reprodução automática começa no primeiro toque ou tecla do visitante, porque os navegadores bloqueiam o som até esse momento.
Filme no Studio
Todo tipo de projeto pode ser filmado no Studio. Abra a aba Studio do projeto, escolha movimentos de câmera feitos para este tipo e transforme o projeto em um vídeo, um GIF, uma imagem estática ou uma página própria para compartilhar. O Studio lê os arquivos e as configurações deste projeto, então o que você define aqui vale lá também. Leia a documentação do Studio · Veja os movimentos de câmera de cada tipo
Limites atuais
- O notebook é o único dispositivo desta página. Para um celular, crie um Mobile Mockup. Não há tablet.
- 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.
- Em uma tela ao vivo, os visitantes rolam a página real dentro do display, e os hotspots ficam onde você os colocou em vez de rolar com a página.
- No Studio, uma tela ao vivo aparece como um fundo de tela liso, porque a página real não pode ser gravada.
Dicas
- 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.
- Reduza a velocidade da rolagem quando a página for muito longa.
- Confira no celular: o notebook fica menor, e textos pequenos podem deixar de ser legíveis.