Mockups binne kreatyf, faak fotorealistyske presintaasjes dy't sjen litte hoe't in ûntwerp der útsjen kin of funksjonearje yn 'e echte wrâld. Mei oare wurden, it ymplementearjen fan ien fan dizze 4 profesjonele mockup-techniken jout in blik yn 'e takomst: in logo-ûntwerp printe op in tas droegen troch casual shoppers, in app scrolled troch in ûnsichtbere hân, of sels in folslein merk winkelfront. Meitsje it oertsjûgjend, jo moatte witte hoe't jo profesjonele yndielingen meitsje. Hjir sille wy jo fertelle hoe't jo dit dwaan.

Hoewol't se binne opboud út ôfbyldings, design layouts binne meast effektyf as se fertelle in ferhaal. De soarch en detail dy't yn it ferhaal set wurdt, sille bepale oft it publyk der fan genietsje sil of it yn 'e sliep bringt.

D'r binne twa eleminten dy't meitsje in layout technyk suksesfol: kreative sêne ynstelling en realistyske opname fan it ûntwerp. Wy hawwe earder in earder ûnderwerp behannele mei tips dy't rjochte binne op it formulearjen fan in layoutkonsept en it kiezen fan de juste ôfbyldings om in ferhaal te fertellen. Yn dit artikel sille wy de technyske aspekten koart sketse fan it meitsjen fan in mockup fan jo ûntwerp mei de 4 meast foarkommende mockupmetoaden.

Opmaak fan it boek. Easken foar boekûntwerp.

1. Meitsje jo eigen yndieling fanôf it begjin. Mockups
-

In oanpaste yndieling is in yndieling dy't folslein oanpast is oan in spesifyk ûntwerp. As jo ​​unike mockups wolle meitsje, riede wy dizze technyk oan om te berikken bêste resultaten. Sjoen dat it doel fan in mockup presintaasje en úteinlik oertsjûging is (dat wol sizze it ferkeapjen fan in ûntwerpkonsept), seit it fansels dat de meast oertsjûgjende mockup ien is dy't ûntwurpen is foar in spesifike klant.

Drankmerk logo ûntwerp en yndieling.

Drankmerk logo ûntwerp en yndieling

 

Mar fansels, it meitsjen fan mockups fanôf it begjin foar elk projekt is net de meast praktyske oanpak. Dit freget in protte muoite foar eat dat yn wêzen in ienmalige presintaasje is asset. Dit is ek allinich nuttich as it opmaakkonsept heul orizjineel is - it hat gjin punt om mei al dizze problemen te rommeljen as it resultaat net te ûnderskieden is fan it sjabloan. Uteinlik is it oan jo om te besluten oft jo entûsjast genôch binne oer it projekt of de klant om de ekstra myl te gean om in unike mockup te meitsjen.

Logo-ûntwerp en layoutpresintaasje foar in technologymerk.

Logo-ûntwerp en layoutpresintaasje foar in technologymerk

Foar in wirklik oanpaste yndieling hawwe jo orizjinele foto's nedich. Hjirmei kinne jo in sêne-yndieling meitsje dy't folle tichter by jo ûntwerpfisy is, wylst stockfoto's troch har aard binne ûntworpen foar algemiene ynstellings en sênes. As jo ​​​​de apparatuer, ûnderfining en tiid hawwe, kinne jo jo eigen foto's nimme. Yn dit gefal moatte jo it toaniel fan tefoaren brainstoarmje of sketsje, fergelykber mei hoe't jo in film kinne storyboard.

Wat is ferkeapmarge? en hoe te berekkenjen it

Jo kinne ek in profesjonele fotograaf hiere, mar dit is fansels in útjefte dy't net praktysk sil wêze foar elke ûntwerper - dit is wierskynliker yn it ryk fan in ûntwerpburo dat wurket mei bedriuwskliïnten. In geweldich alternatyf is om foto's te brûken dy't by de klant hearre: ûntwerper Top Level goopanic past bygelyks syn Academia de Artes-branding oan op echte foto's fan 'e skoalle en har learlingen. Sels as dizze foto's net sa binne Hege kwaliteitAs profesjonele stockfoto's sille se de klant in mear autentyk idee jaan fan hoe't har ûntwerp úteinlik sil útsjen.

