Eine Website-Mockup-Vorlage kann ein Lebensretter für das Design sein. Es macht es einfach, ein Website-Design-Konzept in einer Umgebung zu präsentieren, die die tatsächliche Nutzung darstellt (auf vielen verschiedenen Geräten). Aber wie können Sie eine Website-Modellvorlage anpassen und in Ihr eigenes Design einfügen? Hier ist wie.
Es gibt zwei Möglichkeiten, um loszulegen. Sie können entweder eine eigene Website-Modellvorlage für die Verwendung in Projekten erstellen oder eines herunterladen, um schnell loslegen zu können. Das Tolle ist, dass es so viele Vorlagenoptionen gibt, mit denen Kunden ein neues Design in Echtzeit visualisieren können.
Hier finden Sie alles, was Sie zum Anpassen einer Vorlage wissen müssen (sowie zum Suchen einer hervorragenden Vorlage).
Was ist eine Website-Mockup-Vorlage?
Kunden lieben es, ein fertiges Design in einer Modellvorlage zu sehen, weil es ihnen eine bessere Vorstellung davon vermittelt, was das Designteam denkt. Die meisten Website-Modellvorlagen haben die Form einer bearbeitbaren Adobe Photoshop-Datei. Das Design ist so gestaltet, dass Sie einen Screenshot Ihrer Website in einen realistisch wirkenden Rahmen einfügen können, z. B. eine Homepage auf einem Computer, Tablet oder Mobilgerät.
Website-Modellvorlagen können ein einzelnes Bild, mehrere Bilder und Renderings in unterschiedlichen Ausrichtungen enthalten. Ein gutes Modell kann eine großartige Visualisierung darüber liefern, wie ein fertiges Produkt in der Praxis aussehen wird.
Während Sie Ihre eigenen Modelle erstellen können, stehen Ihnen zahlreiche Optionen zum Download zur Verfügung. Die meisten dieser Vorlagen werden als PSD-Dateien mit Layern und intelligenten Objekten erstellt, um das endgültige Design zu erstellen, während die visuellen Eigenschaften der Datei erhalten bleiben. Dies ist praktisch, wenn Sie ein Modell verwenden, das eine interessante Ausrichtung verwendet, z. B. eine 3D- oder perspektivische Ansicht.
Die meisten Website-Modellvorlagen enthalten eine Mischung aus Vektor- und Rasterbildern. Exportieren Sie daher sorgfältig. Sie möchten sicherstellen, dass das Bild Ihrer Website so gut wie möglich aussieht, bevor Sie es anzeigen.
Anpassen einer Mockup-Vorlage
Während eine Photoshop-Datei mit mehreren ungerade Ebenen ein wenig einschüchternd wirken kann, ist das Anpassen einer Mockup-Vorlage kein komplizierter Prozess. Sie müssen nur:
- Finden Sie eine Website-Modellvorlage, die Sie mögen. (Sie können Ihre eigenen Optionen erstellen, aber mit so vielen tollen Optionen haben wir die Download-Option empfohlen.) Suchen Sie nach einer Vorlage, die die Merkmale Ihres Designs hervorhebt, z. B. mehrere Ansichten für responsive Websites (Desktop, Tablet und Telefon) mit einem Hintergrund, der zum Projektstil passt (weiß oder schwarz im Vergleich zu einem farbigen Hintergrund oder fotorealistischem Stil).
- Entpacken Sie den Download und vergewissern Sie sich, dass Sie über alle erforderlichen Teile verfügen: Eine PSD-Datei mit dem bearbeitbaren Modell, ein JPG, die Ihnen zeigt, wie das Design aussehen soll (optional), und eine Informations- oder Readme-Datei mit Lizenzinformationen und Anweisungen.
- Öffnen Sie die PSD-Datei in Photoshop und sehen Sie sich die Ebenen an. Suchen Sie nach der Ebene mit der Aufschrift "Drop Your Design Here" (oder ähnliches) (es gibt immer eine Schicht, die bei dieser Anweisung auffällt!)
- Doppelklicken Sie auf diese Ebene, um sie zu öffnen.
- Nehmen Sie die entsprechenden Screenshots Ihres Designs in der Größe auf, um eine optimale Auflösung zu erreichen und um genau zu zeigen, was die Leute im endgültigen Mockup-Design sehen möchten.)
- Kopieren und fügen Sie Ihre Bilder oder Inhalte per Drag & Drop in die entsprechende Ebene ein, und passen Sie die Größe an, um den Platz zu füllen.
- Drücken Sie Strg-S oder Cmd-S, um die Smart-Ebene zu speichern, und kehren Sie dann zum ursprünglichen Bild zurück. Voila! Sie sollten Ihren neuen Screenshot im Modell sehen.
- Exportieren Sie die Datei zur Anzeige in der gewünschten Größe und im gewünschten Format.
So verwenden Sie eine Website-Mockup-Vorlage
Was machen Sie damit, wenn Sie eine Website-Mockup-Vorlage angepasst haben? Diese scheinbar einfachen Konstruktionen haben viele praktische Anwendungen. Sie können eine Website-Modellvorlage verwenden, um:
- Vorschauentwürfe für Kunden
- Bereiten Sie Marketing und Promotions nach dem Launch vor
- In gedruckte Portfolios aufnehmen
- Wählen Sie einen Wettbewerbsbeitrag, wenn Sie das endgültige Design präsentieren möchten
Um eine Website-Mockup-Vorlage zu verwenden, müssen Sie lediglich Ihr benutzerdefiniertes Design in ein verwendbares Format exportieren. Meistens umfasst dies zwei Optionen: eine hochauflösende Bilddatei für Druckanwendungen und eine Datei mit Webauflösung, die online verwendet werden kann oder für die E-Mail-Freigabe.
Wo finde ich eine Website-Mockup-Vorlage?
All dies wirft wahrscheinlich die Frage auf: Wo finden Sie eine dieser praktischen Website-Modellvorlagen? Es gibt viele kostenlose und kostenpflichtige Optionen aus verschiedenen Quellen.
Wir haben auch ein paar großartige Runden mit vielen Modellen, mit denen Sie sofort loslegen können.
- 20+ Beste Responsive Website- und App-Modellvorlagen
- 20+ Beste Website-PSD-Perspektiventwürfe
10 kostenlose Website-Modelle zum Einstieg
Um sicherzustellen, dass Sie alle bereit sind, ein Website-Modell zu verwenden, haben wir 10 großartige und kostenlose Optionen gefunden, die Ihnen den Einstieg erleichtern. Einige dieser Modelle sind auch in anderen Design Shack-Roundups zu finden.)
2 MacBook Pro-Schreibtischmodelle
Responsive Showcase PSD-Modelle
Vektor Apple Gliederung Gerät PSD
Flat Responsive Showcase
Weißes iPad und iPhone Floor Mockup
MacBook und iPhone auf dem Tischmodell
Apple-Wireframe-Mockups
Responsive Web Design Showcase Mockup
Modell MacBook Air
MacBook Pro Retina Display PSD
Fazit
Das Anpassen einer Website-Modellvorlage zum Anzeigen eines Projekts ist ein großartiges Werkzeug, das Sie in Ihrem Arsenal verwenden können. Selbst wenn Sie nur wenige Minuten Zeit haben, um sich auf eine Präsentation vorzubereiten, können Sie Ihr Website-Design in ein reales Szenario für einen ausgefeilten Look bringen.
Die Gesamtpräsentation eines Designs oder einer Idee mag Sie nicht interessieren, die Kunden werden es jedoch auf jeden Fall bemerken. Dies ist eine der schnellen und einfachen Verknüpfungen, die Designer (und Freelancer) für einen guten Eindruck nutzen können. Viel Spaß beim Anpassen einer Vorlage für Ihre Projekte!
Website-Mockups
Finden Sie das perfekte responsive Website-Modell, um Ihr Webdesign auf allen Arten von Geräten, Bildschirmen und Formaten zu präsentieren. Lernen Sie außerdem, wie Sie sie effektiv einsetzen können!