Tem um design de site perfeito e pronto. A grelha está refinada, a tipografia escolhida, o esquema de cores aprovado. Mas quando mostra uma exportação plana em JPG ao cliente, ele franze o sobrolho e pede para «tornar mais bonito». Parece-lhe familiar?

O problema não é o design. O problema é a apresentação. Uma captura de ecrã plana não transmite volume, hierarquia, nem a sensação de um produto vivo. O cliente precisa de ver o site num ambiente «real», num monitor, portátil, tablet, em perspetiva. É aqui que entram em cena as maquetes PSD.

Reunimos mais de 40 dos melhores modelos de maquete PSD para apresentar sites e 5 ferramentas para criar os seus próprios layouts. Cada modelo inclui objetos inteligentes: insira o seu design com um clique e ele já parece um produto vivo.

💡 Visão geral rápida:

• Primeiro, escolha uma ferramenta de wireframing para a sua tarefa
• Crie um layout conceptual e pense na estrutura da página
• Selecione um modelo de maquete PSD que corresponda ao estilo do seu projeto
• Insira o design finalizado através de objeto inteligente no Photoshop
• Exporte o resultado e apresente ao cliente uma maquete 3D realista

O que é uma maquete de site e porque precisa dela

Em web design, existem dois tipos de maquetes, e são frequentemente confundidos. O primeiro é um layout conceptual: projeta a estrutura da página, a disposição dos blocos, os cenários de utilização. Para isso, usam-se ferramentas de wireframing e prototipagem, discutidas abaixo.

O segundo tipo é uma maquete de apresentação. É uma bela «moldura» onde coloca o design finalizado para mostrar ao cliente. Imagine: um artista traz um quadro não enrolado num tubo, mas numa moldura, sob boa iluminação. Uma maquete PSD é a mesma moldura para o web design.

Uma boa maquete de apresentação resolve três tarefas. Primeiro, mostra o design num ambiente realista, num ecrã de iMac, MacBook, tablet, com sombras e realces. Segundo, poupa horas de trabalho manual: os objetos inteligentes no Photoshop permitem inserir o seu layout com um clique. Terceiro, uma apresentação adequada aumenta as hipóteses de aprovação do design à primeira tentativa, e isso é poupar tempo e nervos.

Todos os modelos desta coleção estão em formato PSD com objetos inteligentes. Abra, clique duas vezes na camada inteligente, insira o seu design, guarde, está feito.

5 Ferramentas para criar wireframes e maquetes

Antes de embalar o design num belo modelo PSD, é preciso criá-lo. Aqui estão cinco ferramentas que os web designers usam para criar wireframes e protótipos interativos.

Framer

O Framer evoluiu de uma ferramenta de maquetes para um construtor visual de sites completo. Hoje é uma plataforma onde projeta o layout e o publica imediatamente como um site ativo com alojamento e domínio. O editor responde automaticamente a cada alteração, e as ferramentas de IA integradas ajudam na composição e no texto.

• Vantagens: editor visual sem código, protótipos interativos, alojamento e CMS integrados, assistente de IA.
• Desvantagens: limitação de páginas nos planos mais baratos (30 páginas no Basic), sem comércio eletrónico integrado.
• Preço: plano gratuito para projetos de hobby; Basic, $10/mês por site; Pro, $30/mês.

🔗 Site oficial do Framer

Balsamiq

O Balsamiq é uma ferramenta para wireframes rápidos de baixa fidelidade. A sua característica é um estilo deliberadamente tosco, «esboçado»: o cliente percebe imediatamente que isto é um esboço, não um design finalizado, e foca-se na estrutura. Funciona na cloud e como aplicação de desktop. Suporta prototipagem com IA, componentes de IU personalizados, exportação para PDF.

• Prós: arrastar e largar intuitivo, dois estilos (esboçado e limpo), revisores ilimitados na versão gratuita.
• Contras: limitação de projetos no plano Starter (10), não adequado para layouts de alta fidelidade.
• Preço: Starter, 16 $/mês por editor; Teams, 24 $/mês; Enterprise, 35 $/mês.

🔗 Site oficial do Balsamiq

Wireframe.cc

O Wireframe.cc é uma ferramenta minimalista para criar wireframes diretamente no navegador. Sem painéis, barras de ferramentas e janelas que distraem: basta desenhar. Suporta layouts para computador, tablet e telemóvel. Permite adicionar anotações e partilhar um link com colegas.

• Prós: simplicidade absoluta, início imediato sem registo, versão gratuita.
• Contras: poucas possibilidades para protótipos interativos complexos, sem colaboração em equipa na versão gratuita.
• Preço: gratuito (funcionalidades básicas); Premium, a partir de 16 $/mês.