Sadree't jo jo foto's hawwe, moatte jo foto-bewurkingssoftware brûke om jo ûntwerp yn 'e ôfbylding op te nimmen. De meast foarkommende software foar dit doel is Adobe Photoshop, mar Affinity Photo en Gimp binne betroubere alternativen. Dizze programma's leverje in protte ark en hantliedingen om realistyske resultaten te berikken, en se komme yn prinsipe del op it folgjende:

  • transformaasje-ark om it ûntwerp oerien te meitsjen mei de ôfbylding
  • mingmodi om tekstuer op te nimmen fan 'e orizjinele foto
  • oanpassing lagen foar wurkjen mei ferljochting, kleur en kontrast

 

As jo ​​wolle wurkje mei oanpaste animaasjes, brûk dan animaasje software lykas After Effects: bygelyks, kinne jo gebrûk meitsje fan laach maskers te meitsjen scrolling animaasjes foar apps op in telefoan foto.

Fergese Tools

  • Fotografy en/of fotografyske apparatuer
  • Software foar foto editing (Photoshop, Serif Photo, Gimp)
  • * Opsjoneel * Animaasjesoftware (Adobe After Effects)

Kosten

  • Matich oant heech

Плюсы

  • It resultaat is mockups dy't mear spesifyk en wier binne oan 'e fyzje fan' e ûntwerper.
  • Boarne ôfbyldings; gjin wettermerken of moatte lisinsjes keapje

Минусы

2. Meitsje werbrûkbere layout sjabloanen. Mockups.
-

Oanpaste layoutsjabloanen binne opmaak dy't ûntwerpers sels meitsje, mar binne generyk genôch om te brûken oer meardere projekten. Lykas wy yn 'e lêste seksje oanjûn, kin it meitsjen fan oanpaste mockups foar elk projekt ûnpraktysk en djoer wêze, mar dizze metoade lit de ûntwerper mockups meitsje dy't sawol orizjineel as werbrûkber binne tsjin in legere kosten.

Dit is ek in manier foar de ûntwerper om syn eigen ta te foegjen persoanlike merk of repetitive styl yn jo presintaasjes oan kliïnten.

App-ûntwerpmockup mei in man yn in kafee mei in iPhone. Mockups

App-ûntwerpmockup mei in man yn in kafee mei in iPhone

 

It proses foar it meitsjen fan mockup-sjabloanen is yn essinsje itselde as it meitsjen fan oanpaste mockups: jo moatte noch in foto keapje en in foto-bewurkingsprogramma brûke om it ûntwerp op te nimmen. Ien ferskil is de oanpak foar it fotografearjen fan jo yndieling: it moat vague genôch wêze om foar meardere kliïnten te wurkjen - bygelyks ynstee fan in identifisearjend lânskip te brûken, rjochtsje de opmaakeftergrûnen fan top-tier ûntwerper Daria V. op yllustrearre aksinten dy't kinne wurde feroare mei elk projekt.

Yllustrearre produktferpakking mockup-ûntwerp. Mockups

Yllustrearre produktferpakking mockup-ûntwerp

Yllustrearre produktferpakking mockup-ûntwerp. Mockups

Yllustrearre produktferpakking mockup-ûntwerp

Dit kin helpe om kliïnten te groepearjen op basis fan mienskiplike tema's, lykas yndustry (jo kinne ien layoutsjabloan hawwe foar al jo kliïnten dy't in restaurant hawwe, ien foar al jo retailkliïnten, ensfh.). Dit makket it makliker om ôfbyldings te selektearjen dy't sille wurkje yn mienskiplike konteksten.

Book Layout Generators: 5 FREE ark

Foar fysike produkten meitsje guon ûntwerpers lege renderings fan it produkt mei 3D-software lykas Adobe Dimension, en dit hat it ekstra foardiel fan it meitsjen fan draaibere, animearre layouts.

Om jo sjabloanlayout yn Photoshop te meitsjen, is jo doel yn prinsipe it dokumint yn te stellen sadat it ûntwerp maklik kin wurde ferfongen yn takomstige projekten, wylst jo al jo manipulaasje. Photoshop biedt twa foar dit brûkbere ark:

Photoshop Smart Objects. Mockups.

In tûk objekt is yn wêzen in kontener dy't in ôfbylding opslacht yn in keppele dokumint, wêrtroch jo drastyske feroaringen kinne meitsje yn jo gruttere komposysje sûnder de orizjinele ôfbylding te beynfloedzjen. As jo ​​in ôfbylding ferfange yn in tûk foarwerp, sil it bywurkje yn 'e komposysje mei al jo wizigingen dy't derop tapast binne.

