Mockups

Mockups er kreative, ofte fotorealistiske præsentationer, der viser, hvordan et design kan se ud eller fungere i den virkelige verden. Med andre ord giver implementeringen af ​​en af ​​disse 4 professionelle mockup-teknikker et indblik i fremtiden: et logodesign trykt på en taske båret af afslappede shoppere, en app, der rulles af en usynlig hånd, eller endda en butiksfront med fuldt mærke. Gør det overbevisende, du skal vide, hvordan man laver professionelle layouts. Her vil vi fortælle dig, hvordan du gør dette.

Selvom de består af billeder, er designlayouts mest effektive, når de fortæller en historie. Omhu og detaljer i historien vil afgøre, om publikum vil nyde den eller lægge den til at sove.

Der er to elementer, der gør en layoutteknik vellykket: kreativ sceneindstilling og realistisk inddragelse af designet. Vi har tidligere dækket et tidligere emne med tips, der fokuserede på at formulere et layoutkoncept og vælge de rigtige billeder til at fortælle en historie. I denne artikel vil vi kort skitsere de tekniske aspekter ved at lave en mockup af dit design ved hjælp af de 4 mest almindelige mockup-metoder.

Layout af bogen. Krav til bogdesign.

1. Lav dit eget layout fra bunden. Mockups
—

Et brugerdefineret layout er et layout, der er helt tilpasset til et specifikt design. Hvis du ønsker at skabe unikke mockups, anbefaler vi denne teknik at opnå bedste resultater. Da formålet med en mockup er præsentation og i sidste ende overtalelse (dvs. at sælge et designkoncept), siger det sig selv, at den mest overbevisende mockup er en, der er designet til en specifik kunde.

Men selvfølgelig er det ikke den mest praktiske tilgang at skabe mockups fra bunden for hvert projekt. Dette kræver en stor indsats for noget, der i det væsentlige er en engangspræsentation aktiv. Dette er også kun nyttigt, hvis layout-konceptet er meget originalt - det nytter ikke noget at rode rundt med alle disse problemer, hvis resultatet ikke kan skelnes fra skabelonen. I sidste ende er det op til dig at beslutte, om du brænder nok for projektet eller kunden til at gå den ekstra mil for at skabe en enestående mockup.

For et virkelig brugerdefineret layout skal du bruge originale billeder. Dette giver dig mulighed for at skabe et scenelayout, der er meget tættere på din designvision, hvorimod stockfotos efter deres natur er designet til generelle indstillinger og scener. Hvis du har udstyret, erfaringen og tiden, kan du tage dine egne billeder. I dette tilfælde bør du brainstorme eller skitsere scenen på forhånd, svarende til hvordan du kan storyboarde en film.

Hvad er salgsmargin? og hvordan man beregner det

Du kan også hyre en professionel fotograf, men det er selvfølgelig en udgift, der ikke vil være praktisk for enhver designer - det er mere sandsynligt, når et designbureau arbejder med erhvervskunder. Et godt alternativ er at bruge billeder, der tilhører kunden: for eksempel anvender designer Top Level goopanic sin Academia de Artes-branding på rigtige billeder af skolen og dens elever. Også selvom disse billeder ikke er sådan Høj kvalitetSom professionelle stockfotos vil de give kunden en mere autentisk idé om, hvordan deres design i sidste ende vil se ud.

Når du har dine billeder, skal du bruge billedredigeringssoftware til at inkorporere dit design i billedet. Den mest almindelige software til dette formål er Adobe Photoshop, men Affinity Photo og Gimp er pålidelige alternativer. Disse programmer giver mange værktøjer og vejledninger til at opnå realistiske resultater, og de koger grundlæggende ned til følgende:

• transformationsværktøjer for at få designet til at matche billedet
• blandingstilstande for at inkorporere tekstur fra det originale billede
• justeringslag til arbejde med lys, farve og kontrast

 

Hvis du vil arbejde med brugerdefinerede animationer, skal du bruge animationssoftware som After Effects: for eksempel kan du bruge lagmasker til at oprette rulleanimationer til apps på et telefonbillede.

Nødvendige værktøjer

• Fotografi og/eller fotografisk udstyr
• Software til billedredigering (Photoshop, Serif Photo, Gimp)
• *Valgfri* Animationssoftware (Adobe After Effects)

udgifter

• Moderat til høj

Pros

• Resultatet er mockups, der er mere specifikke og tro mod designerens vision.
• Kildebilleder; ingen vandmærker eller behov for at købe licenser