🔗 Site oficial do Wireframe.cc

Moqups

O Moqups é uma aplicação online que combina wireframes, protótipos, diagramas e quadros para trabalho em equipa. Permite criar um layout, montar um protótipo interativo e mostrar de imediato ao cliente como a interface irá funcionar. Suporta bibliotecas de componentes e estilos para consistência do design.

• Vantagens: tudo numa só ferramenta, trabalho em equipa prático, bibliotecas de componentes, plano gratuito.
• Desvantagens: menos personalização em comparação com o Figma, modo offline limitado.
• Preço: gratuito (1 projeto); Pro, 13 $/mês; Unlimited, 17 $/mês.

🔗 Site oficial do Moqups

Mockplus

O Mockplus é uma plataforma de prototipagem rápida com uma coleção de mais de 200 componentes de IU prontos a usar. Basta arrastar os elementos para a tela e ligá-los com transições interativas. O protótipo finalizado pode ser testado num dispositivo real através de um código QR. Adequado para principiantes: a barreira de entrada é mais baixa do que no Figma.

• Vantagens: componentes de IU prontos a usar, teste em dispositivo via código QR, baixa barreira de entrada.
• Desvantagens: menos possibilidades de design personalizado, licenciamento anual.
• Preço: gratuito (básico); licença anual, a partir de 99,5 $/ano.

🔗 Site oficial do Mockplus

Tabela comparativa de mockups PSD por tipo de perspetiva

Mais de 40 templates PSD de mockups para apresentações de websites

Quando o layout estiver pronto, escolha um template PSD adequado desta coleção. Todos os ficheiros incluem smart objects: abra, faça duplo clique na camada, insira o seu design, guarde e a apresentação tridimensional fica pronta.

1. Conjunto isométrico de ecrãs de website

Conjunto clássico de 6 projeções isométricas. Adequado para landing pages, portfólios e propostas comerciais. Sombras e realces realistas conferem profundidade ao design sem processamento adicional.

2. Pacote de mockups 3D para website

Seis mockups PSD com perspetiva tridimensional acentuada. Os ecrãs parecem flutuar no espaço, uma técnica que funciona muito bem para estúdios de design e agências onde uma «apresentação de impacto» é importante.

3. Mockup de ecrã de website em perspetiva

18 ângulos diferentes num só conjunto. Pode mostrar o site de frente, de lado, em ângulo, montar uma apresentação a partir de várias vistas como slides. Smart objects em cada camada.

4. Template de mockup de browser

Mockup de browser polivalente em quatro resoluções: desktop, tablet, telemóvel. Conveniente para demonstrar design responsivo numa única imagem. Requer o Photoshop CS4 ou mais recente.

5. Mockup 3D gratuito de website para desktop

Mockup gratuito com perspetiva de monitor. Adequado para projetos pessoais e comerciais. Simples, limpo, sem detalhes supérfluos, o design fala por si.

6. Templates de mockup isométrico de website

Conjunto isométrico com mockup de portátil. Quatro ângulos à escolha: o site pode ser mostrado de frente, em ângulo ou com foco no ecrã. Fica bem num portfólio.

7. 15 Mockups de website em perspetiva

Quinze vistas num só conjunto, máxima flexibilidade para a apresentação. Cada template é um ficheiro PSD separado com camadas organizadas e smart objects.

8. Mockups de website responsivo

Abordagem invulgar: as secções do site são mostradas uma a uma, não como ecrã completo. Conveniente quando precisa de destacar um bloco específico, formulário, galeria, tabela de preços. Seis mockups de alta resolução.

9. 10 Mockups profissionais em perspetiva

Dez mockups em perspetiva com diferentes ângulos de visão. Compatíveis com o Photoshop CS1 e superiores, não exigem a versão mais recente do editor.

10. PSD minimalista gratuito para website

Mockup minimalista gratuito para demonstrar vários ecrãs num só local. Nada de supérfluo, o design é o foco.

11. 10 Templates de mockup isométrico de website

Dez mockups isométricos elegantes. Cada um transmite o efeito de «mais próximo do design», os detalhes são claramente visíveis, as sombras são refinadas. Smart objects para substituição rápida de conteúdo.

12. Perspective website template pack

Doze vistas em perspetiva diferentes. Útil quando precisa de mostrar o site de vários ângulos numa só apresentação, por exemplo, página principal, catálogo e ficha de produto.

13. Professional perspective website mockups

