Du har et perfekt webdesign klart. Rutenettet er finslipt, typografien valgt, fargepaletten godkjent. Men når du viser en flat JPG-eksport til kunden, rynker de på nesen og ber deg «gjøre det penere». Høres det kjent ut?

Problemet er ikke designet. Problemet er presentasjonen. Et flatt skjermbilde formidler ikke volum, hierarki eller følelsen av et levende produkt. Kunden trenger å se nettstedet i et «ekte» miljø, på en skjerm, laptop, nettbrett, i perspektiv. Det er her PSD-mockups kommer inn i bildet.

Vi har samlet over 40 av de beste PSD-mockup-malene for å presentere nettsteder og 5 verktøy for å lage dine egne oppsett. Hver mal kommer med smartobjekter: sett inn designet ditt med ett klikk, så ser det allerede ut som et levende produkt.

💡 Rask oversikt:

• Velg først et wireframing-verktøy for oppgaven din
• Lag et konseptuelt oppsett og tenk gjennom sidestruktur
• Velg en PSD-mockup-mal som passer prosjektets stil
• Sett inn det ferdige designet via smartobjekt i Photoshop
• Eksporter resultatet og presenter kunden for en realistisk 3D-mockup

Hva er en nettside-mockup og hvorfor du trenger det

I webdesign finnes det to typer mockups, og de forveksles ofte. Den første er et konseptuelt oppsett: du designer sidestruktur, plassering av blokker, brukerscenarioer. Til dette brukes wireframing- og prototypeverktøy, omtalt nedenfor.

Den andre typen er en presentasjonsmockup. Det er en pen «ramme» du plasserer det ferdige designet i for å vise det til kunden. Se for deg: en kunstner kommer med et maleri ikke sammenrullet i en tube, men i en ramme, under god belysning. En PSD-mockup er den samme rammen for webdesign.

En god presentasjonsmockup løser tre oppgaver. For det første viser den designet i et realistisk miljø, på en iMac-skjerm, MacBook, nettbrett, med skygger og høylys. For det andre sparer den timevis med manuelt arbeid: smartobjekter i Photoshop lar deg sette inn oppsettet ditt med ett klikk. For det tredje øker en skikkelig presentasjon sjansene for at designet blir godkjent på første forsøk, og det sparer tid og nerver.

Alle malene i denne samlingen er i PSD-format med smartobjekter. Åpne, dobbeltklikk på smartlaget, sett inn designet ditt, lagre, ferdig.

5 Verktøy for å lage wireframes og mockups

Før designet pakkes inn i en pen PSD-mal, må det designes. Her er fem verktøy webdesignere bruker for å lage wireframes og interaktive prototyper.

Framer

Framer har utviklet seg fra et mockup-verktøy til en fullverdig visuell nettstedbygger. I dag er det en plattform der du designer oppsettet og umiddelbart publiserer det som et live nettsted med hosting og domene. Editoren reagerer på hver endring automatisk, og innebygde KI-verktøy hjelper med komposisjon og tekst.

• Fordeler: visuell no-code-editor, interaktive prototyper, innebygd hosting og CMS, KI-assistent.
• Ulemper: sidebegrensning på billigere abonnement (30 sider på Basic), ingen innebygd e-handel.
• Pris: gratis abonnement for hobbyprosjekter; Basic, $10/mnd per nettsted; Pro, $30/mnd.

🔗 Framers offisielle nettsted

Balsamiq

Balsamiq er et verktøy for raske lavoppløselige wireframes. Dets særtrekk er en bevisst røff, «skissert» stil: kunden forstår umiddelbart at dette er en skisse, ikke ferdig design, og fokuserer på struktur. Fungerer i skyen og som en desktop-applikasjon. Støtter KI-prototyping, egendefinerte UI-komponenter, PDF-eksport.