Cons

• Dyrt og kræver en stor indsats; kræver dybere softwarekendskab
• Ineffektiv og tidskrævende
  Kontortryk til erhverv fra Azbuka trykkeriet.

2. Opret genanvendelige layoutskabeloner. Mockups.
—

Brugerdefinerede layoutskabeloner er layouts, som designere selv skaber, men er generiske nok til at blive brugt på tværs af flere projekter. Som vi påpegede i sidste afsnit, kan det være upraktisk og dyrt at skabe brugerdefinerede mockups til hvert projekt, men denne metode giver designeren mulighed for at skabe mockups, der er både originale og genbrugelige til en lavere pris.

Dette er også en måde for designeren at tilføje sit eget personligt brand eller gentagne stil i dine præsentationer til kunder.

Processen til at oprette mockup-skabeloner er i det væsentlige den samme som at skabe brugerdefinerede mockups: du skal stadig købe et billede og bruge et fotoredigeringsprogram til at inkorporere designet. En forskel er tilgangen til at fotografere dit layout: det skal være vagt nok til at fungere for flere klienter - for eksempel i stedet for at bruge et identificerende landskab, fokuserer top-tier designer Daria V.'s layoutbaggrunde på illustrerede accenter, der kan ændres med hvert projekt.

Dette kan hjælpe med at gruppere kunder baseret på fælles temaer, såsom industri (du kunne have én layoutskabelon til alle dine restaurantejende kunder, én til alle dine detailkunder osv.). Dette gør det nemmere at vælge billeder, der vil fungere i almindelige sammenhænge.

Boglayoutgeneratorer: 5 GRATIS værktøjer

For fysiske produkter opretter nogle designere tomme gengivelser af produktet ved hjælp af 3D-software såsom Adobe Dimension, og dette har den ekstra fordel, at det tillader oprettelse af roterbare, animerede layouts.

For at skabe dit skabelonlayout i Photoshop, er dit mål grundlæggende at opsætte dokumentet, så designet nemt kan udskiftes i fremtidige projekter, samtidig med at alle dine manipulation. Photoshop giver to til dette nyttige værktøjer:

Photoshop Smart Objects. Mockups.

Et smart objekt er i bund og grund en beholder, der gemmer et billede i et linket dokument, så du kan foretage drastiske ændringer i det i din større komposition uden at påvirke det originale billede. Hvis du erstatter et billede i et smart objekt, opdateres det i kompositionen med alle dine ændringer anvendt på det.

Så med mockups skal du blot konvertere designlaget til et smart objekt i starten af ​​projektet (gå til Layer > Smart Objects > Konverter til Smart Object). Derefter kan du blot udskifte designet inde i det smarte objekt, næste gang du skal bruge et layout.

Photoshop handlinger. Mockups.

Handlinger registrerer de ændringer, du foretager i et Photoshop-dokument, så du kan gentage disse trin med et klik på en knap, hvilket eliminerer gentagne opgaver. Så med en mockup kan du bruge en handling til at registrere alle de transformationer og effekter, du anvender på et design for at få det til at matche et billede, og anvende de samme ændringer på et andet design i fremtiden blot ved at klikke på en knap.

Nødvendige værktøjer

• Fotografi og/eller fotografisk udstyr
• Fotoredigeringssoftware (Photoshop, Serif Photo, Gimp)
• *Valgfri* 3D-produktmodelleringssoftware

udgifter

• moderat

Pros

• Gentagen brug gør det umagen værd at skabe brugerdefinerede layouts.
• Kildebilleder; ingen vandmærker eller behov for at købe licenser

Cons

• Kræver mere avanceret softwarekendskab
• Det kan være spild af kræfter, hvis resultaterne ikke er forskellige nok fra en tredjepartsskabelon.

3. Brug en mockup generator hjemmeside.
—

Et mockup-generatorwebsted er en onlinetjeneste, der bruger stockbilleder og AI-software til automatisk at generere en mockup fra en tredjepartsskabelon. Typisk er alt, hvad en designer skal gøre, at uploade deres design, og softwaren vil tage sig af alle de tekniske problemer.

Denne metode er langt den billigste og nemmeste løsning, men den har nogle ulemper. Det resulterende layout vil være uoriginalt, og i betragtning af at mange designere har brugt den samme service, er det ikke ualmindeligt at se de samme layoutbilleder dukke op ad nauseum overalt på porteføljewebsteder. Samtidig kan det være nyttigt i en knivspids, og medmindre klienten er en designer mockup-udbyder, vil de sandsynligvis ikke have noget imod det.

