Mockups er kreative, ofte fotorealistiske presentasjoner som viser hvordan et design kan se ut eller fungere i den virkelige verden. Med andre ord, å implementere en av disse 4 profesjonelle mockup-teknikkene gir et glimt inn i fremtiden: et logodesign trykt på en veske båret av tilfeldige shoppere, en app som rulles av en usynlig hånd, eller til og med en butikkfront med full merkevare. Gjør det overbevisende, du må vite hvordan du lager profesjonelle layouter. Her vil vi fortelle deg hvordan du gjør dette.
Selv om de består av bilder, er designoppsett mest effektive når de forteller en historie. Omtanken og detaljene som legges inn i historien vil avgjøre om publikum vil nyte den eller legge den i dvale.
Det er to elementer som gjør en layoutteknikk vellykket: kreativ scenesetting og realistisk inkludering av designet. Vi dekket tidligere et tidligere emne med tips som fokuserte på å formulere et layoutkonsept og velge de riktige bildene for å fortelle en historie. I denne artikkelen skal vi kort skissere de tekniske aspektene ved å lage en mockup av designet ditt ved å bruke de 4 vanligste mockup-metodene.
1. Lag din egen layout fra bunnen av. Mockups
Et tilpasset oppsett er et oppsett som er fullstendig tilpasset et spesifikt design. Hvis du ønsker å lage unike mockups, anbefaler vi denne teknikken å oppnå beste resultater. Gitt at formålet med en mockup er presentasjon og til syvende og sist overtalelse (dvs. å selge et designkonsept), sier det seg selv at den mest overbevisende mockupen er en som er designet for en spesifikk klient.
Drikkevaremerkelogodesign og layout
Men selvfølgelig er det ikke den mest praktiske tilnærmingen å lage mockups fra bunnen av for hvert prosjekt. Dette krever mye innsats for noe som egentlig er en engangspresentasjon ressurs. Dette er også bare nyttig hvis layoutkonseptet er veldig originalt - det er ingen vits i å rote rundt med alt dette problemet hvis resultatet ikke kan skilles fra malen. Til syvende og sist er det opp til deg å avgjøre om du brenner nok for prosjektet eller kunden til å strekke deg ekstra for å lage en unik mockup.
Logodesign og layoutpresentasjon for et teknologimerke
For en virkelig tilpasset layout trenger du originale bilder. Dette lar deg lage et sceneoppsett som er mye nærmere designsynet ditt, mens lagerbilder av natur er designet for generelle innstillinger og scener. Har du utstyr, erfaring og tid kan du ta dine egne bilder. I dette tilfellet bør du brainstorme eller skissere scenen på forhånd - på samme måte som du kan skrive storyboard i en film.
Du kan også leie en profesjonell fotograf, men dette er selvfølgelig en utgift som ikke vil være praktisk for enhver designer - dette er mer sannsynlig i riket til et designbyrå som jobber med bedriftskunder. Et flott alternativ er å bruke fotografier som tilhører kunden: For eksempel bruker designer Top Level goopanic sin Academia de Artes-merkevare på ekte fotografier av skolen og dens elever. Selv om disse bildene ikke er sånn Høy kvalitetSom profesjonelle arkivbilder vil de gi kunden en mer autentisk idé om hvordan designet deres til slutt vil se ut.
Når du har bildene dine, må du bruke programvare for bilderedigering for å integrere designet ditt i bildet. Den vanligste programvaren for dette formålet er Adobe Photoshop, men Affinity Photo og Gimp er pålitelige alternativer. Disse programmene gir mange verktøy og guider for å oppnå realistiske resultater, og de koker i utgangspunktet ned til følgende:
- transformasjonsverktøy for å få designet til å matche bildet
- blandingsmoduser for å inkludere tekstur fra originalbildet
- justeringslag for arbeid med lys, farge og kontrast
Hvis du vil jobbe med tilpassede animasjoner, bruk animasjonsprogramvare som After Effects: for eksempel kan du bruke lagmasker til å lage rulleanimasjoner for apper på et telefonbilde.
Nødvendige verktøy
- Fotografi og/eller fotoutstyr
- Programvare for Foto redigering (Photoshop, Serif Photo, Gimp)
- *Valgfritt* Animasjonsprogramvare (Adobe After Effects)
utgifter
- Moderat til høy
Pros
- Resultatet er mockups som er mer spesifikke og tro mot designerens visjon.
- Kildebilder; ingen vannmerker eller behov for å kjøpe lisenser
Cons
- Dyrt og krever mye innsats; krever dypere programvarekunnskap
- Ineffektivt og tidkrevende
Kontortrykk for bedrifter fra trykkeriet Azbuka.
2. Lag gjenbrukbare layoutmaler. Mockups.
-
Tilpassede layoutmaler er layouter som designere lager selv, men er generiske nok til å brukes på tvers av flere prosjekter. Som vi påpekte i den siste delen, kan det være upraktisk og dyrt å lage tilpassede modeller for hvert prosjekt, men denne metoden lar designeren lage modeller som er både originale og gjenbrukbare til en lavere kostnad.
Dette er også en måte for designeren å legge til sitt eget personlig merkevare eller repeterende stil i presentasjonene dine til kunder.
Appdesignmockup som viser en mann på en kafé som bruker en iPhone
Prosessen for å lage mockup-maler er i hovedsak den samme som å lage tilpassede mockups: du må fortsatt kjøpe et bilde og bruke et bilderedigeringsprogram for å innlemme designet. En forskjell er tilnærmingen til å fotografere layouten din: den skal være vag nok til å fungere for flere klienter - for eksempel, i stedet for å bruke et identifiserende landskap, fokuserer toppdesigner Daria V.s layoutbakgrunn på illustrerte aksenter som kan endres med hvert prosjekt.
Illustrert produktemballasjemockup-design
Illustrert produktemballasjemockup-design
Dette kan hjelpe gruppere kunder basert på vanlige temaer, for eksempel industri (du kan ha en layoutmal for alle dine restauranteiende kunder, en for alle detaljkunder osv.). Dette gjør det lettere å velge bilder som vil fungere i vanlige sammenhenger.
For fysiske produkter lager noen designere tomme gjengivelser av produktet ved hjelp av 3D-programvare som Adobe Dimension, og dette har den ekstra fordelen at det kan lages roterbare, animerte layouter.
For å lage maloppsettet ditt i Photoshop, er målet ditt i utgangspunktet å sette opp dokumentet slik at designet enkelt kan erstattes i fremtidige prosjekter mens du opprettholder alle dine manipulasjon. Photoshop gir to for dette nyttige verktøy:
Photoshop Smart Objects. Mockups.
Et smart objekt er i hovedsak en beholder som lagrer et bilde i et koblet dokument, slik at du kan gjøre drastiske endringer i det i den større komposisjonen din uten å påvirke originalbildet. Hvis du erstatter et bilde i et smart objekt, vil det oppdateres i komposisjonen med alle endringene dine brukt på det.
Så, med mockups, er alt du trenger å gjøre å konvertere designlaget til et smart objekt ved starten av prosjektet (gå til Lag > Smarte objekter > Konverter til smart objekt). Etter det kan du ganske enkelt erstatte designet inne i det smarte objektet neste gang du trenger en layout.
Photoshop-handlinger. Mockups.
Handlinger registrerer endringene du gjør i et Photoshop-dokument, slik at du kan gjenta disse trinnene med et klikk på en knapp, og eliminere repeterende oppgaver. Så med en mockup kan du bruke en handling til å registrere alle transformasjonene og effektene du bruker på et design for å få det til å matche et bilde, og bruke de samme endringene på et annet design i fremtiden bare ved å klikke på en knapp.
Nødvendige verktøy
- Fotografi og/eller fotoutstyr
- Programvare for bilderedigering (Photoshop, Serif Photo, Gimp)
- *Valgfri* 3D-produktmodelleringsprogramvare
utgifter
- moderat
Pros
- Gjentatt bruk gjør det verdt innsatsen å lage tilpassede oppsett.
- Kildebilder; ingen vannmerker eller behov for å kjøpe lisenser
Cons
- Krever mer avansert programvarekunnskap
- Det kan være bortkastet innsats hvis resultatene ikke er forskjellige nok fra en tredjeparts mal.
3. Bruk en mockup generator nettside.
-
Et mockup-generatornettsted er en nettbasert tjeneste som bruker arkivbilder og AI-programvare for automatisk å generere en mockup fra en tredjepartsmal. Vanligvis er alt en designer trenger å gjøre å laste opp designet og programvaren vil ta seg av alle tekniske problemer.
Skjermbilde av Placeit design mockup generator hjemmeside
Denne metoden er den desidert billigste og enkleste løsningen, men den har noen ulemper. Det resulterende oppsettet vil være uoriginalt, og gitt at mange designere har brukt den samme tjenesten, er det ikke uvanlig å se de samme layoutbildene dukke opp i en dårlig situasjon over hele porteføljenettsteder. Samtidig kan det være nyttig i en klemme, og med mindre klienten er en designer mockup-leverandør, vil de sannsynligvis ikke ha noe imot det.
Når du velger en tjeneste, bør du vurdere følgende: pris, kvalitet og relevans. Prismessig er mange mockup-generatorer gratis å bruke, selv om du bør være på vakt mot skjulte ulemper som å legge til vannmerker eller et begrenset utvalg av maler. Ellers er prisen vanligvis basert på abonnementsmodeller, og de fleste av tjenestene jeg har anmeldt er i intervallet $10 til $20 per måned.
Utarbeiding av standard layout for bedriftsdesign
Kvalitet kan komme ned til personlig smak, men du bør bruke litt tid på å studere layoutene andre designere og konkurrenter bruker for å få en følelse av hva som er smart og hva som er generisk. Du kan også bruke tjenester som Trustpilot for å finne brukeranmeldelser som forteller deg, utover reklamemateriellet, hvor godt tjenesten fungerer og hva de faktiske resultatene er.
Skjermbilde av hjemmesiden for Artboard Studio design mockup generator
Skjermbilde av Smartmockups design mockup generator hjemmeside
Til slutt, noen av disse sidene spesialiserer seg på visse typer oppsett, og du må velge en som vil være relevant for prosjektene dine, spesielt hvis du kjøper et abonnement. For eksempel spesialiserer Artboard Studio og Mockup Mark seg på trykk og layout klær. Tjenester som AppMockUp og Mockuuups Studio spesialiserer seg på digitale designmodeller. I mellomtiden tilbyr Smartmockups, renderforest og Placeit vanlige mockup-maler for både trykte og digitale.
Nødvendige verktøy
- Pålitelig Internett-tilkobling
- *Valgfritt* Medlemskap for nettstedoppsett
utgifter
- Fra gratis til lav
Pros
- Raskt og uanstrengt; ingen programvarekunnskap kreves
- Kvalitet kan noen ganger være nær tilpasset layout
Cons
- Skaper et felles utseende med bilder som mange design bruker på nettet.
- Abonnementsmodellen er bare nyttig hvis flere oppsett er nødvendig.
4. Bruk en programvareplugin for å lage oppsett.
-
Mockup-plugins er tredjepartsintegrasjoner som kobles til designprogramvare for å lage mockups. I hovedsak lar disse applikasjonene designere designe og lage layouter innenfor et enkelt program, med den ekstra fordelen at designeren kan bruke programmets verktøy til å gjøre endringer i layouten etter at den er opprettet.
Skjermbilde av Mokup Frames design plugin hjemmeside
Det er det beste fra to verdener: en rimelig, lavinnsats, tilpassbar mal. Med det sagt er denne metoden generelt ment for digital design, og de fleste plugins er rettet mot applikasjonsprototyping-programvare som f.eks. Skisse , figma og Adobe XD.
Skjermbilde av hjemmesiden for plugin-modulen for vinkeldesign
Det er flere populære tjenester som tilbyr nedlastbare plugins, inkludert Vinkel , Rotato и Mokup rammer . Fordi denne programvaren er nedlastbar, krever den vanligvis en engangsbetaling. Denne prisen er vanligvis høyere enn de fleste mockup-generatorsider, men den er lavere i det lange løp siden du ikke betaler abonnementsavgift.
Du må følge stedspesifikke instruksjoner for å laste ned og installere plugin-en i programvaren. Derfra har du muligheten til å bruke designet fra programvaren til layouten. Prosessen ligner på å bruke et nettsted med en mockup-generator: plugin-modulen vil automatisk lage mockupen din, og du vil bruke tilpasningsverktøyene til å avgrense den.
Nødvendige verktøy
- Designprogramvare (Sketch, Figma, Adobe XD)
- Last ned lisens og plugin
utgifter
- lav
Pros
- Raskt og uanstrengt; Lite programvarekunnskap kreves
- Mockups lages i designprogramvare som en del av designprosessen.
Cons
- Skaper et felles utseende med bilder som mange design bruker på nettet.
- Resultatene er ikke mye forskjellig fra online mockup-generatorer
Det er på tide å lage unike mockups!
-
Designmockups er utrolig kraftige presentasjonsverktøy som ikke bare selger en designidé, men også gir seeren et vindu inn i en fremtid der designet allerede eksisterer. Når det gjøres godt, vil klienten nesten bli tvunget til å gjøre denne fremtiden til en realitet.
Som nevnt i denne artikkelen er det mange metoder for å lage mockups, og hver av dem har sin egen fordeler og ulemper. Men uansett hvordan du lager layoutene dine, vil resultatene til syvende og sist avhenge av designeren og hans forpliktelse til realistisk å gjengi en layout som hopper av skjermen.
