Modelle

Mockups sind kreative, oft fotorealistische Präsentationen, die zeigen, wie ein Design in der realen Welt aussehen oder funktionieren könnte. Mit anderen Worten: Die Implementierung einer dieser vier professionellen Mockup-Techniken bietet einen Blick in die Zukunft: ein Logo-Design, das auf eine Tasche gedruckt wird, die Gelegenheitskäufer tragen, eine App, die von einer unsichtbaren Hand gescrollt wird, oder sogar eine vollständig gebrandete Ladenfront. Um es überzeugend zu machen, müssen Sie wissen, wie man professionelle Layouts erstellt. Hier verraten wir Ihnen, wie das geht.

Obwohl sie aus Bildern bestehen, sind Design-Layouts dann am wirkungsvollsten, wenn sie eine Geschichte erzählen. Die Sorgfalt und die Details, die in die Geschichte gesteckt werden, entscheiden darüber, ob das Publikum sie genießt oder einschläfert.

Es gibt zwei Elemente, die eine Layouttechnik erfolgreich machen: kreative Szenengestaltung und realistische Einbeziehung des Designs. Zuvor haben wir ein früheres Thema mit Tipps behandelt, die sich auf die Formulierung eines Layoutkonzepts und die Auswahl der richtigen Bilder zum Erzählen einer Geschichte konzentrierten. In diesem Artikel erläutern wir kurz die technischen Aspekte der Erstellung eines Mockups Ihres Designs mithilfe der vier gängigsten Mockup-Methoden.

Layout des Buches. Anforderungen an die Buchgestaltung.

1. Erstellen Sie Ihr eigenes Layout von Grund auf. Modelle
-

Ein benutzerdefiniertes Layout ist ein Layout, das vollständig an ein bestimmtes Design angepasst ist. Wenn Sie einzigartige Mockups erstellen möchten, empfehlen wir Ihnen diese Technik Beste Ergebnisse. Da der Zweck eines Mockups in der Präsentation und letztendlich in der Überzeugungsarbeit (d. h. dem Verkauf eines Designkonzepts) besteht, versteht es sich von selbst, dass das überzeugendste Mockup eines ist, das für einen bestimmten Kunden entworfen wurde.

Aber natürlich ist die Erstellung von Mockups für jedes Projekt von Grund auf nicht der praktischste Ansatz. Dies erfordert viel Aufwand für etwas, das im Wesentlichen eine einmalige Präsentation ist Vermögenswert. Dies ist auch nur dann sinnvoll, wenn das Layoutkonzept sehr originell ist – es hat keinen Sinn, sich mit all dieser Mühe herumzuschlagen, wenn das Ergebnis nicht von der Vorlage zu unterscheiden ist. Letztendlich liegt es an Ihnen, zu entscheiden, ob Sie sich für das Projekt oder den Kunden so stark begeistern, dass Sie sich die Mühe machen, ein einzigartiges Modell zu erstellen.

Für ein wirklich individuelles Layout benötigen Sie Originalfotos. Auf diese Weise können Sie ein Szenenlayout erstellen, das Ihrer Designvorstellung viel näher kommt, während Stockfotos von Natur aus für allgemeine Einstellungen und Szenen konzipiert sind. Wenn Sie über die nötige Ausrüstung, Erfahrung und Zeit verfügen, können Sie Ihre eigenen Fotos machen. In diesem Fall sollten Sie im Voraus ein Brainstorming durchführen oder die Szene skizzieren, ähnlich wie Sie es beim Storyboard eines Films tun würden.

Was ist die Verkaufsmarge? und wie man es berechnet

Sie könnten auch einen professionellen Fotografen engagieren, aber das ist natürlich ein Aufwand, der nicht für jeden Designer praktikabel ist – dies liegt eher im Bereich einer Designagentur, mit der er zusammenarbeitet Firmenkunden. Eine tolle Alternative ist die Verwendung von Fotos, die dem Kunden gehören: Beispielsweise wendet der Designer Top Level goopanic sein Academia de Artes-Branding auf echte Fotos der Schule und ihrer Schüler an. Auch wenn diese Fotos nicht so sind von hoher QualitätAls professionelle Stockfotos geben sie dem Kunden eine authentischere Vorstellung davon, wie sein Design letztendlich aussehen wird.

