Mockup de portátil

Mockup de portátil

Dê à sua interface um ambiente para a apresentação. Adicione uma captura de ecrã e uma referência de portátil; depois, descreva a cena e o ajuste do ecrã. Virse cria um mockup estático de portátil para um portefólio, proposta de produto ou revisão de design.

Mockup de portátil

Demonstração interativa em breve

O que é um mockup de portátil?

Uma maquete de portátil mostra uma captura de ecrã de um website ou de uma aplicação existente no ecrã de um portátil. A Virse utiliza a sua captura de ecrã, a referência do dispositivo e as notas de cena para criar uma imagem estática para um portefólio, uma apresentação ou uma revisão de design.

An existing website screenshot presented on a laptop screen
Uma captura de ecrã de um website existente apresentada no ecrã de um portátil

Porquê usar Virse para uma apresentação de ecrã de portátil?

Comece pela interface que precisa de explicar e, depois, atribua-lhe um dispositivo e um ambiente.

A supplied application screenshot shown within a laptop display
Entrada da captura de ecrã

Usar uma interface existente

Forneça a vista da página Web ou da aplicação que pretende apresentar. A captura de ecrã é a fonte do conteúdo do ecrã do portátil.

A laptop screen preview with the main interface area in view
Ajuste e recorte

Explicar o ajuste do ecrã

Indique se a captura de ecrã deve aparecer na íntegra ou qual a área mais importante. Verifique o resultado quanto ao recorte para que a apresentação não perca conteúdo essencial da interface.

A laptop displaying a website in a simple desk setting
Referência do dispositivo

Corresponder ao ambiente da apresentação

Adicione uma referência de portátil e descreva uma secretária ou outro ambiente de apresentação. Use uma cena simples quando o ecrã precisa de captar a maior parte da atenção.

Como criar um mockup de portátil

  1. Preparar a captura de ecrã

    Capture a vista do website ou da aplicação de que precisa. Utilize o estado exato da interface que pretende apresentar.

  2. Adicionar o briefing do portátil e da cena

    Forneça uma referência de portátil e descreva o ambiente envolvente. Explique como a captura de ecrã deve encaixar, incluindo qualquer preferência de recorte.

  3. Gerar a pré-visualização do ecrã

    Crie uma imagem estática da captura de ecrã fornecida dentro do ecrã do portátil.

  4. Rever os detalhes da interface

    Compare o texto, os ícones, as proporções do ecrã e o conteúdo visível com a captura de ecrã original. Verifique o aspeto do dispositivo antes de utilizar a imagem.

Quem usa mockups de portátil?

Para equipas que apresentam uma interface que já existe como captura de ecrã.

A web designer presenting a completed site on a laptop

Web designers

Apresente uma página Web concluída num portátil durante uma revisão com o cliente ou num estudo de caso.

An application dashboard displayed on a laptop screen

Designers de produto

Mostre um painel de controlo ou estado de aplicação específico num ambiente com dispositivo.

A product screenshot prepared for a software presentation

Equipas de marketing de software

Use uma apresentação de captura de ecrã revista para explicar o produto numa proposta.

A website template shown on an open laptop

Vendedores de templates de website

Apresente o aspeto de um template de desktop existente numa imagem de produto.

Casos de utilização de mockups de portátil

Website Portfolio Image: present a completed desktop page on a laptop
Imagem de portefólio de website: apresente uma página de desktop concluída num portátil
SaaS Dashboard Pitch: show an existing product view in a device setting
Apresentação de dashboard SaaS: mostre uma vista de produto existente num contexto de dispositivo
Client Design Review: give reviewers a contextual image of the approved interface state
Revisão de design pelo cliente: dê aos revisores uma imagem contextual do estado aprovado da interface
Template Product Preview: display a finished website template on a screen
Pré-visualização de produto de template: apresente um template de website finalizado num ecrã
Product Announcement Visual: present a screenshot of an already designed feature
Visual de anúncio de produto: apresente uma captura de ecrã de uma funcionalidade já desenhada
Case Study Presentation: place an interface image in the setting used to explain the project
Apresentação de estudo de caso: coloque uma imagem da interface no cenário utilizado para explicar o projeto

Perguntas frequentes

Posso utilizar uma captura de ecrã de um website existente?
Sim. Adicione uma captura de ecrã da vista da página que pretende mostrar. Este fluxo de trabalho utiliza a imagem fornecida como conteúdo do ecrã.
Posso utilizar uma captura de ecrã de uma app ou de um dashboard?
Sim. Forneça a imagem da interface concluída e uma referência de portátil. Reveja cuidadosamente o texto pequeno, os gráficos e os ícones no resultado gerado.
Como é que a minha captura de ecrã se ajustará ao ecrã do portátil?
Descreva se pretende que toda a imagem fique visível ou que uma área específica seja destacada. Utilize uma captura de ecrã com proporções adequadas e verifique o resultado para detetar recortes indesejados.
Posso colar o URL de um website em vez de uma captura de ecrã?
Forneça uma captura de ecrã da página que pretende mostrar. Este fluxo de trabalho utiliza uma imagem existente do website ou da aplicação como conteúdo do ecrã.
O resultado será um website ou protótipo interativo?
Não. É uma imagem de apresentação estática. O website, a aplicação e as interações permanecem separados do mockup.
Posso criar um vídeo do ecrã do portátil?
Não. O resultado é uma imagem estática. Use um fluxo de trabalho de vídeo adequado se a sua apresentação precisar de movimento ou de uma interação gravada.

Coloque a sua interface no ecrã de um portátil

Adicione a captura de ecrã e uma referência do dispositivo. Crie uma imagem de apresentação em portátil para o seu próximo pitch ou atualização de portefólio.