Dez estilos e vistas para demonstração profissional. Sombras limpas, camadas organizadas, a personalização demora minutos.

14. IMac isometric website mockup

Conjunto criativo com iMac: 24 mockups PSD e 4 variantes de ecrã. Adequado para cabeçalhos de blogues, capas de redes sociais e cabeçalhos de sites, uma ferramenta universal para designers de conteúdo.

15. 3D website mockup template

Dezasseis mockups 3D com diferentes ângulos de visualização. Camadas totalmente personalizáveis e smart objects, pode alterar o fundo, as sombras e os reflexos.

16. Free website screens PSD mockup

Mockup gratuito de alta resolução 4000 × 3000 px. Os smart objects permitem inserir o design com um clique. Adequado para portefólio e apresentações.

17. Website browser mockup

Mockup do navegador Chrome com perspetiva tridimensional. Fundos e formas editáveis, pode ser adaptado à marca do cliente.

18. 3D website screen mockups

Três mockups diferentes com design 3D realista. Conjunto compacto para portefólio, não sobrecarrega, mas confere volume.

19. Web page presentation mockup

Conjunto de sete maquetes de perspetiva únicas. Cada uma tem o seu próprio estilo de apresentação: desde o ecrã «flutuante» ao ângulo clássico.

20. Pacote de maquetes de websites em perspetiva

Quatro maquetes com 20 ângulos de visualização. Compatibilidade com Photoshop CS1 e superior. Adequado para estúdios com um parque de software diversificado.

21. Maquete de website em perspetiva 3.0

Oito templates com diferentes estilos e ângulos de perspetiva. Design por arrastar e largar, sombras e realces personalizáveis. Versão 3.0 com detalhe melhorado.

22. Template PSD de maquete de website em perspetiva

Maquete de perspetiva elegante com resolução de 3000 × 2000 px. Sombras separadas e objetos inteligentes, pode alterar as sombras independentemente do design.

23. Template PSD criativo para website

Maquete totalmente personalizável com contornos e sombras editáveis. Ideal para projetos criativos e fora do padrão.

24. Template PSD de apresentação de website

Camadas e objetos inteligentes bem organizados. As sombras separadas permitem afinar a profundidade da cena.

25. Maquete de website em perspetiva

Onze vistas em perspetiva, mais a capacidade de criar um fluxo de trabalho de perspetiva personalizado. Design por arrastar e largar, rápido e bonito.

26. Maquete isométrica de website

Inclui uma bela maquete de MacBook. Seis vistas em perspetiva em ficheiros PSD facilmente editáveis. Excelente para apresentações premium.

27. Maquete PSD de ecrãs em perspetiva

Três ângulos com ecrã iMac. Objetos inteligentes para inserir o design com um clique. Visual minimalista e profissional.

28. Apresentação web em perspetiva 08

Maquete de perspetiva moderna com fundo alterável e sombras separadas. Ideal para a primeira apresentação ao cliente, o design parece «real».

29. Bela maquete gratuita de website em perspetiva

Três tamanhos de visualização em projeção isométrica, 300 dpi. Mockup de qualidade difícil de suspeitar como «gratuito».

30. Mockups 3D de montra de sites

Doze mockups 3D para uma apresentação realista máxima. A perspetiva tridimensional confere volume físico ao design, o cliente vê «produto», não imagem.

31. Mockup de apresentação web em perspetiva

Dois estilos num só mockup: «em pé» e «deitado». Ambos com vistas em perspetiva, resolução de 3000 × 2000 px.

32. Mockups 3D de ecrã de secretária

Nove mockups com diferentes perspetivas e fundo alterável. Mostre o site no ecrã de secretária, formato clássico para estúdios.

33. Mockup web em perspetiva 16

Mockup profissional para demonstrar designs em tamanho real. Permite mostrar várias páginas do site numa só cena, conveniente para uma apresentação abrangente.

34. Mockup de montra de site 02

Conjunto de vários mockups: tablet, iMac, secretária. Kit universal para mostrar design responsivo em diferentes dispositivos.

35. Mockup web em perspetiva 05

Mockup de perspetiva cuidada para portefólio. Sombras separadas, camadas bem organizadas, a personalização é intuitiva.

36. Mockup web em perspetiva 17

Ângulo interessante: os mockups parecem fixados à parede. Apresentação fora do padrão para quem quer destacar-se das apresentações isométricas habituais.

37. PSD de montra de site

Conjunto 3D com mockups de dispositivos: site mostrado em diferentes suportes. Bom para demonstrar capacidade multiplataforma.

38. Mockup de apresentação web em perspetiva