Sobald Sie Ihre Fotos haben, müssen Sie eine Fotobearbeitungssoftware verwenden, um Ihr Design in das Bild zu integrieren. Die gängigste Software für diesen Zweck ist Adobe Photoshop, aber Affinity Photo und Gimp sind zuverlässige Alternativen. Diese Programme bieten viele Tools und Anleitungen, um realistische Ergebnisse zu erzielen, und sie laufen im Wesentlichen auf Folgendes hinaus:

• Transformationswerkzeuge, um das Design an das Bild anzupassen
• Mischmodi, um Texturen aus dem Originalfoto zu integrieren
• Einstellungsebenen zum Arbeiten mit Beleuchtung, Farbe und Kontrast

 

Wenn Sie mit benutzerdefinierten Animationen arbeiten möchten, verwenden Sie Animationssoftware wie After Effects: Sie können beispielsweise Ebenenmasken verwenden, um Laufanimationen für Apps auf einem Telefonfoto zu erstellen.

Benötigte Werkzeuge

• Fotografie und/oder Fotoausrüstung
• Software für Fotobearbeitung (Photoshop, Serif Photo, Gimp)
• *Optional* Animationssoftware (Adobe After Effects)

Расходы

• Mäßig bis hoch

Pros

• Das Ergebnis sind Modelle, die spezifischer sind und der Vision des Designers entsprechen.
• Quellbilder; Keine Wasserzeichen und keine Notwendigkeit, Lizenzen zu kaufen

Cons

• Teuer und erfordert viel Aufwand; erfordert tiefere Softwarekenntnisse
• Ineffektiv und zeitaufwändig
  Bürodruck für Unternehmen aus der Druckerei Azbuka.

2. Erstellen Sie wiederverwendbare Layoutvorlagen. Modelle.
-

Benutzerdefinierte Layoutvorlagen sind Layouts, die Designer selbst erstellen, die jedoch generisch genug sind, um in mehreren Projekten verwendet zu werden. Wie wir im letzten Abschnitt dargelegt haben, kann die Erstellung benutzerdefinierter Mockups für jedes Projekt unpraktisch und teuer sein, aber diese Methode ermöglicht es dem Designer, zu geringeren Kosten Mockups zu erstellen, die sowohl originell als auch wiederverwendbar sind.

Dies ist auch eine Möglichkeit für den Designer, seine eigenen hinzuzufügen persönliche Marke oder sich wiederholender Stil in Ihren Präsentationen vor Kunden.

Der Prozess zum Erstellen von Mockup-Vorlagen ist im Wesentlichen derselbe wie zum Erstellen benutzerdefinierter Mockups: Sie müssen immer noch ein Foto kaufen und ein Fotobearbeitungsprogramm verwenden, um das Design zu integrieren. Ein Unterschied besteht in der Herangehensweise an das Fotografieren Ihres Layouts: Es sollte vage genug sein, um für mehrere Kunden zu funktionieren. Anstatt beispielsweise eine identifizierende Szenerie zu verwenden, konzentrieren sich die Layouthintergründe der Top-Designerin Daria V. auf illustrierte Akzente, die geändert werden können mit jedem Projekt.

Dies kann dazu beitragen, Kunden nach gemeinsamen Themen zu gruppieren, beispielsweise nach der Branche (Sie könnten eine Layoutvorlage für alle Ihre Restaurantkunden, eine für alle Ihre Einzelhandelskunden usw. haben). Dies erleichtert die Auswahl von Bildern, die in allgemeinen Kontexten funktionieren.

Buchlayout-Generatoren: 5 KOSTENLOSE Tools

Bei physischen Produkten erstellen einige Designer mithilfe von 3D-Software wie Adobe Dimension leere Renderings des Produkts. Dies hat den zusätzlichen Vorteil, dass drehbare, animierte Layouts erstellt werden können.

Beim Erstellen Ihres Vorlagenlayouts in Photoshop besteht Ihr Ziel im Wesentlichen darin, das Dokument so einzurichten, dass das Design in zukünftigen Projekten problemlos ersetzt werden kann und gleichzeitig alle Ihre beibehalten werden Manipulation. Photoshop stellt hierfür zwei bereit Nützliche Hilfsmittel:

Intelligente Photoshop-Objekte. Modelle.

