En mockupmall för webbsidor kan vara en livräddare för design. Det gör det enkelt att visa upp ett webbdesignkoncept i en inställning som representerar faktisk användning (på många olika enheter). Men hur kan du anpassa en webbplats mockup mall och släppa in din egen design? Här är hur.
Det finns två sätt att komma igång. Du kan antingen skapa din egen webbplats mockup mall för att använda i projekt eller ladda ner en för att komma igång snabbt. Det bästa är att det finns så många mallalternativ där ute för att hjälpa kunder att visualisera en ny design i realtid.
Här är allt du behöver veta om att anpassa en mall (samt hitta en bra mall, till att börja med).
Vad är en mockupmall för webbsidor?
Kunderna älskar att se en färdig design i en mockupmall, eftersom det ger dem en bättre uppfattning om vad designteamet tänker. De flesta mockupmallar för webbplatsen kommer i form av en redigerbar Adobe Photoshop-fil. Designen är utformad så att du kan klistra in en skärmdump av din webbplats till en realistisk utseende, till exempel att visa en hemsida på en verklig dator, surfplatta eller mobilenhet.
Mockupmallar för webbsidor kan innehålla en enda bild, flera bilder och ger olika orienteringar. En bra mockup kan ge en fantastisk visualisering av vad en färdig produkt kommer att se ut i själva användningen.
Medan du kan skapa egna mockups finns det många alternativ för nedladdning. De flesta av dessa mallar skapas som PSD-filer med lager och smarta objekt för att skapa den slutliga designen, samtidigt som filens visuella egenskaper upprätthålls. Detta är till nytta när du använder en mockup som använder en intressant orientering, till exempel 3D eller perspektivvy.
De flesta mockupmallar på webbplatsen innehåller en blandning av vektor- och rasterbilder, så exportera med försiktighet. Du vill se till att din webbplatsbild ser så bra ut som möjligt innan du visar den.
Hur man anpassar en mockupmall
Medan en Photoshop-fil med flera udda skikt kan vara lite skrämmande, är det inte en komplicerad process att anpassa en mockupmall. Du behöver bara:
- Hitta en webbplats mockup mall som du gillar. (Du kan göra din egen, men med så många bra alternativ som möjligt, rekommenderade vi nedladdningsalternativet.) Leta efter en mall som framhäver funktioner i din design, till exempel flera visningar för lyhörda webbplatser (skrivbord, tablett och telefon) med en bakgrund som passar projektets stil (vitt eller svart kontra en färgstark bakgrund eller fotorealistisk stil).
- Unzip hämtningen och bekräfta att du har alla nödvändiga delar: En PSD-fil med redigerbar mockup, en JPG som visar dig hur designen ska se ut (tillval) och en information eller readme-fil med all licensinformation och instruktioner.
- Öppna PSD-filen i Photoshop och ta en titt på lagren. Leta efter lagret som säger? Släpp din design här ?, eller liknande (det finns alltid en som står upp med denna instruktion!)
- Dubbelklicka på det lagret, för att öppna det.
- Ta lämpliga skärmdumpar av din design, storlek för optimal upplösning och för att visa exakt vad du vill att folk ska se i den slutliga mockupdesignen.)
- Kopiera och klistra in eller dra och släpp dina bilder eller innehåll i rätt lager, ändra storlek efter behov för att fylla utrymmet.
- Tryck Ctrl-S eller Cmd-S för att spara det smarta lagret och gå tillbaka till originalbilden. Voila! Du borde se din nya skärmdump i mockupen.
- Exportera filen, med den storlek och format du behöver, för visning.
Så här använder du en mockupmall för webbsidor
När har du anpassat en mockupmall för webbsidor, vad gör du med det? Dessa till synes enkla mönster har många praktiska tillämpningar. Du kan använda en mockupmall för webbsidor till:
- Förhandsgranska mönster för kunder
- Förbered marknadsföring och kampanjer efter lanseringen
- Inkludera i tryckta portföljer
- Sumbit en tävling poster, när du planerar att visa upp den slutliga designen
Allt du behöver göra för att använda en mockupmall för webbsidor exporterar din anpassade design till ett användbart format. Merparten av denna tid innehåller detta två alternativ: en högupplöst bildfil för utskriftstillämpningar och en webupplösningsfil som ska användas online eller för delning av e-post.
Var hittar man en webbplats Mockup Mall
Så allt detta berättar förmodligen frågan: Var hittar du en av de här praktiska webbplatsmallupmallarna? Det finns gott om gratis och betalda alternativ tillgängliga från en mängd olika källor.
Vi har också ett par fantastiska roundups som innehåller många mockups som du kan komma igång med direkt.
- 20 + Bästa Responsive Website & App Mockup Mallar
- 20 + Bästa Webbsida PSD Perspective Mockups
10 Gratis hemsida Mockups att börja med
För att du är redo att börja använda en webbplatsmockup, har vi hittat 10 bra och gratis alternativ för att hjälpa dig att komma igång. Några av dessa mockups finns i andra Design Shack roundups också.)
2 MacBook Pro Desk Mockups
Responsive Showcase PSD Mockups
Vector Apple Outline Device PSD
Flat Responsive Showcase
Vit iPad och iPhone Golv Mockup
MacBook och iPhone på Table Mockup
Apple Device Wireframe Mockups
Responsive Web Design Showcase Mockup
Mockup MacBook Air
MacBook Pro Retina Display PSD
Slutsats
Att anpassa en webbplats mockup mall för att visa upp ett projekt är ett utmärkt verktyg för att få i din arsenal. Även om du bara har några minuter att förbereda dig för en presentation, kan du popa din webbdesign till ett verkligt scenario för ett polerat utseende.
Medan du kanske inte bryr dig om den övergripande presentationen av en design eller idé, kommer kunderna definitivt att märka. Detta är en av de snabba och enkla genvägar som designers (och frilansare) kan ta för att få ett bra intryck. Ha kul att skräddarsy en mall för dina projekt!
Webbplatsmockups
Hitta den perfekta mottagliga webbplatsens mockup, för att visa din webbdesign på alla typer av enheter, skärmar och format. Dessutom lär du dig att använda dem till stor effekt!