• Fordeler: intuitiv dra-og-slipp, to stiler (skisseaktig og ren), ubegrenset antall anmeldere gratis.
• Ulemper: prosjektbegrensning på Starter (10), ikke egnet for høyoppløselige layouter.
• Pris: Starter, $16/mnd per redaktør; Teams, $24/mnd; Enterprise, $35/mnd.

🔗 Balsamiq offisielle nettsted

Wireframe.cc

Wireframe.cc er et minimalistisk verktøy for å lage wireframes rett i nettleseren. Ingen forstyrrende paneler, verktøylinjer og vinduer: du bare tegner. Støtter layouter for desktop, nettbrett og mobiltelefoner. Du kan legge til merknader og dele en lenke med kolleger.

• Fordeler: ultimat enkelhet, umiddelbar start uten registrering, gratisversjon.
• Ulemper: få muligheter for komplekse interaktive prototyper, ikke teamsamarbeid i gratisversjonen.
• Pris: gratis (grunnleggende funksjoner); Premium, fra $16/mnd.

🔗 Wireframe.cc offisielle nettsted

Moqups

Moqups er en nettbasert applikasjon som kombinerer wireframes, prototyper, diagrammer og tavler for teamarbeid. Du kan lage en layout, sette sammen en interaktiv prototype og umiddelbart vise kunden hvordan grensesnittet vil fungere. Støtter komponent- og stilbiblioteker for designkonsistens.

• Fordeler: alt i ett verktøy, praktisk samarbeid, komponentbiblioteker, gratis abonnement.
• Ulemper: mindre tilpasning sammenlignet med Figma, begrenset frakoblet modus.
• Pris: gratis (1 prosjekt); Pro, $13/mnd; Unlimited, $17/mnd.

🔗 Moqups offisielle nettsted

Mockplus

Mockplus er en plattform for rask prototyping med en samling på over 200 ferdige UI-komponenter. Bare dra elementer ut på lerretet og koble dem med interaktive overganger. Den ferdige prototypen kan testes på en ekte enhet via QR-kode. Passer for nybegynnere: inngangsterskelen er lavere enn for Figma.

• Fordeler: ferdige UI-komponenter, enhetstesting via QR-kode, lav inngangsterskel.
• Ulemper: færre muligheter for skreddersydd design, årlig lisensiering.
• Pris: gratis (basic); årlig lisens, fra $99,5/år.

🔗 Mockplus offisielle nettsted

Sammenligningstabell for PSD-mockuper etter perspektivtype

40+ PSD-mockup-maler for nettsidepresentasjoner

Når layouten er klar, velger du en passende PSD-mal fra denne samlingen. Alle filer leveres med smartobjekter: åpne, dobbeltklikk på laget, sett inn designet ditt, lagre, så er den tredimensjonale presentasjonen klar.

1. Website Screens isometrisk sett

Klassisk sett med 6 isometriske projeksjoner. Passer for landingssider, porteføljer og kommersielle tilbud. Realistiske skygger og høylys gjør designet dimensjonalt uten ekstra bearbeiding.

2. 3D Website Mockup Bundle

Seks PSD-mockuper med utpreget tredimensjonalt perspektiv. Skjermer ser ut til å sveve i rommet, denne teknikken fungerer utmerket for designstudioer og byråer der «wow-presentasjon» teller.

3. Perspective Website Screen Mockup

18 ulike vinkler i ett sett. Du kan vise nettstedet forfra, fra siden, på skrå, sette sammen en presentasjon fra flere visninger som lysbilder. Smartobjekter på hvert lag.

4. Browser Mockup Template

Flerbruks nettleser-mockup i fire oppløsninger: desktop, nettbrett, mobil. Praktisk for å demonstrere responsivt design i ett bilde. Krever Photoshop CS4 eller nyere.

5. Free 3D Desktop Website Mockup

Gratis mockup med monitorperspektiv. Passer for personlige og kommersielle prosjekter. Enkel, ren, ingen ekstra detaljer, designet taler for seg selv.

