Mock-ups

Mockups zijn creatieve, vaak fotorealistische presentaties die laten zien hoe een ontwerp er in de echte wereld uit zou kunnen zien of zou kunnen functioneren. Met andere woorden, het implementeren van een van deze vier professionele mockup-technieken biedt een kijkje in de toekomst: een logo-ontwerp gedrukt op een tas die wordt gedragen door casual shoppers, een app die wordt gescrolld door een onzichtbare hand, of zelfs een winkelpui met een volledig merklogo. Maak het overtuigend, je moet weten hoe je professionele lay-outs maakt. Hier vertellen wij u hoe u dit kunt doen.

Hoewel ze uit afbeeldingen bestaan, zijn ontwerplay-outs het meest effectief als ze een verhaal vertellen. De zorg en details die in het verhaal worden gestopt, zullen bepalen of het publiek ervan zal genieten of het in slaap zal brengen.

Er zijn twee elementen die een lay-outtechniek succesvol maken: creatieve scènesetting en realistische integratie van het ontwerp. We hebben eerder een vorig onderwerp behandeld met tips die zich richtten op het formuleren van een lay-outconcept en het kiezen van de juiste afbeeldingen om een ​​verhaal te vertellen. In dit artikel schetsen we kort de technische aspecten van het maken van een mockup van je ontwerp met behulp van de 4 meest voorkomende mockup-methoden.

Lay-out van het boek. Vereisten voor boekontwerp.

1. Creëer uw eigen lay-out vanaf het begin. Mock-ups
-

Een maatwerk lay-out is een lay-out die volledig is aangepast aan een specifiek ontwerp. Als u unieke mockups wilt maken, raden wij u deze techniek aan beste resultaten. Aangezien het doel van een mockup presentatie en uiteindelijk overtuiging is (dat wil zeggen het verkopen van een ontwerpconcept), spreekt het voor zich dat de meest overtuigende mockup er een is die is ontworpen voor een specifieke klant.

Maar het is natuurlijk niet de meest praktische aanpak om voor elk project een geheel nieuwe mockup te maken. Dit vergt veel inspanning voor iets dat in wezen een eenmalige presentatie is bezit. Dit is ook alleen nuttig als het lay-outconcept zeer origineel is; het heeft geen zin om met al deze problemen te rommelen als het resultaat niet te onderscheiden is van de sjabloon. Uiteindelijk is het aan jou om te beslissen of je gepassioneerd genoeg bent over het project of de klant om een ​​stap verder te gaan om een ​​unieke mockup te creëren.

Voor een echt op maat gemaakte lay-out heb je originele foto's nodig. Hierdoor kunt u een scène-indeling creëren die veel dichter bij uw ontwerpvisie ligt, terwijl stockfoto's van nature zijn ontworpen voor algemene instellingen en scènes. Als u over de apparatuur, ervaring en tijd beschikt, kunt u uw eigen foto's maken. In dit geval moet je van tevoren brainstormen of de scène schetsen, net zoals je een storyboard voor een film zou maken.

Wat is verkoopmarge? en hoe u dit kunt berekenen

Je zou ook een professionele fotograaf kunnen inhuren, maar dit is natuurlijk een kostenpost die niet voor elke ontwerper praktisch zal zijn - dit is waarschijnlijker bij een ontwerpbureau dat samenwerkt met zakelijke klanten. Een goed alternatief is om foto's te gebruiken die van de klant zijn: ontwerper Top Level goopanic past bijvoorbeeld zijn Academia de Artes-branding toe op echte foto's van de school en haar leerlingen. Ook al zijn deze foto's niet zo Hoge kwaliteitAls professionele stockfoto's geven ze de klant een authentieker beeld van hoe hun ontwerp er uiteindelijk uit zal zien.

Zodra u uw foto's heeft, moet u fotobewerkingssoftware gebruiken om uw ontwerp in de afbeelding te verwerken. De meest gebruikelijke software hiervoor is Adobe Photoshop, maar Affinity Photo en Gimp zijn betrouwbare alternatieven. Deze programma's bieden veel hulpmiddelen en handleidingen om realistische resultaten te bereiken, en komen in essentie op het volgende neer:

• transformatietools om het ontwerp bij het beeld te laten passen
• overvloeimodi om textuur uit de originele foto op te nemen
• aanpassingslagen voor het werken met verlichting, kleur en contrast

 

Als je met aangepaste animaties wilt werken, gebruik dan animatiesoftware zoals After Effects: je kunt bijvoorbeeld laagmaskers gebruiken om scrollende animaties voor apps op een telefoonfoto te maken.

Vereiste hulpmiddelen

• Fotografie en/of fotoapparatuur
• Software voor fotobewerking (Photoshop, Serif-foto, Gimp)
• *Optioneel* Animatiesoftware (Adobe After Effects)

Расходы

• Matig tot hoog

Voors

• Het resultaat zijn mockups die specifieker zijn en trouw aan de visie van de ontwerper.
• Bronafbeeldingen; geen watermerken of noodzaak om licenties te kopen

Tegens