Dat, mei mockups, alles wat jo hoege te dwaan is de ûntwerplaach te konvertearjen nei in tûk objekt oan it begjin fan it projekt (gean nei Laach> Smart Objects> Convert to Smart Object). Dêrnei kinne jo it ûntwerp gewoan ferfange binnen it tûke objekt de folgjende kear as jo in yndieling nedich binne.

Photoshop aksjes. Mockups.

Aksjes registrearje de wizigingen dy't jo meitsje oan in Photoshop-dokumint, sadat jo dizze stappen kinne werhelje mei de klik op in knop, en eliminearje repetitive taken. Dat mei in mockup kinne jo in aksje brûke om alle transformaasjes en effekten op te nimmen dy't jo tapasse op in ûntwerp om it oerien te meitsjen mei in foto, en deselde wizigingen tapasse op in oar ûntwerp yn 'e takomst troch gewoan op in knop te klikken.

Fergese Tools

  • Fotografy en/of fotografyske apparatuer
  • Fotobewurkingssoftware (Photoshop, Serif Photo, Gimp)
  • * Opsjoneel * Software foar 3D-produktmodellering

Kosten

  • Moderatyf

Плюсы

  • Werhelle gebrûk makket it de muoite wurdich om oanpaste layouts te meitsjen.
  • Boarne ôfbyldings; gjin wettermerken of moatte lisinsjes keapje

Минусы

  • Fereasket mear avansearre software kennis
  • It kin wêze fergriemerij as de resultaten binne net oars genôch fan in tredde-partij sjabloan.

3. Brûk in mockup generator webside.
-

In webside foar mockupgenerator is in online tsjinst dy't stockôfbyldings en AI-software brûkt om automatysk in mockup te generearjen fan in sjabloan fan tredden. Typysk is alles wat in ûntwerper hoecht te dwaan har ûntwerp upload en de software sil soargje foar alle technyske problemen.

Skermôfbylding fan 'e thússide fan Placeit design mockup generator. Mockups

Skermôfbylding fan 'e homepage fan Placeit design mockup generator

Dizze metoade is fierwei de goedkeapste en maklikste oplossing, mar it hat wol wat neidielen. De resultearjende yndieling sil unorizjineel wêze, en jûn dat in protte ûntwerpers deselde tsjinst hawwe brûkt, is it net ûngewoan om deselde opmaakôfbyldings te sjen dy't ad nauseum oeral op portfoliosites ferskine. Tagelyk kin it nuttich wêze yn in knipe, en útsein as de kliïnt in ûntwerper mockup-oanbieder is, sille se it wierskynlik net skele.

By it kiezen fan in tsjinst moatte jo it folgjende beskôgje: priis, kwaliteit en relevânsje. Yn termen fan priis binne in protte mockup-generators fergees te brûken, hoewol jo moatte warskôgje foar ferburgen ûngemak lykas it tafoegjen fan wettermerken of in beheinde seleksje fan sjabloanen. Oars de priis is meastal basearre op abonnemint modellen, en de measte tsjinsten dy't ik haw hifke binne yn 'e $10 oant $20 per moanne berik.

It opstellen fan standert layouts foar bedriuwsûntwerp. Mockups

It opstellen fan standert layouts foar bedriuwsûntwerp

Kwaliteit kin delkomme op persoanlike smaak, mar jo moatte wat tiid besteegje oan it bestudearjen fan de yndielingen dy't oare ûntwerpers en konkurrinten brûke om in gefoel te krijen foar wat tûk is en wat generyk is. Jo kinne ek tsjinsten lykas Trustpilot brûke om brûkersbeoardielingen te finen dy't jo, bûten it promoasjemateriaal, fertelle hoe goed de tsjinst wurket en wat de werklike resultaten binne.

Skermôfbylding fan 'e thússide fan Artboard Studio design mockupgenerator. Mockups

Skermôfbylding fan 'e thússide fan Artboard Studio design mockupgenerator

Skermôfbylding fan de thússide fan 'e Smartmockups-ûntwerp mockupgenerator

Skermôfbylding fan de thússide fan 'e Smartmockups-ûntwerp mockupgenerator