6. Isometric Website Mockup Templates

Isometrisk sett med laptop-mockup. Fire vinkler å velge mellom: nettstedet kan vises forfra, på skrå eller med fokus på skjermen. Ser bra ut i portefølje.

7. 15 Perspective Website Mockups

Femten visninger i ett sett, maksimal fleksibilitet for presentasjon. Hver mal er en separat PSD-fil med organiserte lag og smartobjekter.

8. Responsive Website Mockups

Uvanlig tilnærming: nettstedets seksjoner vises én etter én, ikke som full skjerm. Praktisk når du trenger å fremheve en spesifikk blokk, et skjema, et galleri eller en pristabell. Seks høyoppløselige mockuper.

9. Perspective 10 Professional Mockups

Ti perspektivmockuper med ulike synsvinkler. Kompatibel med Photoshop CS1 og nyere, krever ikke den nyeste redigeringsversjonen.

10. Free Minimal Website PSD

Gratis minimalistisk mockup for å demonstrere flere skjermer på ett sted. Ikke noe ekstra, designet er i fokus.

11. 10 Isometric Website Mockup Templates

Ti stilige isometriske mockuper. Hver gir effekten av «nærmere design», detaljer er tydelig synlige, skygger er raffinerte. Smarte objekter for rask innholdserstatning.

12. Perspektiv nettsidemalpakke

Tolv ulike perspektivvisninger. Bra når du trenger å vise nettstedet fra flere sider i én presentasjon, for eksempel hovedside, katalog og produktkort.

13. Profesjonelle perspektiv nettsidemockuper

Ti stiler og visninger for profesjonell demonstrasjon. Rene skygger, organiserte lag, tilpasning tar minutter.

14. IMac isometrisk nettsidemockup

Kreativt sett med iMac: 24 PSD-mockuper og 4 skjermvarianter. Passer for bloggheadere, sosiale medier-omslag og sideheadere, universelt verktøy for innholdsdesigneren.

15. 3D nettsidemal-mockup

Seksten 3D-mockuper med ulike visningsvinkler. Fullt tilpassbare lag og smarte objekter, du kan endre bakgrunn, skygger, refleksjoner.

16. Gratis nettsideskjerm PSD-mockup

Gratis høyoppløselig mockup 4000 × 3000 px. Smarte objekter lar deg sette inn design med ett klikk. Passer for portefølje og presentasjoner.

17. Nettlesermockup for nettside

Chrome-nettlesermockup med tredimensjonalt perspektiv. Redigerbare bakgrunner og former, kan tilpasses kundens merkevare.

18. 3D nettsideskjerm-mockuper

Tre ulike mockuper med realistisk 3D-design. Kompakt sett for portefølje, overbelaster ikke, men gir volum.

19. Presentasjonsmockup for nettside

Sju unike perspektivmockuper i ett sett. Hver har sin egen presentasjonsstil: fra «svevende» skjerm til klassisk vinkel.

20. Perspective Website Mockup Bundle

Fire mockuper med 20 visningsvinkler. Kompatibel med Photoshop CS1 og nyere. Passer for studioer med variert programvarepark.

21. Perspective Website Mockup 3.0

Åtte maler med ulike stiler og perspektivvinkler. Dra-og-slipp-design, tilpassbare skygger og høylys. Versjon 3.0 med forbedret detaljnivå.

22. PSD Perspective Website Mockup Template

Stilig perspektivmockup i 3000 × 2000 px oppløsning. Separat skygger og smartobjekter, du kan endre skygger uavhengig av designet.

23. Creative Website PSD Template

Fullt tilpassbar mockup med redigerbare streker og skygger. Bra for utradisjonelle, kreative prosjekter.

24. Website Presentation PSD Template

Godt organiserte lag og smartobjekter. Separate skygger gir mulighet for å finjustere scenedybden.

25. Perspective Website Mockup

