Gerador de mockup de site com versões para celular e desktop
Gerador de mockup de site
Gerador de mockup de site grátis: wireframe e molduras de dispositivos | We.Inc
Planeje uma página como wireframe com versões para desktop e celular, ou coloque uma captura de tela em uma moldura de navegador, notebook ou celular. Exporte em PNG ou imprima em PDF, grátis, no seu navegador.
Duas ferramentas em uma. O modo wireframe planeja uma página: escolha as seções, coloque-as em ordem e compare os layouts de desktop e celular. O modo moldura apresenta um design pronto: envie uma captura de tela e coloque-a em uma janela de navegador ou moldura de celular para uma proposta ou post nas redes. Os dois exportam um PNG e os dois rodam no seu navegador. Sua captura de tela nunca é enviada.
Modo wireframe: marque as seções de que a sua página precisa, mova-as para cima e para baixo e alterne entre desktop e celular. No celular, as colunas se empilham como na maioria dos sites responsivos.
Exporte o wireframe em PNG, ou imprima e escolha Salvar como PDF.
Modo moldura: envie uma captura de tela PNG, JPG ou WebP (até 15 MB e 8.000 pixels de lado). Escolha uma janela de navegador ou uma moldura de celular, uma cor de fundo e, se quiser, um texto na barra de endereço.
A imagem é desenhada em um canvas no seu navegador e exportada em PNG com o dobro da resolução da tela.
Quando a estrutura estiver certa, envie o plano de seções para o criador da We.Inc como briefing inicial.
Comece pelo destaque: diga em uma linha o que você faz e para quem.
Coloque as provas (avaliações, logos, exemplos) perto do primeiro botão, onde as pessoas decidem se confiam em você.
Confira primeiro o wireframe do celular. A maioria dos visitantes do site de uma pequena empresa chega pelo celular.
Para as molduras, tire a captura de tela na largura que a moldura espera: cerca de 1440 pixels para navegador e 390 para celular.
Identifique os mockups como mockups quando compartilhar, para ninguém confundir um plano com um site no ar.
Perguntas frequentes
Qual é a diferença entre wireframe e mockup?
Um wireframe é um plano em caixas cinzas do que vai onde. Um mockup mostra a aparência final, muitas vezes dentro de uma moldura de dispositivo. Esta ferramenta faz os dois, em modos separados, e identifica cada exportação.
Minha captura de tela é enviada?
Não. A captura de tela é lida e desenhada no seu navegador. Nada é enviado para a We.Inc nem para ninguém.
Posso capturar a tela de um site no ar aqui?
Não. Capturar outro site exige um servidor rodando um navegador, o que esta ferramenta gratuita não tem. Tire a captura você mesmo (as ferramentas de desenvolvedor do seu navegador conseguem capturar uma página inteira) e envie.
Posso exportar em PDF?
Sim. Use Imprimir e escolha Salvar como PDF como impressora. A exportação em PNG gera um arquivo de imagem.
O gerador de mockup de site é grátis?
Sim. Não há cadastro, marca d'água nem limite.
Planeje no celular, apresente no desktop
Layouts que parecem equilibrados em uma tela larga muitas vezes viram uma rolagem longa no celular: três colunas de recursos viram três blocos empilhados, e a tabela de preços empurra o formulário de contato lá para baixo. Mudar o wireframe para o celular mostra isso cedo, enquanto mover uma seção ainda custa um clique.
As molduras de dispositivo são para a outra ponta do trabalho: mostrar a um cliente ou ao público das redes como fica uma página pronta. Uma captura de tela simples em uma moldura limpa costuma bastar.