Ângulo único: adequado para mostrar funcionalidades de um serviço online na página principal. PSD totalmente editável, 3000 × 2000 px.

39. Website PSD em perspetiva

Mockup gratuito com aspeto premium. Perspetiva de qualidade, alta resolução, excelente opção para freelancers.

40. Perspective Web Presentation 09

Plano aproximado em perspetiva. Smart objects com várias camadas, fundo alterável, template pré-concebido para início rápido. 3000 × 2000 px.

41. Perspective Web Mockup 14

Apresentação artística: realça as melhores partes do design. PSD totalmente editável, 3000 × 2000 px.

42. Free Perspective Web Mockup

Mockup gratuito com perspetiva ampla. Alta resolução, o design mantém-se nítido mesmo em ecrãs grandes.

43. 3D Isometric Perspective Mockup

Perspetiva isométrica tridimensional invulgar. Um só ângulo, mas com capacidade de ajuste fino. Todas as camadas são smart objects.

44. Free PSD Perspective Website Mockup

Mockup gratuito em perspetiva para designs simples. Todas as camadas, smart objects, a personalização demora segundos.

45. Perspective Web Presentation 07

Ângulo «tipo galeria», o design parece uma peça de exposição. PSD totalmente personalizável com atmosfera artística.

46. Freebie Perspective PSD Website Mockup

Mockup gratuito de qualidade com perspetiva única. Organizado em camadas com smart objects, resultado profissional sem custos.

47. Perspective Web Mockup 11

Ficheiro PSD pronto com vista em perspetiva nítida. Várias camadas, com sombra separada, que pode ser guardada ou removida à vontade.

48. Web Page Mockup Collection

Coleção de templates em perspetiva com diferentes vistas. Grátis com atribuição, boa opção para projetos pessoais.

49. Perspective Web Mockup 13

Vista vertical: design apresentado como uma pilha de cartões. Apresentação não convencional para portefólio e redes sociais.

50. Mockups de Website 3D e iPhone 5

Dois em um: mockups de site e iPhone 5. Vistas em perspetiva, download gratuito, conjunto básico para começar.

51. Mockup Web em Perspetiva 01

Mockup clássico em perspetiva para portefólio ou apresentação ao cliente. Sombras e sombreados personalizáveis, adaptável a qualquer estilo.

52. Mockup PSD Gratuito de Página Web

Mockup profissional gratuito. Simples, rápido, sem detalhes extra. Atribuição obrigatória.

53. Mockup Web em Perspetiva 15

Mockup minimalista com efeito de desfoque de fundo, o olhar do espetador foca automaticamente no design. Ideal para projetos modernos e limpos.

54. Mockup PSD Gratuito de Página Web

Mockup para destacar a secção superior da página, que, segundo os designers, é a primeira que os clientes avaliam. Camadas inteligentes para edição prática.

55. Mockup Web em Perspetiva 12

O design parece suspenso na parede, uma apresentação impressionante que se destaca dos mockups isométricos padrão. Resolução de 3000 × 2000 px.

56. Mockup PSD de Layout de Website

Mockup em perspetiva de qualidade, com camadas completas e objetos inteligentes. Grátis para projetos pessoais e comerciais.

57. Mockup Web em Perspetiva 07

Duas vistas num só mockup: mais flexibilidade para a apresentação. O fundo altera-se facilmente sem quebrar a perspetiva.

Como escolher um mockup para a tarefa

Com tanta diversidade, é fácil ficar confuso. Eis um algoritmo de seleção simples:

• Precisa de mostrar todas as páginas de uma vez, escolha um conjunto isométrico de 6 ou mais ecrãs (n.º 1 ou n.º 11). Cria a sensação de produto completo.

• Precisa de foco numa só página, escolha um mockup em perspetiva com close-up (n.º 28, n.º 40). O design ganha um aspeto monumental.

• Precisa de mostrar responsividade, escolha o Browser Mockup Template (n.º 4). O cliente vê o site em todos os dispositivos numa só cena.

• Precisa de uma apresentação «uau», escolha um conjunto de mockups 3D (n.º 30) ou um mockup com ângulo «na parede» (n.º 36, n.º 55).

• Orçamento limitado, a coleção tem mais de 10 mockups gratuitos (n.º 5, n.º 10, n.º 16, n.º 29, n.º 39, n.º 42, n.º 44, n.º 46, n.º 48, n.º 52, n.º 54, n.º 56). Suficientes para a maioria dos projetos freelance.

Onde obter mockups em 2026

O mercado de mockups mudou desde 2020: surgiram novas plataformas e os preços dos templates premium tornaram-se mais acessíveis.