Elleve perspektivvisninger pluss mulighet for å skape tilpasset perspektivarbeidsflyt. Dra-og-slipp-design, raskt og vakkert.

26. Isometric Website Mockup

Vakker MacBook-mockup inkludert. Seks perspektivvisninger i lett redigerbare PSD-filer. Flott for premiumpresentasjon.

27. Screens Perspective PSD Mockup

Tre vinkler med iMac-skjerm. Smartobjekter for å sette inn design med ett klikk. Minimalistisk, profesjonelt uttrykk.

28. Perspective Web Presentation 08

Moderne perspektivmockup med utskiftbar bakgrunn og separate skygger. Ideell for første kundepresentasjon, designet ser «ekte» ut.

29. Free Beautiful Perspective Website Mockup

Tre visningsstørrelser i isometrisk projeksjon, 300 dpi. Kvalitetsmockup som er vanskelig å mistenke for å være «gratis».

30. 3D-nettstedsvisningsmockuper

Tolv 3D-mockuper for maksimal realistisk presentasjon. Tredimensjonalt perspektiv gir designet fysisk volum, kunden ser «produkt», ikke bilde.

31. Perspektivbasert webpresentasjonsmockup

To stiler i én mockup: «stående» og «liggende». Begge med perspektivvisning, 3000 × 2000 px oppløsning.

32. 3D-skrivebordsskjermmockuper

Ni mockuper med ulike perspektiver og utskiftbar bakgrunn. Vis nettsted på skrivebordsskjerm, klassisk format for studioer.

33. Perspektivbasert webmockup 16

Profesjonell mockup for å demonstrere design i full størrelse. Gjør det mulig å vise flere nettsider i én scene, praktisk for helhetlig presentasjon.

34. Nettstedsvisningsmockup 02

Sett med flere mockuper: nettbrett, iMac, stasjonær PC. Universelt sett for å vise responsivt design på ulike enheter.

35. Perspektivbasert webmockup 05

Ryddig perspektivmockup for portefølje. Separate skygger, godt organiserte lag, tilpasning er intuitiv.

36. Perspektivbasert webmockup 17

Interessant vinkel: mockupene ser ut til å være festet til veggen. Ikke-malbasert presentasjon for dem som ønsker å skille seg ut fra standard isometriske presentasjoner.

37. Nettstedsvisning PSD

3D-sett med enhetsmockuper: nettsted vist på ulike bærere. Bra for å demonstrere plattformuavhengighet.

38. Perspektivbasert webpresentasjonsmockup

Unik vinkel: egnet for å vise nettjenestefunksjoner på hovedsiden. Fullt redigerbar PSD, 3000 × 2000 px.

39. Perspektivbasert PSD-nettsted

Gratis mockup med premium-utseende. Kvalitetsperspektiv, høy oppløsning, utmerket alternativ for frilansere.

40. Perspective Web Presentation 09

Nærbilde i perspektiv. Flerlags smartobjekter, utskiftbar bakgrunn, forhåndsdesignet mal for rask start. 3000 × 2000 piksler.

41. Perspective Web Mockup 14

Kunstnerisk presentasjon: fremhever de beste delene av designet. Fullt redigerbar PSD, 3000 × 2000 piksler.

42. Free Perspective Web Mockup

Gratis mockup med bredt perspektiv. Høy oppløsning, designet ser skarpt ut selv på stor skjerm.

43. 3D Isometric Perspective Mockup

Uvanlig tredimensjonalt isometrisk perspektiv. Én vinkel, men med finjusteringsmulighet. Alle lag er smartobjekter.

44. Free PSD Perspective Website Mockup

Gratis perspektivmockup for enkle design. Alle lag, smartobjekter, tilpasning tar sekunder.

45. Perspective Web Presentation 07

«Galleriliknende» vinkel, designet ser ut som et utstillingsstykke. Fullt tilpassbar PSD med kunstnerisk atmosfære.