• Duur en vergt veel inspanning; vereist een diepere softwarekennis
• Ineffectief en tijdrovend
  Kantoordrukwerk voor bedrijven van drukkerij Azbuka.

2. Maak herbruikbare lay-outsjablonen. Mock-ups.
-

Aangepaste lay-outsjablonen zijn lay-outs die ontwerpers zelf maken, maar die generiek genoeg zijn om in meerdere projecten te worden gebruikt. Zoals we in het vorige gedeelte hebben aangegeven, kan het maken van aangepaste mockups voor elk project onpraktisch en duur zijn, maar deze methode stelt de ontwerper in staat mockups te maken die zowel origineel als herbruikbaar zijn tegen lagere kosten.

Dit is ook een manier voor de ontwerper om zijn eigen toe te voegen persoonlijk merk of repetitieve stijl in uw presentaties aan klanten.

Het proces voor het maken van mockup-sjablonen is in wezen hetzelfde als het maken van aangepaste mockups: u moet nog steeds een foto kopen en een fotobewerkingsprogramma gebruiken om het ontwerp te verwerken. Eén verschil is de aanpak bij het fotograferen van uw lay-out: deze moet vaag genoeg zijn om voor meerdere klanten te kunnen werken. In plaats van een identificerend landschap te gebruiken, richten de lay-outachtergronden van topontwerper Daria V. zich bijvoorbeeld op geïllustreerde accenten die kunnen worden gewijzigd bij elk project.

Dit kan helpen om klanten te groeperen op basis van gemeenschappelijke thema's, zoals de industrie (u zou één lay-outsjabloon kunnen hebben voor al uw restauranteigenaren, één voor al uw particuliere klanten, enz.). Dit maakt het gemakkelijker om afbeeldingen te selecteren die in algemene contexten werken.

Boeklay-outgeneratoren: 5 GRATIS tools

Voor fysieke producten maken sommige ontwerpers blanco weergaven van het product met behulp van 3D-software zoals Adobe Dimension, en dit heeft als bijkomend voordeel dat het de creatie van draaibare, geanimeerde lay-outs mogelijk maakt.

Om uw sjabloonlay-out in Photoshop te maken, is uw doel in principe om het document zo in te stellen dat het ontwerp gemakkelijk kan worden vervangen in toekomstige projecten, terwijl al uw instellingen behouden blijven. manipulatie. Photoshop biedt hiervoor twee handige hulpmiddelen:

Slimme Photoshop-objecten. Mock-ups.

Een slim object is in wezen een container waarin een afbeelding in een gekoppeld document wordt opgeslagen, zodat u binnen uw grotere compositie drastische wijzigingen kunt aanbrengen zonder de originele afbeelding te beïnvloeden. Als u een afbeelding in een slim object vervangt, wordt deze in de compositie bijgewerkt en worden al uw wijzigingen erop toegepast.

Bij mockups hoeft u dus alleen maar de ontwerplaag aan het begin van het project naar een slim object te converteren (ga naar Laag > Slimme objecten > Converteren naar slim object). Daarna kunt u eenvoudig het ontwerp in het slimme object vervangen de volgende keer dat u een lay-out nodig heeft.

Photoshop-acties. Mock-ups.

Acties registreren de wijzigingen die u in een Photoshop-document aanbrengt, zodat u deze stappen met één klik op de knop kunt herhalen, waardoor repetitieve taken worden geëlimineerd. Met een mockup kunt u dus een actie gebruiken om alle transformaties en effecten die u op een ontwerp toepast vast te leggen, zodat het overeenkomt met een foto, en diezelfde wijzigingen in de toekomst ook op een ander ontwerp toepassen door op een knop te klikken.

Vereiste hulpmiddelen

• Fotografie en/of fotoapparatuur
• Fotobewerkingssoftware (Photoshop, Serif Photo, Gimp)
• *Optioneel* 3D-productmodelleringssoftware

Расходы

• gematigde

Voors

• Herhaald gebruik maakt het de moeite waard om aangepaste lay-outs te maken.
• Bronafbeeldingen; geen watermerken of noodzaak om licenties te kopen

Tegens

• Vereist meer geavanceerde softwarekennis
• Het kan tijdverspilling zijn als de resultaten niet genoeg verschillen van die van een derde partij.

3. Gebruik een mockup-generatorwebsite.
-

Een mockupgeneratorwebsite is een online service die stockfoto's en AI-software gebruikt om automatisch een mockup te genereren op basis van een sjabloon van derden. Normaal gesproken hoeft een ontwerper alleen maar zijn ontwerp te uploaden en de software zorgt voor alle technische problemen.

Deze methode is veruit de goedkoopste en gemakkelijkste oplossing, maar kent wel enkele nadelen. De resulterende lay-out zal niet origineel zijn, en aangezien veel ontwerpers dezelfde service hebben gebruikt, is het niet ongebruikelijk dat dezelfde lay-outafbeeldingen ad nauseum overal op portfoliosites verschijnen. Tegelijkertijd kan het handig zijn in geval van nood, en tenzij de klant een aanbieder van mockups voor ontwerpers is, zal hij dit waarschijnlijk niet erg vinden.