O Envato Elements continua a ser a principal fonte: mais de 2 milhões de mockups, templates, temas e gráficos por subscrição a partir de $16,50/mês. Transfere quaisquer ficheiros sem limites; para estúdios, isto é mais rentável do que comprar cada mockup separadamente.

Para quem procura opções gratuitas: o Free-Mockup.com e o Good Mockups publicam novas coleções de mockups PSD todas as semanas.

Merece destaque a Figma Community: os mockups já estão disponíveis também em formato Figma. Se trabalha no Figma, pesquise «website mockup» na Community, há milhares de opções gratuitas.

Tutorial detalhado sobre como trabalhar com mockups PSD: abrir smart objects, substituir o design, ajustar sombras e exportar. De principiante a resultado seguro em 15 minutos.

⁉️🤔 Perguntas frequentes

O que é um smart object num mockup PSD?

Um smart object é uma camada no Photoshop que preserva a imagem de origem e permite editá-la sem perda de qualidade. Nos mockups PSD, o smart object é o local onde insere o seu design. Faça duplo clique no ícone da camada inteligente, abre-se um ficheiro separado, cole ali o seu layout, guarde e ele aparece automaticamente no mockup com todas as distorções de perspetiva, sombras e realces. Ponto-chave: só altera o conteúdo, enquanto os efeitos de perspetiva e iluminação permanecem inalterados. Se nunca trabalhou com eles, o vídeo acima mostra o processo passo a passo.

Os mockups PSD podem ser usados sem o Photoshop?

Sim, mas com limitações. O Photopea (editor online gratuito photopea.com) abre PSD e suporta smart objects; mockups básicos editam-se sem problemas. O Affinity Photo é uma compra única ($69,99) com suporte completo para PSD e smart objects. O GIMP abre PSD, mas não suporta smart objects, não sendo adequado para mockups. A prática mostra: se trabalha com mockups regularmente, o Photoshop ou o Affinity Photo pagam-se a si próprios pela poupança de tempo.

Em que é que um mockup isométrico difere de um em perspetiva?

A composição isométrica mostra o objeto sem redução de perspetiva: as linhas paralelas mantêm-se paralelas, a escala é a mesma em toda a cena. Esta vista é conveniente para demonstrar vários ecrãs em simultâneo, eles não «fogem» para a distância. O mockup em perspetiva imita a visão real: os objetos distantes são mais pequenos, as linhas convergem para um ponto. Parece mais realista, mas os ecrãs na profundidade da cena são mais difíceis de ler. Para portefólio, escolhe-se mais a isometria (todos os trabalhos ficam igualmente visíveis). Para apresentação ao cliente, a perspetiva (mais impressionante, parece mais «cara»).

Quanto tempo demora a inserir o design num mockup?

Com um ficheiro PSD preparado, entre 30 segundos a 2 minutos por ecrã. Abra o mockup, faça duplo clique no smart object, cole o seu design (Ctrl+V), ajuste o tamanho (Ctrl+T), guarde (Ctrl+S), feche o smart object, está feito. Um conjunto de 6 ecrãs num mockup isométrico pode ser preparado em 5 a 7 minutos. A parte mais demorada não é técnica, mas sim escolher o ângulo certo. Tenha à mão 3 ou 4 mockups favoritos que combinem com o seu estilo, isto reduz o tempo de apresentação para uns minutos.

Preciso de dar crédito ao autor do mockup quando o utilizo?

Depende da licença. A maioria dos mockups premium (Envato Elements, Creative Market) não exige atribuição em projetos pessoais ou comerciais. Os mockups gratuitos vêm frequentemente com a obrigação de atribuição, verifique a descrição do ficheiro antes de usar. Em projetos comerciais, é mais seguro optar por mockups premium: sem riscos de licença e a qualidade é consistentemente superior. A licença do Envato Elements cobre uso comercial sem atribuição para todos os ficheiros da biblioteca.

O que escolher para a apresentação de sites em 2026

Os mockups não são apenas uma «imagem bonita». São uma ferramenta de vendas: o cliente não vê um layout plano, mas sim um produto quase pronto. Um design bem apresentado é aprovado à primeira tentativa.

Se está a criar do zero, comece com uma ferramenta: Framer para interatividade, Balsamiq para esboços rápidos, Moqups para trabalho em equipa. Quando o layout estiver pronto, pegue num template PSD da coleção, insira o design com um clique e apresente.

Lembre-se: o cliente compra a confiança de que o site terá um aspeto profissional. Um bom mockup transmite essa confiança.