46. Freebie Perspective PSD Website Mockup

Kvalitetsfri mockup med unikt perspektiv. Lagdelt og organisert med smartobjekter, profesjonelt resultat uten kostnader.

47. Perspective Web Mockup 11

Ferdig PSD-fil med tydelig perspektivvisning. Flerlags, med separat skygge, kan lagres eller fjernes etter ønske.

48. Web Page Mockup Collection

Samling av perspektivmaler med ulike visninger. Gratis med kreditering, godt alternativ for personlige prosjekter.

49. Perspective Web Mockup 13

Vertikal visning: design vist som en stabel med kort. Utradisjonell presentasjon for portefølje og sosiale medier.

50. 3D-nettside og iPhone 5-mockuper

To i ett: nettside- og iPhone 5-mockuper. Perspektivvisninger, gratis nedlasting, grunnleggende sett for å komme i gang.

51. Perspektiv webmockup 01

Klassisk perspektivmockup for portefølje eller kundepresentasjon. Tilpassbar skyggelegging og skygger, kan tilpasses enhver stil.

52. Gratis nettside PSD-mockup

Gratis profesjonell mockup. Enkel, rask, ingen ekstra detaljer. Kreditering påkrevd.

53. Perspektiv webmockup 15

Minimalistisk mockup med bakgrunnssløringseffekt, betrakterens blikk fokuseres automatisk på designet. Bra for moderne, rene prosjekter.

54. Gratis PSD nettside-mockup

Mockup for å fremheve øverste del av siden, som designere sier at klienter vurderer først. Smarte lag for praktisk redigering.

55. Perspektiv webmockup 12

Designet ser ut til å henge på veggen, imponerende presentasjon som skiller seg ut fra standard isometriske mockuper. 3000 × 2000 px oppløsning.

56. Nettsidelayout-mockup PSD

Kvalitets perspektivmockup med fullstendige lag og smartobjekter. Gratis for personlige og kommersielle prosjekter.

57. Perspektiv webmockup 07

To visninger i én mockup: mer fleksibilitet for presentasjon. Bakgrunn endres enkelt uten å bryte perspektivet.

Hvordan velge en mockup til oppgaven

Med et slikt mangfold er det lett å bli forvirret. Her er en enkel utvalgsalgoritme:

