Mockups

Mockups är kreativa, ofta fotorealistiska presentationer som visar hur en design kan se ut eller fungera i den verkliga världen. Med andra ord, att implementera någon av dessa fyra professionella mockup-tekniker ger en inblick i framtiden: en logotypdesign tryckt på en väska som bärs av tillfälliga shoppare, en app som rullas av en osynlig hand, eller till och med en helt varumärkesbutik. Gör det övertygande, du måste veta hur man gör professionella layouter. Här kommer vi att berätta hur du gör detta.

Även om de består av bilder, är designlayouter mest effektiva när de berättar en historia. Den omsorg och detaljer som lagts ner i berättelsen kommer att avgöra om publiken kommer att njuta av den eller söva den.

Det finns två element som gör en layoutteknik framgångsrik: kreativ sceninställning och realistisk inkludering av designen. Vi har tidigare behandlat ett tidigare ämne med tips som fokuserade på att formulera ett layoutkoncept och välja rätt bilder för att berätta en historia. I den här artikeln kommer vi kortfattat att beskriva de tekniska aspekterna av att skapa en mockup av din design med hjälp av de 4 vanligaste mockup-metoderna.

Layout av boken. Krav på bokdesign.

1. Skapa din egen layout från grunden. Mockups
-

En anpassad layout är en layout som är helt anpassad till en specifik design. Om du vill skapa unika mockups rekommenderar vi denna teknik att uppnå bästa resultat. Med tanke på att syftet med en mockup är presentation och i slutändan övertalning (dvs att sälja ett designkoncept), säger det sig självt att den mest övertygande modellen är en som är designad för en specifik kund.

Men att skapa mockups från grunden för varje projekt är naturligtvis inte det mest praktiska tillvägagångssättet. Detta kräver mycket ansträngning för något som i huvudsak är en engångspresentation tillgång. Detta är också bara användbart om layoutkonceptet är väldigt originellt - det är ingen idé att bråka med alla dessa problem om resultatet inte går att skilja från mallen. I slutändan är det upp till dig att bestämma om du brinner nog för projektet eller kunden för att göra en extra mil för att skapa en unik modell.

För en riktigt anpassad layout behöver du originalfoton. Detta gör att du kan skapa en scenlayout som ligger mycket närmare din designvision, medan stockfoton till sin natur är designade för allmänna inställningar och scener. Om du har utrustning, erfarenhet och tid kan du ta dina egna fotografier. I det här fallet bör du brainstorma eller skissa på scenen i förväg, på samma sätt som du kan skapa storyboard i en film.

Vad är försäljningsmarginalen? och hur man beräknar det

Du kan också anlita en professionell fotograf, men det här är naturligtvis en kostnad som inte kommer att vara praktisk för alla designer - det är mer troligt att en designbyrå arbetar med företagskunder. Ett bra alternativ är att använda foton som tillhör kunden: till exempel använder designern Top Level goopanic sitt varumärke Academia de Artes på riktiga bilder av skolan och dess elever. Även om dessa bilder inte är så Hög kvalitetSom professionella stockfoton kommer de att ge kunden en mer autentisk uppfattning om hur deras design i slutändan kommer att se ut.

När du har dina bilder måste du använda fotoredigeringsprogram för att infoga din design i bilden. Den vanligaste programvaran för detta ändamål är Adobe Photoshop, men Affinity Photo och Gimp är pålitliga alternativ. Dessa program ger många verktyg och guider för att uppnå realistiska resultat, och de kokar i princip ner till följande:

• transformationsverktyg för att få designen att matcha bilden
• blandningslägen för att införliva textur från originalfotot
• justeringslager för att arbeta med ljus, färg och kontrast

 

Om du vill arbeta med anpassade animationer, använd animeringsprogram som After Effects: du kan till exempel använda lagermasker för att skapa rullande animationer för appar på ett telefonfoto.

Obligatoriska verktyg

• Fotografi och/eller fotoutrustning
• Programvara för fotoredigering (Photoshop, Serif Photo, Gimp)
• *Valfritt* Animationsprogramvara (Adobe After Effects)

kostnader

• Måttlig till hög

Fördelar

• Resultatet är mockups som är mer specifika och sanna mot designerns vision.
• Källbilder; inga vattenstämplar eller behöver köpa licenser

Nackdelar