Ein Smart Object ist im Wesentlichen ein Container, der ein Bild in einem verknüpften Dokument speichert, sodass Sie innerhalb Ihrer größeren Komposition drastische Änderungen daran vornehmen können, ohne das Originalbild zu beeinträchtigen. Wenn Sie ein Bild in einem Smart-Objekt ersetzen, wird es in der Komposition aktualisiert und alle Ihre Änderungen werden darauf angewendet.

Bei Mockups müssen Sie also zu Beginn des Projekts lediglich die Designebene in ein Smart-Objekt konvertieren (gehen Sie zu Ebene > Smart-Objekte > In Smart-Objekt konvertieren). Danach können Sie das Design im Smart-Objekt einfach ersetzen, wenn Sie das nächste Mal ein Layout benötigen.

Photoshop-Aktionen. Modelle.

Aktionen zeichnen die Änderungen auf, die Sie an einem Photoshop-Dokument vornehmen, sodass Sie diese Schritte mit einem Klick auf eine Schaltfläche wiederholen können, wodurch sich wiederholende Aufgaben entfallen. Mit einem Mockup können Sie also eine Aktion verwenden, um alle Transformationen und Effekte aufzuzeichnen, die Sie auf ein Design anwenden, um es an ein Foto anzupassen, und dieselben Änderungen in der Zukunft einfach durch Klicken auf eine Schaltfläche auf ein anderes Design anwenden.

Benötigte Werkzeuge

• Fotografie und/oder Fotoausrüstung
• Fotobearbeitungssoftware (Photoshop, Serif Photo, Gimp)
• *Optional* 3D-Produktmodellierungssoftware

Расходы

• mäßig

Pros

• Bei wiederholter Nutzung lohnt sich die Mühe, individuelle Layouts zu erstellen.
• Quellbilder; Keine Wasserzeichen und keine Notwendigkeit, Lizenzen zu kaufen

Cons

• Erfordert fortgeschrittenere Softwarekenntnisse
• Es kann eine Verschwendung von Aufwand sein, wenn sich die Ergebnisse nicht ausreichend von einer Vorlage eines Drittanbieters unterscheiden.

3. Verwenden Sie eine Mockup-Generator-Website.
-

Eine Mockup-Generator-Website ist ein Onlinedienst, der mithilfe von Archivbildern und KI-Software automatisch ein Mockup aus einer Vorlage eines Drittanbieters generiert. Normalerweise muss ein Designer lediglich seinen Entwurf hochladen und die Software kümmert sich um alle technischen Probleme.

Diese Methode ist mit Abstand die günstigste und einfachste Lösung, hat aber auch einige Nachteile. Das resultierende Layout wird unoriginal sein, und da viele Designer denselben Service genutzt haben, ist es nicht ungewöhnlich, dass auf allen Portfolio-Websites bis zum Überdruss dieselben Layout-Bilder auftauchen. Gleichzeitig kann es im Notfall nützlich sein, und es wird ihm wahrscheinlich nichts ausmachen, es sei denn, der Kunde ist ein Anbieter von Designermodellen.

Bei der Auswahl einer Dienstleistung sollten Sie Folgendes berücksichtigen: Preis, Qualität und Relevanz. Bezüglich des Preises ist die Nutzung vieler Mockup-Generatoren kostenlos, allerdings sollten Sie sich vor versteckten Unannehmlichkeiten wie dem Hinzufügen von Wasserzeichen oder einer begrenzten Auswahl an Vorlagen in Acht nehmen. Ansonsten richtet sich der Preis meist nach Abo-Modelle, und die meisten Dienste, die ich überprüft habe, liegen zwischen 10 und 20 US-Dollar pro Monat.

Die Qualität hängt vielleicht vom persönlichen Geschmack ab, aber Sie sollten sich etwas Zeit nehmen, um die Layouts anderer Designer und Konkurrenten zu studieren, um ein Gefühl dafür zu bekommen, was clever und was allgemein ist. Sie können auch Dienste wie Trustpilot nutzen, um Nutzerbewertungen zu finden, die Ihnen über das Werbematerial hinaus sagen, wie gut der Dienst funktioniert und was die tatsächlichen Ergebnisse sind.

Screenshot der Homepage des Smartmockups-Design-Mockup-Generators

