Professionell präsentiert: 29 kostenlose Mockups zum freien Einsatz

Facebook
XING
Twitter

Simple Screenshots oder platte Grafiken verkaufen sich nicht. Heute braucht es eine auffälligere Präsentation. Dein Webdesign abgebildet auf einem aktuellen Apple-Produkt oder dein Poster in einem schönen Rahmen an der Wand. Nun haben wir kaum die Zeit, jedes Werk entsprechend ansprechend umzusetzen. Hier helfen dir vorgefertigte Mockups, die deine Grafiken nach nur einem Klick in Szene setzen.

Es ist empfehlenswert, die Lizenzen im Einzelfall noch einmal zu überprüfen, bevor du ein Projekt damit beginnst. Zwar haben wir das bereits getan, aber sicher ist sicher. Jetzt viel Spaß beim Stöbern!

Hardcover Book MockUp

Mock-ups
Erstellt von: graphicburger.com
Lizenz: frei für kommerzielle Zwecke

A5 Psd Magazine Mockup

Mock-ups
Erstellt für: pixeden.com
Lizenz: frei für kommerzielle Zwecke

A5 Magazine MockUp

Mock-ups
Erstellt von: graphicburger.com
Lizenz: frei für kommerzielle Zwecke

Z Fold PSD Mockup

Mock-ups
Erstellt von: graphberry.com
Lizenz: frei für kommerzielle Zwecke

Notebook MockUp PSD

Mock-ups
Erstellt von: graphicburger.com
Lizenz: frei für kommerzielle Zwecke

Hardback Book Mockup

Mock-ups
Erstellt von: Alex Warden
Lizenz: frei für kommerzielle Zwecke

Advanced Tri-Fold Brochure Mockup – PSD

Mock-ups
Erstellt von: Wassim Awadallah
Lizenz: frei für nichtkommerzielle Zwecke

Square brochure mockup

Mock-ups
Erstellt von: mockups-design.com
Lizenz: frei für kommerzielle Zwecke

Magazine Mockup

Mock-ups
Erstellt von: alienvalley.com
Lizenz: frei für kommerzielle Zwecke

Book Cover Mockup

Mock-ups
Erstellt von: alienvalley.com
Lizenz: frei für kommerzielle Zwecke

Hardcover Book Mockup Set

Mock-ups
Erstellt von: alienvalley.com
Lizenz: frei für kommerzielle Zwecke

Paper Shopping Bag Mockup

Mock-ups
Erstellt von: graphicburger.com
Lizenz: frei für kommerzielle Zwecke

Classic Psd T-shirt Mockup

Mock-ups
Erstellt von: pixeden.com
Lizenz: frei für kommerzielle Zwecke

Free iPhone X Mockup 02

Mock-ups
Erstellt von: originalmockups.com
Lizenz: frei für kommerzielle Zwecke

Shopping Bag Mockup

Mock-ups
Erstellt von: mockupworld.co
Lizenz: frei für kommerzielle Zwecke

Photorealistic Flyer Mockup (FREE PSD)

Mock-ups
Erstellt von: Renan Facure
Lizenz: frei für kommerzielle Zwecke

5 high-quality photographic mockups

Mock-ups
Erstellt von: Freebiesbug
Lizenz: frei für kommerzielle Zwecke

Rubber Stamp PSD MockUp

Erstellt von: graphicburger.com
Lizenz: frei für kommerzielle Zweckeh

Window Signage MockUp

Mock-ups
Erstellt von: graphicburger.com
Lizenz: frei für kommerzielle Zwecke

3 Urban Poster MockUps

Mock-ups
Erstellt von: graphicburger.com
Lizenz: frei für kommerzielle Zwecke

Indoor Advertising Poster MockUp

Mock-ups
Erstellt von: graphicburger.com
Lizenz: frei für kommerzielle Zwecke

Hanging Poster Frame Mockup

Mock-ups
Erstellt von: graphictwister.com
Lizenz: frei für nichtkommerzielle Zwecke

FREE PSD Mockup – Adidas Superstar

Mock-ups
Erstellt von: Luís Quintal
Lizenz: frei für nichtkommerzielle Zwecke

Box Mockup

Mock-ups
Erstellt von: alienvalley.com
Lizenz: frei für nichtkommerzielle Zwecke

Free Cardboard Box Mockup For Packaging Designs

Mock-ups
Erstellt von: zippypixels.com
Lizenz: frei für kommerzielle Zwecke

Ornamental Psd Frame Mockup

Mock-ups
Erstellt von: pixeden.com
Lizenz: frei für kommerzielle Zwecke

Free Man Holding (Horizontal) Paper PSD Mockup

Mock-ups
Erstellt von: Yeahthemes
Lizenz: frei für kommerzielle Zwecke