• Dyrt och kräver mycket ansträngning; kräver djupare mjukvarukännedom
• Ineffektivt och tidskrävande
  Kontorstryck för företag från tryckeriet Azbuka.

2. Skapa återanvändbara layoutmallar. Mockups.
-

Anpassade layoutmallar är layouter som designers skapar själva, men är generiska nog att användas i flera projekt. Som vi påpekade i det förra avsnittet kan det vara opraktiskt och dyrt att skapa anpassade mockups för varje projekt, men den här metoden gör det möjligt för designern att skapa mockups som är både original och återanvändbara till en lägre kostnad.

Detta är också ett sätt för designern att lägga till sitt eget personligt varumärke eller repetitiv stil i dina presentationer för kunder.

Processen för att skapa mockupmallar är i huvudsak densamma som att skapa anpassade mockups: du måste fortfarande köpa ett foto och använda ett fotoredigeringsprogram för att införliva designen. En skillnad är tillvägagångssättet för att fotografera din layout: det bör vara tillräckligt vagt för att fungera för flera kunder – till exempel, istället för att använda något identifierande landskap, fokuserar toppdesignern Daria V:s layoutbakgrunder på illustrerade accenter som kan ändras med varje projekt.

Detta kan hjälpa gruppera kunder baserat på vanliga teman, som industri (du kan ha en layoutmall för alla dina restaurangägande kunder, en för alla dina detaljhandelskunder, etc.). Detta gör det lättare att välja bilder som fungerar i vanliga sammanhang.

Boklayoutgeneratorer: 5 GRATIS verktyg

För fysiska produkter skapar vissa designers tomma renderingar av produkten med hjälp av 3D-programvara som Adobe Dimension, och detta har den extra fördelen att det tillåter skapandet av roterbara, animerade layouter.

För att skapa din malllayout i Photoshop är ditt mål i princip att ställa in dokumentet så att designen enkelt kan ersättas i framtida projekt samtidigt som du behåller alla dina manipulation. Photoshop tillhandahåller två för detta användbara verktyg:

Photoshop smarta objekt. Mockups.

Ett smart objekt är i grunden en behållare som lagrar en bild i ett länkat dokument, vilket gör att du kan göra drastiska ändringar i den i din större komposition utan att påverka originalbilden. Om du ersätter en bild i ett smart objekt kommer den att uppdateras i kompositionen med alla dina ändringar tillämpade på den.

Så, med mockups, är allt du behöver göra att konvertera designlagret till ett smart objekt i början av projektet (gå till Lager > Smarta objekt > Konvertera till smart objekt). Efter det kan du helt enkelt byta ut designen inuti det smarta objektet nästa gång du behöver en layout.

Photoshop-åtgärder. Mockups.

Åtgärder registrerar ändringarna du gör i ett Photoshop-dokument så att du kan upprepa dessa steg med ett klick på en knapp, vilket eliminerar upprepade uppgifter. Så med en mockup kan du använda en åtgärd för att spela in alla transformationer och effekter du tillämpar på en design för att få den att matcha ett foto, och tillämpa samma ändringar på en annan design i framtiden bara genom att klicka på en knapp.

Obligatoriska verktyg

• Fotografi och/eller fotoutrustning
• Fotoredigeringsprogram (Photoshop, Serif Photo, Gimp)
• *Valfritt* 3D-produktmodelleringsprogramvara

kostnader

• måttlig

Fördelar

• Upprepad användning gör det värt ansträngningen att skapa anpassade layouter.
• Källbilder; inga vattenstämplar eller behöver köpa licenser

Nackdelar

• Kräver mer avancerad mjukvarukunskap
• Det kan vara ett slöseri med ansträngning om resultaten inte skiljer sig tillräckligt mycket från en mall från tredje part.

3. Använd en mockup generator webbplats.
-

En mockup-generatorwebbplats är en onlinetjänst som använder stockbilder och AI-programvara för att automatiskt generera en mockup från en tredjepartsmall. Vanligtvis är allt en designer behöver göra att ladda upp sin design och programvaran tar hand om alla tekniska problem.

Denna metod är den absolut billigaste och enklaste lösningen, men den har vissa nackdelar. Den resulterande layouten kommer att vara overoriginal, och med tanke på att många designers har använt samma tjänst är det inte ovanligt att se samma layoutbilder dyka upp i illamående över hela portföljwebbplatser. Samtidigt kan det vara användbart i ett nafs, och om inte klienten är en designer-mockup-leverantör kommer de förmodligen inte ha något emot det.