• Trenger å vise alle sider samtidig, ta et isometrisk sett med 6+ skjermer (#1 eller #11). Skaper følelsen av et komplett produkt.

• Trenger fokus på én side, ta perspektivmockup med nærbilde (#28, #40). Designet ser monumentalt ut.

• Trenger å vise responsivitet, ta Browser Mockup Template (#4). Kunden ser nettstedet på alle enheter i én scene.

• Trenger «wow-presentasjon», ta et sett med 3D-mockups (#30) eller mockup med «på veggen»-vinkel (#36, #55).

• Begrenset budsjett, samlingen har mer enn 10 gratis mockups (#5, #10, #16, #29, #39, #42, #44, #46, #48, #52, #54, #56). Nok til de fleste frilansprosjekter.

Hvor får man tak i mockups i 2026

Mockup-markedet har endret seg siden 2020: nye plattformer har dukket opp, og premiummaler har blitt rimeligere.

Envato Elements er fortsatt hovedkilden: mer enn 2 millioner mockups, maler, temaer og grafikk på abonnement fra $16,50/mnd. Du laster ned alle filer uten begrensninger, for studioer er dette mer lønnsomt enn å kjøpe hver mockup separat.

For de som ser etter gratisalternativer: Free-Mockup.com og Good Mockups publiserer ferske PSD-mockup-samlinger hver uke.

Verdt å nevne separat er Figma Community: mockups er nå også tilgjengelige i Figma-format. Hvis du jobber i Figma, søk etter «website mockup» i Community, tusenvis av gratisalternativer.

Detaljert veiledning i å jobbe med PSD-mockups: åpne smartobjekter, bytte ut design, justere skygger og eksportere. Fra nybegynner til trygt resultat på 15 minutter.

⁉️🤔 Ofte stilte spørsmål

Hva er et smartobjekt i en PSD-mockup?

Smartobjekt er et lag i Photoshop som bevarer originalbildet og lar deg redigere det uten kvalitetstap. I PSD-mockups er smartobjektet stedet der du setter inn designet ditt. Dobbeltklikk på smartlag-ikonet, en separat fil åpnes, lim inn layouten din der, lagre, og den vises automatisk i mockupen med alle perspektivforvrengninger, skygger og høylys. Nøkkelpoeng: du endrer bare innhold, mens perspektiveffekter og lyssetting forblir uendret. Hvis du aldri har jobbet med dem, viser videoen over prosessen trinn for trinn.

Kan PSD-mockups brukes uten Photoshop?

Ja, men med begrensninger. Photopea (gratis nettredigeringsprogram photopea.com) åpner PSD og støtter smartobjekter, enkle mockups redigeres uten problemer. Affinity Photo er et engangskjøp ($69,99) med full PSD- og smartobjektstøtte. GIMP åpner PSD, men støtter ikke smartobjekter, ikke egnet for mockups. Praksis viser: hvis du jobber med mockups jevnlig, betaler Photoshop eller Affinity Photo seg gjennom tidsbesparelser.

Hvordan skiller en isometrisk mockup seg fra en perspektivisk?

Isometrisk layout viser objekt uten perspektivforminskning: parallelle linjer forblir parallelle, skalaen er den samme gjennom hele scenen. Denne visningen er praktisk for å demonstrere flere skjermer samtidig, de «flyter» ikke bort i det fjerne. Perspektivisk mockup imiterer ekte syn: fjerne objekter er mindre, linjer konvergerer mot et punkt. Det ser mer realistisk ut, men skjermer i scenedybden er vanskeligere å lese. For portefølje velges isometri oftere (alle arbeider like synlige). For kundepresentasjon, perspektiv (mer imponerende, ser «dyrere» ut).

Hvor lang tid tar det å sette inn design i en mockup?

Med en forberedt PSD-fil, fra 30 sekunder til 2 minutter per skjerm. Åpne mockup, dobbeltklikk smartobjekt, lim inn designet ditt (Ctrl+V), juster størrelse (Ctrl+T), lagre (Ctrl+S), lukk smartobjekt, ferdig. Et sett med 6 skjermer i isometrisk mockup kan klargjøres på 5-7 minutter. Den lengste delen er ikke teknisk, men å velge riktig vinkel. Ha 3-4 favorittmockups som matcher stilen din for hånden, dette kutter presentasjonstiden til et par minutter.

Må jeg kreditere mockup-forfatteren ved bruk?

Avhenger av lisensen. De fleste premium-mockups (Envato Elements, Creative Market) krever ikke navngivelse i personlige eller kommersielle prosjekter. Gratis mockups kommer ofte med krav om navngivelse, sjekk filbeskrivelsen før bruk. I kommersielle prosjekter er det tryggere å ta premium-mockups: ingen lisensrisiko og kvaliteten er gjennomgående høyere. Envato Elements-lisensen dekker kommersiell bruk uten navngivelse for alle filer i biblioteket.

Hva bør man velge for presentasjon av nettsted i 2026

Mockups er ikke bare et «pent bilde». De er et salgsverktøy: kunden ser ikke en flat layout, men et nesten ferdig produkt. Riktig presentert design blir godkjent på første forsøk.

Hvis du designer fra bunnen av, start med et verktøy: Framer for interaktivitet, Balsamiq for raske skisser, Moqups for teamarbeid. Når layouten er klar, ta en PSD-mal fra samlingen, sett inn designet med ett klikk, og presenter.

Husk: kunden kjøper tillit til at nettstedet vil se profesjonelt ut. En god mockup gir den tilliten.