Dein Design verdient eine gute Bühne: mein neuer Mockup Generator

Einzelne Entwürfe zeigen. Das Gesamtbild sichtbar machen.

Ein Screenshot im Anhang zeigt, wie eine Website aussieht. Drei passend angeordnete Ansichten zeigen zusätzlich, wie ihr Design zusammenhängt. Bei Social Media ist es ähnlich: Ein einzelner Post erzählt nur einen Teil. Im Feed siehst du, ob Farben, Fotos und Typografie eine gemeinsame Sprache sprechen. Und eine Visitenkarte wirkt auf einer passenden Farbfläche mit etwas Schatten gleich viel greifbarer als ein flacher Export.

Für diese Aufgaben wollte ich ein Werkzeug, mit dem ich schnell verschiedene Anordnungen ausprobieren kann. Daraus ist mein Mockup Generator für Social Media, Web und Print entstanden. Du wählst eine Vorlage, bringst deine Inhalte mit und stellst die Präsentation so ein, dass sie zu deinem Projekt passt.

Social-Media-Mockups: So wirkt ein Feed als Ganzes

Besonders bei einer neuen Content-Serie lohnt sich der Blick auf mehrere Beiträge gleichzeitig. Wechseln sich Fotos und Textkacheln gut ab? Ist genug Ruhe im Raster? Tragen die Markenfarben auch über neun oder zwölf Posts? Mit den Vorlagen Social Feed, Social Wall und Creative Grid kannst du solche Zusammenstellungen präsentieren und verschiedene Looks vergleichen.

Der Auftritt von Trenner Immobilien zeigt gut, was ich damit meine: Dunkelblau verbindet Immobilienmotive, Dresden-Fotos und informative Beiträge. Durch die gemeinsame Anordnung wird aus einzelnen Motiven eine Bildwelt. Eine solche Präsentation kannst du mit deinen eigenen Posts im Generator aufbauen.

Die Beispiele aus meinem Portfolio zeigen verschiedene Möglichkeiten: den Trenner-Feed, reduzierte Karten für die Praxis Kane und Comedy Rostock sowie Webdesign-Präsentationen für meinen eigenen Auftritt, Vibotix und Lector. Ähnliche Anordnungen mit Farbflächen, Perspektive und Schatten kannst du im Generator mit deinen eigenen Designs ausprobieren.

Mein Tipp: Halte den Mockup-Hintergrund in einer Farbe deiner Marke und teste zuerst die Reihenfolge der Beiträge. Abstände und Drehung kommen danach. Wenn die Inhalte schon im geraden Raster zusammenpassen, braucht die Präsentation meist nur noch wenige Handgriffe. Mehr zur Gestaltung der eigentlichen Beiträge findest du unter Social Media Design.

Visitenkarten: eine Farbe, ein Schatten, dein Design

Manchmal ist die einfachste Präsentation die passendste. Eine einzelne Karte auf einer einfarbigen Fläche, leicht gedreht und mit einem weichen Schatten: So stehen Logo, Schrift und Papierwirkung im Mittelpunkt. Du brauchst dafür keine aufwendige Schreibtischszene.

Füge dein exportiertes Kartenmotiv hinzu und wähle einen Hintergrund, der sich ausreichend davon absetzt. Eine helle Karte darf auf einer kräftigen Markenfarbe stehen; ein farbiger Entwurf braucht oft nur eine ruhige Fläche. Für Vorder- und Rückseite kannst du auch mehrere Papierflächen oder einen Kartenstapel ausprobieren.

Das Mockup hilft beim Zeigen und Vergleichen. Für den Druck verwendest du deine separat vorbereiteten Druckdaten. Wenn du noch am Entwurf arbeitest, findest du hier Anregungen zum Visitenkarten-Design.

Webdesign-Mockups: Desktop und Mobil zusammen zeigen

Eine Website lebt auf unterschiedlichen Bildschirmgrößen. Für dein Portfolio oder einen Kunden-Pitch ist deshalb die Kombination aus Desktop und Mobil besonders anschaulich. Du siehst auf einen Blick, wie sich Farben, Bildsprache und Inhaltsaufbau in beiden Ansichten wiederfinden. Der Generator bietet dafür eine gemeinsame Ansicht und eine Collage.

Lange Seiten als versetzte Spalten

Möchtest du mehrere Seiten oder längere Layouts zeigen, funktioniert die Spaltenansicht gut. Die Screenshots stehen versetzt nebeneinander und geben einen Eindruck von der Gestaltung über den ersten Bildschirm hinaus. Für eine einzelne Startseite bietet sich dagegen die Einzelansicht an; zwei Ansichten lassen sich überlagern.

Verwende dafür saubere Screenshots ohne offene Menüs oder Cookie-Dialoge. Achte darauf, dass die entscheidenden Bereiche sichtbar bleiben und die Perspektive die Lesbarkeit unterstützt. Wie du die Website selbst für kleine Bildschirme planst, erkläre ich im Beitrag über Mobile-First-Webdesign.

In drei Schritten zu deinem eigenen Mockup

1. Vorlage und Inhalte wählen. Starte mit Social Media, Web, Slides oder Print. Füge Bilder oder PDF-Seiten hinzu und bring sie in die gewünschte Reihenfolge.
2. Den Look abstimmen. Passe Abstände, Rundungen, Drehung, Perspektive und Schatten an. Wähle eine Farbfläche, einen Verlauf oder einen passenden Bildhintergrund.
3. Exportieren und verwenden. Lade das Ergebnis als PNG oder JPG herunter, je nach Bedarf in bis zu 4.800 Pixel Breite. Speichere zusätzlich das Projekt, wenn du später weiterarbeiten möchtest.

Bilder und PDF-Seiten bearbeitest du lokal im Browser. Für den normalen Einstieg ist keine Anmeldung nötig. Eine optionale Instagram-Verbindung ist davon getrennt; du kannst einfach mit deinen eigenen Dateien loslegen.

Probier deinen nächsten Entwurf direkt aus

Ob neue Social-Media-Serie, Branding-Präsentation oder Website fürs Portfolio: Nimm ein Projekt, das du ohnehin zeigen möchtest, und teste zwei oder drei Anordnungen. Oft merkst du dabei schnell, welche Präsentation den Charakter deiner Arbeit am besten trifft. Genau dafür ist das Tool da: weniger Zeit mit dem Aufbau der Präsentation verbringen und mehr von deinem Design zeigen.