Uteinlik binne guon fan dizze siden spesjalisearre yn bepaalde soarten layouts, en jo moatte ien kieze dy't relevant is foar jo projekten, benammen as jo in abonnemint keapje. Bygelyks, Artboard Studio en Mockup Mark spesjalisearje yn printsjen en opmaak klean. Tsjinsten lykas AppMockUp en Mockuuups Studio spesjalisearje yn digitale ûntwerpmockups. Underwilens biede Smartmockups, renderforest en Placeit mienskiplike mockup-sjabloanen foar sawol print as digitaal.

Fergese Tools

  • Betroubere ynternetferbining
  • * Opsjoneel * Lidmaatskip fan side-yndieling

Kosten

  • Fan frij oant leech

Плюсы

  • Fluch en sûnder muoite; gjin software kennis nedich
  • Kwaliteit kin soms tichtby oanpaste yndieling wêze

Минусы

  • Makket in mienskiplike útstrieling mei ôfbyldings dy't in protte ûntwerpen online brûke.
  • It abonnemintsmodel is allinich nuttich as meardere yndielingen nedich binne.

4. Brûk in software plugin foar it meitsjen fan layouts.
-

Mockup-plugins binne yntegraasjes fan tredden dy't ferbine mei ûntwerpsoftware om mockups te meitsjen. Yn essinsje kinne dizze tapassingen ûntwerpers tastean om yndielingen te ûntwerpen en te meitsjen binnen ien programma, mei it tafoege foardiel dat de ûntwerper de ark fan it programma kin brûke om wizigingen oan te meitsjen oan 'e yndieling nei't it is makke.

Skermôfbylding fan de thússide fan 'e Mokup Frames-ûntwerpplugin

Skermôfbylding fan de thússide fan 'e Mokup Frames-ûntwerpplugin

It is it bêste fan beide wrâlden: in goedkeap, leech ynspannings, oanpasber sjabloan. Mei dat sein, dizze metoade is oer it algemien bedoeld foar digitaal ûntwerp, en de measte plugins binne rjochte op applikaasje prototyping software lykas Skets , figma и Adobe XD .

Skermôfbylding fan de thússide fan 'e hoeke-ûntwerp-yndieling plugin

Skermôfbylding fan de thússide fan 'e hoeke-ûntwerp-yndieling plugin

D'r binne ferskate populêre tsjinsten dy't ynlaadbere plugins leverje, ynklusyf Hoeke , Rotato и Mokup Frames . Om't dizze software te downloaden is, fereasket it normaal in ienmalige betelling. Dizze priis is meastal heger as de measte mockup generator sites, mar it is leger op 'e lange doer sûnt jo betelje gjin abonnemintskosten.

Jo moatte side-spesifike ynstruksjes folgje om de plugin yn jo software te downloaden en te ynstallearjen. Fan dêrút hawwe jo de opsje om it ûntwerp fan jo software ta te passen op de yndieling. It proses is fergelykber mei it brûken fan in webside mei in mockup-generator: de plugin sil jo mockup automatysk oanmeitsje en jo sille de oanpassingsark brûke om it te ferfine.

Fergese Tools

  • Designsoftware (Sketch, Figma, Adobe XD)
  • Lisinsje en plugin download

Kosten

  • Leech

Плюсы

  • Fluch en sûnder muoite; Lytse software kennis nedich
  • Mockups wurde makke yn ûntwerpsoftware as ûnderdiel fan it ûntwerpproses.

Минусы

  • Makket in mienskiplike útstrieling mei ôfbyldings dy't in protte ûntwerpen online brûke.
  • De resultaten binne net folle oars as online mockup-generators

It is tiid om unike mockups te meitsjen!
-

Untwerpmockups binne ongelooflijk krêftige presintaasje-ark dy't net allinich in ûntwerpidee ferkeapje, mar de sjogger ek in finster jouwe yn in takomst wêr't dat ûntwerp al bestiet. As it goed dien wurdt, sil de klant hast twongen wurde om dizze takomst in werklikheid te meitsjen.

Lykas sein yn dit artikel, der binne in protte metoaden foar it meitsjen fan mockups, en elk fan harren hat syn eigen Foardielen en neidielen. Mar nettsjinsteande hoe't jo jo layouts meitsje, de resultaten sille úteinlik ôfhingje fan 'e ûntwerper en syn ynset foar it realistysk werjaan fan in yndieling dy't fan it skerm springt.

 АЗБУКА

Hoe kinne jo projekten mei súkses beheare yn in online bedriuw