Bij het kiezen van een dienst moet u rekening houden met het volgende: prijs, kwaliteit en relevantie. Qua prijs zijn veel mockupgeneratoren gratis te gebruiken, al moet je op je hoede zijn voor verborgen ongemakken zoals het toevoegen van watermerken of een beperkte selectie aan sjablonen. Anders is de prijs meestal gebaseerd op abonnementsmodellen, en de meeste services die ik heb beoordeeld, liggen tussen de $ 10 en $ 20 per maand.

Kwaliteit kan een kwestie zijn van persoonlijke smaak, maar u moet wat tijd besteden aan het bestuderen van de lay-outs die andere ontwerpers en concurrenten gebruiken om een ​​idee te krijgen van wat slim en wat generiek is. U kunt ook diensten als Trustpilot gebruiken om gebruikersrecensies te vinden die u, naast het promotiemateriaal, vertellen hoe goed de dienst werkt en wat de daadwerkelijke resultaten zijn.

Schermafbeelding van de startpagina van de Smartmockups-ontwerpmockupgenerator

Ten slotte zijn sommige van deze sites gespecialiseerd in bepaalde soorten lay-outs, en u zult er een moeten kiezen die relevant is voor uw projecten, vooral als u een abonnement aanschaft. Artboard Studio en Mockup Mark zijn bijvoorbeeld gespecialiseerd in drukwerk en lay-outs kleren. Diensten zoals AppMockUp en Mockuuups Studio zijn gespecialiseerd in digitale ontwerpmodellen. Ondertussen bieden Smartmockups, renderforest en Placeit algemene mockup-sjablonen voor zowel print als digitaal.

Vereiste hulpmiddelen

• Betrouwbare internetverbinding
• *Optioneel* Lidmaatschap van site-indeling

Расходы

• Van gratis naar laag

Voors

• Snel en moeiteloos; geen softwarekennis vereist
• Kwaliteit kan soms dicht bij een aangepaste lay-out liggen

Tegens

• Creëert een gemeenschappelijke look met afbeeldingen die veel ontwerpen online gebruiken.
• Het abonnementsmodel is alleen nuttig als er meerdere lay-outs nodig zijn.

4. Gebruik een softwareplug-in om lay-outs te maken.
-

Mockup-plug-ins zijn integraties van derden die verbinding maken met ontwerpsoftware om mockups te maken. In wezen stellen deze toepassingen ontwerpers in staat lay-outs te ontwerpen en te maken binnen één enkel programma, met als bijkomend voordeel dat de ontwerper de tools van het programma kan gebruiken om wijzigingen aan te brengen in de lay-out nadat deze is gemaakt.

Het is het beste van twee werelden: een goedkope, eenvoudige, aanpasbare sjabloon. Dat gezegd hebbende, is deze methode over het algemeen bedoeld voor digitaal ontwerp, en de meeste plug-ins zijn gericht op software voor het maken van prototypen van applicaties, zoals Schets , Figma и Adobe XD .

Er zijn verschillende populaire services die downloadbare plug-ins bieden, waaronder Hoek , Rotatie и Mokup-frames . Omdat deze software downloadbaar is, is er meestal een eenmalige betaling vereist. Deze prijs is meestal hoger dan bij de meeste mockup-generatorsites, maar op de lange termijn is deze lager omdat u geen abonnementskosten betaalt.

U moet sitespecifieke instructies volgen om de plug-in te downloaden en in uw software te installeren. Van daaruit heeft u de mogelijkheid om het ontwerp uit uw software op de lay-out toe te passen. Het proces is vergelijkbaar met het gebruik van een website met een mockupgenerator: de plug-in maakt automatisch uw mockup en u gebruikt de aanpassingstools om deze te verfijnen.

Vereiste hulpmiddelen

• Ontwerpsoftware (Sketch, Figma, Adobe XD)
• Licentie en plug-in downloaden

Расходы

• laag

Voors

• Snel en moeiteloos; Weinig softwarekennis vereist
• Mockups worden gemaakt in ontwerpsoftware als onderdeel van het ontwerpproces.

Tegens

• Creëert een gemeenschappelijke look met afbeeldingen die veel ontwerpen online gebruiken.
• De resultaten verschillen niet veel van die van online mockupgeneratoren

Het is tijd om unieke mockups te maken!
-

Ontwerpmockups zijn ongelooflijk krachtige presentatietools die niet alleen een ontwerpidee verkopen, maar de kijker ook een venster geven op een toekomst waarin dat ontwerp al bestaat. Als het goed wordt gedaan, wordt de klant bijna gedwongen deze toekomst werkelijkheid te maken.

Zoals vermeld in dit artikel, zijn er veel methoden voor het maken van mockups, en elk ervan heeft zijn eigen methoden voor- en nadelen. Maar hoe u uw lay-outs ook maakt, de resultaten zullen uiteindelijk afhangen van de ontwerper en zijn inzet om een ​​lay-out realistisch weer te geven die van het scherm springt.

 АЗБУКА

Hoe u projecten succesvol kunt beheren in een online bedrijf