Schließlich sind einige dieser Websites auf bestimmte Arten von Layouts spezialisiert, und Sie müssen eines auswählen, das für Ihre Projekte relevant ist, insbesondere wenn Sie ein Abonnement erwerben. Beispielsweise sind Artboard Studio und Mockup Mark darauf spezialisiert Druck und Layouts Kleidung. Dienste wie AppMockUp und Mockuuups Studio sind auf digitale Design-Mockups spezialisiert. Mittlerweile bieten Smartmockups, renderforest und Placeit gemeinsame Mockup-Vorlagen sowohl für den Druck als auch für die digitale Welt an.

Benötigte Werkzeuge

• Zuverlässige Internetverbindung
• *Optional* Site-Layout-Mitgliedschaft

Расходы

• Von kostenlos bis günstig

Pros

• Schnell und mühelos; keine Softwarekenntnisse erforderlich
• Die Qualität kann manchmal einem benutzerdefinierten Layout nahe kommen

Cons

• Erstellt einen gemeinsamen Look mit Bildern, die viele Designs online verwenden.
• Das Abo-Modell ist nur dann sinnvoll, wenn mehrere Layouts benötigt werden.

4. Verwenden Sie ein Software-Plugin, um Layouts zu erstellen.
-

Mockup-Plugins sind Integrationen von Drittanbietern, die eine Verbindung zu Designsoftware herstellen, um Mockups zu erstellen. Im Wesentlichen ermöglichen diese Anwendungen Designern, Layouts in einem einzigen Programm zu entwerfen und zu erstellen, mit dem zusätzlichen Vorteil, dass der Designer die Tools des Programms verwenden kann, um Änderungen am Layout vorzunehmen, nachdem es erstellt wurde.

Es ist das Beste aus beiden Welten: eine kostengünstige, anpassbare Vorlage mit geringem Aufwand. Allerdings ist diese Methode im Allgemeinen für digitales Design gedacht und die meisten Plugins zielen auf Anwendungs-Prototyping-Software ab, z Skizze , Figma и Adobe XD .

Es gibt mehrere beliebte Dienste, die herunterladbare Plugins anbieten, darunter Winkel , Gedreht и Mokup-Frames . Da diese Software herunterladbar ist, ist in der Regel eine einmalige Zahlung erforderlich. Dieser Preis ist normalerweise höher als bei den meisten Mockup-Generator-Websites, auf lange Sicht ist er jedoch niedriger, da Sie keine Abonnementgebühr zahlen.

Sie müssen den standortspezifischen Anweisungen folgen, um das Plugin herunterzuladen und in Ihrer Software zu installieren. Von dort aus haben Sie die Möglichkeit, das Design Ihrer Software auf das Layout anzuwenden. Der Vorgang ähnelt der Verwendung einer Website mit einem Mockup-Generator: Das Plugin erstellt automatisch Ihr Mockup und Sie verwenden die Anpassungstools, um es zu verfeinern.

Benötigte Werkzeuge

• Designsoftware (Sketch, Figma, Adobe XD)
• Lizenz- und Plugin-Download

Расходы

• niedrig

Pros

• Schnell und mühelos; Geringe Softwarekenntnisse erforderlich
• Im Rahmen des Designprozesses werden Mockups in Designsoftware erstellt.

Cons

• Erstellt einen gemeinsamen Look mit Bildern, die viele Designs online verwenden.
• Die Ergebnisse unterscheiden sich nicht wesentlich von denen von Online-Mockup-Generatoren

Es ist Zeit, einzigartige Modelle zu erstellen!
-

Design-Mockups sind unglaublich leistungsstarke Präsentationstools, die nicht nur eine Designidee verkaufen, sondern dem Betrachter auch einen Blick in eine Zukunft bieten, in der das Design bereits existiert. Wenn es gut gemacht wird, wird der Kunde fast gezwungen sein, diese Zukunft Wirklichkeit werden zu lassen.

Wie in diesem Artikel erwähnt, gibt es viele Methoden zum Erstellen von Modellen, und jede davon hat ihre eigene Vor- und Nachteile. Aber egal, wie Sie Ihre Layouts erstellen, die Ergebnisse hängen letztendlich vom Designer und seinem Engagement ab, ein Layout realistisch wiederzugeben, das aus dem Bildschirm springt.

 АЗБУКА

Wie Sie Projekte in einem Online-Geschäft erfolgreich verwalten