Når du vælger en service, bør du overveje følgende: pris, kvalitet og relevans. Prismæssigt er mange mockup-generatorer gratis at bruge, selvom du skal være på vagt over for skjulte gener såsom tilføjelse af vandmærker eller et begrænset udvalg af skabeloner. Ellers er prisen normalt baseret på abonnementsmodeller, og de fleste af de tjenester, jeg har gennemgået, er i intervallet $10 til $20 pr. måned.

Kvalitet kan komme ned til personlig smag, men du bør bruge lidt tid på at studere de layouts, som andre designere og konkurrenter bruger for at få en fornemmelse af, hvad der er smart, og hvad der er generisk. Du kan også bruge tjenester som Trustpilot til at finde brugeranmeldelser, der fortæller dig, ud over kampagnematerialet, hvor godt tjenesten fungerer, og hvad de faktiske resultater er.

Skærmbillede af Smartmockups design mockup generator hjemmeside

Endelig er nogle af disse websteder specialiserede i visse typer layout, og du bliver nødt til at vælge en, der vil være relevant for dine projekter, især hvis du køber et abonnement. For eksempel har Artboard Studio og Mockup Mark specialiseret sig i tryk og layout tøj. Tjenester som AppMockUp og Mockuuups Studio specialiserer sig i digitale designmockups. I mellemtiden tilbyder Smartmockups, renderforest og Placeit almindelige mockup-skabeloner til både print og digital.

Nødvendige værktøjer

• Pålidelig internetforbindelse
• *Valgfri* Medlemskab af webstedslayout

udgifter

• Fra gratis til lav

Pros

• Hurtigt og ubesværet; ingen software viden påkrævet
• Kvalitet kan nogle gange være tæt på tilpasset layout

Cons

• Skaber et fælles look med billeder, som mange designs bruger online.
• Abonnementsmodellen er kun nyttig, hvis der er behov for flere layouts.

4. Brug et softwareplugin til at oprette layouts.
—

Mockup-plugins er tredjepartsintegrationer, der forbinder til designsoftware for at skabe mockups. Grundlæggende giver disse applikationer designere mulighed for at designe og skabe layout i et enkelt program, med den ekstra fordel, at designeren kan bruge programmets værktøjer til at foretage ændringer i layoutet, efter at det er blevet oprettet.

Det er det bedste fra begge verdener: en billig skabelon, der kan tilpasses med lav indsats. Med det sagt er denne metode generelt beregnet til digitalt design, og de fleste plugins er rettet mod applikationsprototyping-software som f.eks. Skitse , figma и Adobe XD .

Der er flere populære tjenester, der tilbyder plugins, der kan downloades, bl.a Vinkel , Roteret и Mokup rammer . Fordi denne software kan downloades, kræver den normalt en engangsbetaling. Denne pris er normalt højere end de fleste mockup-generatorsider, men den er lavere i det lange løb, da du ikke betaler et abonnementsgebyr.

Du skal følge webstedsspecifikke instruktioner for at downloade og installere pluginnet i din software. Derfra har du mulighed for at anvende designet fra din software til layoutet. Processen ligner at bruge et websted med en mockup-generator: plugin'et vil automatisk oprette din mockup, og du vil bruge tilpasningsværktøjerne til at forfine det.

Nødvendige værktøjer

• Designsoftware (Sketch, Figma, Adobe XD)
• Hent licens og plugin

udgifter

• lav

Pros

• Hurtigt og ubesværet; Lidt softwarekendskab kræves
• Mockups oprettes i designsoftware som en del af designprocessen.

Cons

• Skaber et fælles look med billeder, som mange designs bruger online.
• Resultaterne er ikke meget forskellige fra online mockup-generatorer

Det er tid til at skabe unikke mockups!
—

Designmockups er utroligt kraftfulde præsentationsværktøjer, der ikke kun sælger en designidé, men også giver seeren et vindue ind i en fremtid, hvor det design allerede eksisterer. Når det gøres godt, vil klienten næsten være tvunget til at gøre denne fremtid til virkelighed.

Som nævnt i denne artikel er der mange metoder til at skabe mockups, og hver af dem har sin egen fordele og ulemper. Men uanset hvordan du opretter dine layouts, vil resultaterne i sidste ende afhænge af designeren og hans forpligtelse til realistisk at gengive et layout, der springer ud af skærmen.

 АЗБУКА

Sådan styrer du projekter med succes i en online-forretning