När du väljer en tjänst bör du tänka på följande: pris, kvalitet och relevans. Prismässigt är många mockup-generatorer gratis att använda, även om du bör vara försiktig med dolda olägenheter som att lägga till vattenstämplar eller ett begränsat urval av mallar. Annars baseras priset oftast på abonnemangsmodeller, och de flesta av de tjänster jag har recenserat ligger i intervallet $10 till $20 per månad.

Kvalitet kan bero på personlig smak, men du bör ägna lite tid åt att studera layouterna som andra designers och konkurrenter använder för att få en känsla för vad som är smart och vad som är generiskt. Du kan också använda tjänster som Trustpilot för att hitta användarrecensioner som berättar, utöver reklammaterialet, hur bra tjänsten fungerar och vad de faktiska resultaten är.

Skärmdump av Smartmockups designmockupgenerators hemsida

Slutligen, några av dessa webbplatser är specialiserade på vissa typer av layouter, och du måste välja en som är relevant för dina projekt, särskilt om du köper ett abonnemang. Till exempel är Artboard Studio och Mockup Mark specialiserade på tryck och layouter kläder. Tjänster som AppMockUp och Mockuuups Studio är specialiserade på digital designmockups. Samtidigt erbjuder Smartmockups, renderforest och Placeit vanliga mockupmallar för både tryckta och digitala.

Obligatoriska verktyg

• Pålitlig Internetanslutning
• *Valfritt* Medlemskap i webbplatslayout

kostnader

• Från gratis till lågt

Fördelar

• Snabbt och utan ansträngning; ingen programvara kunskap krävs
• Kvalitet kan ibland vara nära anpassad layout

Nackdelar

• Skapar ett gemensamt utseende med bilder som många mönster använder online.
• Prenumerationsmodellen är bara användbar om flera layouter behövs.

4. Använd en mjukvaruplugin för att skapa layouter.
-

Mockup-plugins är tredjepartsintegrationer som ansluter till designprogramvara för att skapa mockups. I huvudsak tillåter dessa applikationer designers att designa och skapa layouter inom ett enda program, med den extra fördelen att designern kan använda programmets verktyg för att göra ändringar i layouten efter att den har skapats.

Det är det bästa av två världar: en billig, lättanvänd, anpassningsbar mall. Med det sagt är den här metoden generellt avsedd för digital design, och de flesta plugins är inriktade på applikationsprototypprogram som t.ex. skiss , figma и Adobe XD .

Det finns flera populära tjänster som tillhandahåller nedladdningsbara plugins, inklusive Vinkel , Rotato и Mokup ramar . Eftersom denna programvara är nedladdningsbar kräver den vanligtvis en engångsbetalning. Detta pris är vanligtvis högre än de flesta mockup-generatorsajter, men det är lägre i det långa loppet eftersom du inte betalar någon prenumerationsavgift.

Du måste följa webbplatsspecifika instruktioner för att ladda ner och installera plugin-programmet i din programvara. Därifrån har du möjlighet att applicera designen från din programvara till layouten. Processen liknar att använda en webbplats med en mockup-generator: plugin-programmet skapar automatiskt din mockup och du kommer att använda anpassningsverktygen för att förfina den.

Obligatoriska verktyg

• Designprogramvara (Sketch, Figma, Adobe XD)
• Ladda ner licens och plugin

kostnader

• låg

Fördelar

• Snabbt och utan ansträngning; Lite mjukvarukunskap krävs
• Mockups skapas i designprogramvara som en del av designprocessen.

Nackdelar

• Skapar ett gemensamt utseende med bilder som många mönster använder online.
• Resultaten skiljer sig inte mycket från online mockup-generatorer

Det är dags att skapa unika mockups!
-

Designmockups är otroligt kraftfulla presentationsverktyg som inte bara säljer en designidé, utan också ger tittaren ett fönster in i en framtid där designen redan finns. När det görs väl kommer kunden nästan att tvingas göra denna framtid till verklighet.

Som anges i den här artikeln finns det många metoder för att skapa mockups, och var och en av dem har sin egen fördelar och nackdelar. Men oavsett hur du skapar dina layouter kommer resultaten i slutändan att bero på designern och hans engagemang för att realistiskt återge en layout som hoppar från skärmen.

 АЗБУКА

Hur man framgångsrikt hanterar projekt i ett onlineföretag