Business card mockup Free Psd

Mock-ups
Erstellt von: Freepik
Lizenz: frei für nichtkommerzielle Zwecke

Placehold.it – Passgenaue Bildplatzhalter für Weblayouts

Nach meiner Erfahrung sind Platzhalterbilder eine zweischneidige Sache. Einerseits helfen sie, einen Eindruck vom geplanten Layout zu verschaffen. Andererseits bergen sie die Gefahr, dass sich der Kunde zu stark auf den Inhalt der Platzhalter fokussiert und ein Layout möglicherweise ablehnt, weil ihm die Bilder nicht gefallen.

Abstraktes Denken ist der Mehrheit leider nicht in die Wiege gelegt worden. Deshalb verwende ich stets Platzhalterbilder ohne Inhalte, reine Quader in der richtigen Größe, eventuell noch mit zum Layout korrespondierender Einfärbung. So ist der Dienst Placehold.it für mich geradezu ideal.

Real-Life-Platzhalterkonzept: Für´s Web bedingt geeignet… (Bildquelle: Annamartha / pixelio.de)

Placehold.it erzeugt abstrakte Platzhalter, um nicht zu polarisieren

Placehold.it, realisiert von Brent Spore und Russell Heimlich, erzeugt Bildplatzhalter. Im Standard sind das hellgraue Quader definierbarer Größe. Die Platzhalter werden via URL-Parameter generiert. So erzeugt der folgende Aufruf

http://placehold.it/640×150

das folgende Bild:

Die simpelste Form des Aufrufs führt also zu einem hellgrauen Rechteck, dessen Pixelmaße als Text in das Bild geschrieben werden. Der Platzhalter kann nun heruntergeladen und manuell in das Layout eingebunden werden. Alternativ ruft man die URL innerhalb des Image-Tags mit

auf und erspart sich so Down- und Upload. Das ist schon ziemlich gut, aber zeigt noch nicht alle Möglichkeiten des Dienstes. Übrigens: Wer einen quadratischen Platzhalter erzeugen will, lässt einfach den zweiten Pixelwert weg. Das sähe so aus:

http://placehold.it/640

Will man seine Platzhalter nicht im Standardformat GIF, sondern etwa als JPG oder PNG erhalten, gibt man das einfach als URL-Parameter an:

http://placehold.it/640×150.png

Placehold.it bietet mehr Parameter als reine Pixelwerte

Im nächsten Schritt könnte man eventuell einen Text im Bild haben wollen, der nicht die Pixelmaße repräsentiert. Hierzu würde beispielsweise folgender Aufruf führen:

http://placehold.it/640×150.png&text=dr.+web+testet+placehold.it

Folgender Platzhalter entstünde dadurch:

Und die letzte Möglichkeit, den Platzhalter anzupassen, bezieht sich auf die Farbgebung. Ebenfalls per URL-Parameter lässt sich die Hintergrundfarbe des Rechtecks, wie auch die Textfarbe definieren. Folgender Aufruf

http://placehold.it/640×300/0000FF/ffffff&text=dr.+web+testet+placehold.it

führt zu folgendem Bild:

Fazit: Placehold.it verzichtet bewusst auf echte Inhalte, um das Layout abstrakt zu halten. Genau deshalb verwende ich den Dienst so gerne. Die URL-Parameter lassen keine benötigte Funktion vermissen. Dazu ist der Dienst kostenlos. Was könnte man mehr wollen?

2 Antworten

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Inhaltsverzeichnis

Zum Dr. Web Newsletter anmelden

Kein Spam, nur Benachrichtigungen über neue Produkte und Updates.

Social Media

Meistgelesen

Weitere Kategorien

On Key

Related Posts

Ein junger blonder Mann, der die Füße hochlegt und über sein Geschäft sinniert.

Banking: Brauchen Freelancer ein separates Geschäftskonto?

Gesetzlich vorgeschrieben ist die Trennung von Privat- und Geschäftskonto nicht. Wer als Freelancer auf eigene Rechnung arbeitet, muss also kein zusätzliches Girokonto einrichten. Sinnvoll ist die saubere Trennung von privaten und betrieblichen Zahlungsvorgängen trotzdem. Wir zeigen, worauf es ankommt

Ein schwarzer Tisch mit keyboard, maus, kophoerer, kaffee schwarz.

Die 13 besten HTML Editoren für Webentwickler (Update)

Wer Webseiten entwickeln möchte, braucht einen HTML-Editor. Sicherlich kannst du auch mit Hilfe des Windows-Notepad eine Webseite erstellen – schön und komfortabel geht indes anders. Besonders wichtig bei einem HTML-Editor sind eine gute Einfärbung der Syntax – auch Syntax-Highlighting genannt – und eine brauchbare Code-Vervollständigung.