Ein Mockup ist so, als würde man sich schick anziehen, ein paar Selfies machen und dann den Rest des Abends faul auf der Couch verbringen. Mockups, die in der Regel auf Mockup-Webseiten oder mithilfe von Programmen erstellt werden, sollen Stakeholdern den fertigen Look zeigen, müssen aber nicht tatsächlich funktionieren. Dein Mockup muss nicht interaktiv sein, geschweige denn sich bewegen; es ist eine realistische Vorschau auf dein Projekt.

Im Gegensatz zu Prototypen, die tatsächlich funktionieren müssen, handelt es sich bei Mockups um statische Bilder, die Design, Atmosphäre, Farbe und allgemeine Ästhetik zeigen sollen. Manche Designer:innen erstellen lieber alle Buttons und Icons selbst, aber wenn du diesen Schritt überspringen möchtest oder ein bisschen experimentieren willst, um Inspiration zu finden, gibt es Mockup-Webseiten und Programme, die diese Elemente bereits enthalten und vielleicht leichter zu bedienen sind als Grafikprogramme.

Illustration von zwei Personen, die an Website-Mockup-Designs arbeiten
Design von OrangeCrush

Die unten aufgelisteten Mockup-Webseiten helfen dir bei der Erstellung von Website-Mockups, App-Mockups, Produkt-Mockups und mehr. Die meisten verfügen über Vorlagen für Website-Mockups oder UI-Kits, mit denen du vorgefertigte Elemente wie Buttons designen kannst. Wir verraten dir die Vor- und Nachteile jeder Seite, was sie kostet und für wen sie sich eignet.

Hier sind unsere 9 besten Mockup-Webseiten und was sie können:

  1. Adobe XD
  2. Fluid UI
  3. InVision
  4. Mediamodifier
  5. Mockflow
  6. Mockingbird
  7. MockupsJar
  8. Moqups
  9. Smartmockups

1. Adobe XD

Beispiel für Top-Mockup-Websites: Adobe XD
Verwendungsbeispiel von Adobe XD

Adobe XD ist Adobes Antwort auf digitale Designsoftware. Es verfügt über alle Kleinigkeiten und Nuancen, die man vom Unternehmen hinter Photoshop und Illustrator erwarten würde, bringt aber auch denselben hohen Preis mit sich.

Dennoch gilt, wenn du auf der Suche nach professionellen Mockups mit allem Drum und Dran bist, kannst du dich auf Adobe XD verlassen. Es übernimmt den kompletten Designprozess, einschließlich interaktiver Prototypen, und lässt sich in andere Adobe-Programme integrieren, falls du Elemente in Photoshop oder Illustrator verfeinern möchtest.

Es verfügt auch über einen ziemlich guten Funktionsumfang, wie 3D-Effekte, Animationen und die Möglichkeit, eine Komponentenbibliothek zu erstellen, in der du all deine Elemente wie Buttons und Icons speichern kannst, damit dein Team diese für andere Projekte nutzen kann (es hilft treuen Kunden, dieselben Bedienelemente bei neuen Produkten zu sehen). Außerdem gibt es Spezialfunktionen wie Repeat Grid, mit dem du Zeit sparst, wenn du immer und immer wieder das gleiche Muster erstellen musst, und Padding, welches die Pixelgröße schützt, wenn du verschiedene Ebenen desselben Elements bearbeitest.

Preis:

  • 11,89 €/Monat
  • 118,99 €/Jahr (bei Vorauszahlung)

Vorteile:

  • Geeignet für den gesamten Designprozess, einschließlich interaktiver Prototypen
  • Ausgefeilte Funktionen: 3D-Effekte, Animationen und Komponentenbibliothek
  • Nutzerfreundliche, zeitsparende Funktionen: Padding, wiederholende Muster und einfache Bearbeitung
  • Integration mit anderen Adobe-Programmen

Nachteile:

  • Zu viel des Guten, wenn du nur schnell ein einfaches Mockup möchtest

Empfohlen für…

  • Leute, die sich ernsthaft mit digitalem Design beschäftigen und erstklassige Software wollen
  • Regelmäßiges Designen – nicht für einmalige oder persönliche Projekte

2. Fluid UI

Beispiel für Top-Mockup-Websites: Fluid UI
Anwendungsbeispiel von Fluid UI editor

Obwohl Fluid UI genau genommen für die Erstellung von Prototypen gedacht ist, eignet es sich auch gut für fantastische Mockups, aus denen du später interaktive Mockups machen kannst. Es ist eine gute Wahl für Designende und Teams, die den gesamten Umfang des Projekts im Blick haben.

Fluid UI ist nicht so nutzerfreundlich wie die anderen Mockup-Webseiten, wodurch es eine ziemlich steile Lernkurve hat, die Einsteigern möglicherweise nicht gefällt. Es verfügt aber über alle professionellen Funktionen, die du für Web- und App-Design benötigst, einschließlich Wireframes und einer Bibliothek mit vorgefertigten UI-Komponenten und Icons. Eines der Highlights ist das Kollaborationstool, mit dem User Dateien von überall auf der Welt aus betrachten, kommentieren und bearbeiten können.

Preis:

  • Kostenlos (1 Projekt)
  • 8,25 $/Monat (jährliche Zahlung) [Solo]
  • 19,08 $/Monat (jährliche Zahlung) [Pro]
  • 41,58 $/Monat (jährliche Zahlung) [Team]

Vorteile:

  • Erweiterte Funktionen geeignet für Profis
  • Etwas günstiger als vergleichbare Mockup-Webseiten
  • Erstklassige Zusammenarbeit
  • Große, eingebaute Komponentenbibliothek
  • Mobile Apps und der Wechsel zwischen Geräten erleichtern die Erstellung von Mockups für Mobilgeräte

Nachteile:

  • Lernkurve

Empfohlen für…

  • Leute, die ein vollständiges Designtool wollen, aber auf ihr Budget achten müssen

3. InVision

Anwendungsbeispiel von InVision

InVision steht in direkter Konkurrenz zu Adobe XD und ist ein weiteres Tool für Mockups und Prototypen, welches ebenfalls in einem recht teuren Monatsabo daherkommt. InVision verfügt über viele der ausgefeilten Funktionen von Adobe XD, einschließlich präziser Animationstools zur Erstellung von Prototypen, ist aber etwas weniger nutzerfreundlich, was Effizienz und das Optimieren von Aufgaben betrifft.

Erwähnenswert ist auch, dass InVision vordergründig ein Tool zur Erstellung von Prototypen ist. Daher sind viele Funktionen auf Interaktivität und Effekte ausgerichtet statt auf statische Bilder. Dennoch verfügt es über alles, was du für perfekte Mockups benötigst, einschließlich der Integration mit Photoshop und Sketch. Und mit dem kostenlosen Add-on Inspect kannst du jedes Design nahtlos in Code umwandeln.

Preis:

  • Kostenlose Version
  • 7,95 $/Monat (jährliche Zahlung)

Vorteile:

  • Eignet sich für den gesamten Designprozess, einschließlich interaktiver Prototypen
  • Erweiterte Funktionen wie Animationen und interaktive Effekte
  • Lässt sich in Photoshop und Sketch integrieren
  • Kostenlose Version

Nachteile:

  • Nicht ganz so nutzerfreundlich wie Adobe XD

Empfohlen für…

  • Leute, die hauptsächlich ein Tool zur Erstellung von Prototypen wollen, mit dem sich aber auch Mockups erstellen lassen

4. Mediamodifier

Beispiel für Top-Mockup-Websites:: Mediamodifier
Editor in Mediamodifier

Gehen wir mal etwas weg von den professionellen Mockup-Webseiten… sogar weit weg. Mediamodifier befindet sich am anderen Ende des Spektrums: sehr eingeschränkte Funktionalität, aber extrem praktisch. Du kannst direkt auf der Seite kostenlos Mockups herunterladen, aber du musst bezahlen, um das Wasserzeichen zu entfernen und die Mockups in hoher Qualität zu erhalten.

Mediamodifier ist wie ein Online-Fotoeditor, der aber bereits Vorlagen für App- und Website-Mockups enthält. Es verfügt auch über Tausende Vorlagen für andere Dinge: T-Shirts, Kaffeebecher, Buchcover etc. Du musst nur eine Vorlage finden, die dir gefällt, dein eigenes Bild hinzufügen und… das ist eigentlich schon alles, was du tun kannst. Bei Mediamodifier handelt es sich um eine rudimentäre Mockup-Website für den Fall, dass du schnell mal ein Mockup benötigst. Es ist aber nicht geeignet, wenn du jemanden mit hochwertigen Bildern beeindrucken musst.

Preis:

  • Kostenlose Version
  • 9 $/Monat (jährliche Zahlung)

Vorteile:

  • leicht zu bedienen
  • kann in Sekunden Mockups erstellen
  • viele Vorlagen

Nachteile:

  • rudimentäre Funktionen
  • für eine bessere Auflösung muss man zahlen
  • für die Entfernung des Wasserzeichens muss man zahlen

Empfohlen für…

  • alle, die nur schnell etwas Einfaches brauchen
  • Leute, die das Bild bereits designt haben, es aber auf einem Telefon- oder Desktop-Hintergrund platzieren müssen
  • eine gute Auswahl an Hintergründen

5. MockFlow

Beispiel für Top-Mockup-Websites: MockFlow
Mockup und Wireframe von Mockflow

Wenn wir über Mockup-Webseiten sprechen, die sich für den gesamten Designprozess eignen, reden wir nicht viel über Wireframes. MockFlow  ist eines der echten All-in-One-Designtools, das dich von Wireframes über Mockups bis hin zu Prototypen führt.

Zusätzlich zur Möglichkeit, Wireframes zu erstellen, bietet Mockflow mit seinem MockStore auch jede Menge zusätzliche Add-ons. Dort findest du „Zubehör“ wie zusätzliche UI-Packs, mehr Vorlagen für Website-Mockups und besondere Funktionen wie User Personas, Designsysteme oder Übersetzer. Mockflow ist auch bekannt dafür, dass man mit ihm leicht zusammenarbeiten und Inhalte teilen kann, wodurch es sich sehr gut für Teams eignet.

Preis:

  • Kostenlose Version
  • 14 $/Monat (jährliche Zahlung) [Premium]
  • 30 $/Monat (jährliche Zahlung) [TeamPack with 3 users]

Vorteile:

  • hervorragende Funktionen zur Erstellung von Wireframes
  • MockStore bietet zusätzliche Funktionen
  • große Auswahl an UI-Packs und Vorlagen im MockStore

Nachteile:

  • Premium-Plan kostet mehr als andere Mockup-Programme, kann aber weniger

Empfohlen für…

  • Leute, die zusätzliche Tools wie Designsysteme oder Storyboards wollen
  • große Teams, die erweiterte Funktionen zur Zusammenarbeit benötigen
  • einfache, einmalige Projekte, die den kostenlosen Plan nutzen können

6. Mockingbird

Beispiel für Top-Mockup-Websites: Mockingbird
Screenshot vom Mockingbird-Editor

Mockingbird ist eine guter Mittelweg zwischen umfangreicher Funktionalität und optimaler Benutzerfreundlichkeit (obwohl es preislich einem High-End-Tool entspricht). Sein bestes Feature ist der leicht zu bedienende WYSIWYG-Editor, bei dem du einfach Elemente per Drag-and-Drop an den gewünschten Stellen platzieren kannst. Andere Mockup-Webseiten haben ebenfalls einen Drag-and-Drop-Editor, aber Mockingbirds simple und unkomplizierte Benutzeroberfläche wurde ganz klar auf Einsteiger und Beginner designt.

Der Preis ist allerdings weniger schön. Mit mindestens 11 $ pro Monat ist sie eine der teureren Mockup-Webseiten, obwohl sie nicht wirklich mehr zu bieten hat. Das Gute ist allerdings, dass derselbe Preis für eine beliebige Anzahl von Mitarbeitern gilt. Wenn dein Team also groß genug ist, lässt sich der Preis durchaus rechtfertigen.

Preis:

  • 11 $/monatlich (jährliche Zahlung): 3 Projekte
  • 17 $/monatlich(jährliche Zahlung): 10 Projekte
  • 32 $/monatlich (jährliche Zahlung): 25 Projekte
  • 68 $/monatlich (jährliche Zahlung): unbegrenzt viele Projekte

Vorteile:

  • extrem benutzerfreundlich
  • WYSIWYG-Benutzeroberfläche
  • kostenlose Probeversion online

Nachteile:

  • teuer
  • nicht so ein großer Funktionsumfang wie andere Mockup-Webseiten

Empfohlen für…

  • Einsteiger, die sich von komplizierteren Benutzeroberflächen abgeschreckt fühlen
  • große Teams, die sich einzelne Mitgliedschaften für andere Mockup-Webseiten nicht leisten können

7. MockupsJar

Beispiel für Top-Mockup-Websites: MockupsJar
Screenshot vom MockupsJar-Editor

MockupsJar ist dieselbe Art kostenlose Mockup-Website wie Mediamodifier: Du wählst deine Vorlage aus und legst dein eigenes Bild darüber. Genau wie Mediamodifier bieten sie eine Auswahl an Stockfotos, von Laptops über Tassen bis hin zu T-Shirts, aber im Gegensatz zu Mediamodifier kannst du eine Version des Mockups in hoher Qualität kostenlos herunterladen.

MockupsJar verfügt vielleicht nicht über so viele Mockup-Vorlagen wie Mediamodifier, aber die Möglichkeit, ein Bild in hoher Qualität herunterladen zu können, ohne zusätzlich dafür zahlen zu müssen, macht diesen Nachteil wieder wett. Du kannst allerdings nur 20 Bilder in hoher Auflösung herunterladen; danach musst du entweder bezahlen oder sie in geringer Auflösung herunterladen. Bei der kostenlosen Version ist außerdem Werbung enthalten, aber im Großen und Ganzen ist das nicht schlecht für eine kostenlose Mockup-Website.

Preis:

  • Kostenloser Plan
  • 5 €/Monat (monatliche Zahlung)

Vorteile:

  • mühelos und einfach
  • der kostenlose Plan enthält 20 Bilder in hoher Auflösung
  • keine Wasserzeichen

Nachteile:

  • rudimentäre Funktionen
  • Bilder müssen woanders designt werden

Empfohlen für…

  • Leute, die Mediamodifiers Plattform mögen, aber nicht für die Entfernung des Wasserzeichens zahlen wollen

8. Moqups

Beispiel für Top-Mockup-Websites: Moqups
Screenshot vom Moqups-Editor

Moqups ist ein weiteres All-in-One-Programm zur Erstellung von Wireframes, Prototypen und natürlich Mockups. Der Editor ist eine gute Mischung aus erweiterten Funktionen und WYSIWYG-Bedienelementen und eignet sich sowohl für Einsteiger als auch Profis. Sie haben nur zwei Preismodelle, abhängig davon, wie viele User du hast. Daher zahlen Teams, die aus mehr als drei Personen bestehen, mehr.

Die User lieben Moqups dafür, dass sich damit so gut Flussdiagramme erstellen lassen, was zwar bei Mockups nicht wirklich hilfreich ist, dafür aber für den Designprozess insgesamt. Obwohl die Bedienung manchmal etwas schwerfällig ist, ist es im Großen und Ganzen eine annehmbare Alternative zu den anderen Mockup-Webseiten, besonders wenn du auch an der Erstellung von Wireframes und Prototypen interessiert bist.

Preis:

  • 16 $/Monat (jährliche Zahlung) [Pro – 3 Bearbeitende]
  • 49 $/Monat (jährliche Zahlung) [Unlimited – unbegrenzt viele Bearbeitende]

Vorteile:

  • ausgewogenes Designtool für Wireframes, Prototypen und Mockups
  • nutzerfreundlich genug für Einsteiger, umfangreich genug für Profis
  • hervorragende Planungsfunktionen wie Flussdiagramme, Site Maps und Storyboards

Nachteile:

  • eher etwas teurer

Empfohlen für…

  • Leute, denen Wireframes und Prototypen genauso wichtig sind wie Mockups

9. Smartmockups

Beispiel für Top-Mockup-Websites: Smartmockups
Screenshot vom Smartmockups-Editor

Smartmockups befindet sich in derselben Kategorie wie Mediamodifier und MockupsJar, verfügt aber über bessere Integrationen. Das spielt besonders dann eine große Rolle, wenn du in der Marvel App einen hochauflösenden Screenshot erstellt hast und ihn einfach auf einen Desktop-Hintergrund legen möchtest. Smartmockups hat auch mehr Personalisierungsfunktionen als die anderen Mockup-Webseiten. Es lassen sich zum Beispiel die Farben ändern, aber diese Funktion ist nur im kostenpflichtigen Plan enthalten.

Ebenso wie bei den anderen kostenlosen Mockup-Webseiten lässt sich auch hier nicht viel mehr tun, als dein Bild über eine Hintergrundvorlage zu legen. Die kostenpflichtige Version bietet über 6.000 Vorlagen für eine Vielzahl von Hintergrundbildern, einschließlich T-Shirts, Visitenkarten und digitale Geräte. Der kostenlose Plan bietet noch immer 800 Mockup-Vorlagen, welche allerdings ein Wasserzeichen aufzeigen.

Preis:

  • Kostenlose Version
  • 9 $/Monat

Vorteile:

  • lässt sich mit Marvel App, Dropbox, Figma, Unsplash und Canva nutzen
  • Bei den kostenpflichtigen Plänen kannst du das Bild individuell anpassen
  • schnell und einfach

Nachteile:

  • Beim kostenlosen Plan wird das Bild mit einem Wasserzeichen versehen
  • Die Bilder selbst müssen woanders designt werden

Empfohlen für…

  • Leute, die hauptsächlich mit Marvel, Canva oder Figma arbeiten

Warum nicht einen Profi engagieren?

Wie wir oben bereits gesagt haben, haben Mockups einzig und allein die Aufgabe, schick auszusehen. Wenn dein Erfolg stark von deinem Mockup abhängt, zum Beispiel wenn du einen unzufriedenen Stakeholder überzeugen musst oder mehr finanzielle Mittel für deine Idee brauchst, muss dein Mockup definitiv so gut wie möglich aussehen. In diesem Fall solltest du es einem Profi überlassen.

Wenn du jemanden aus der Design-Community von 99designs engagierst, legst du dein Mockup in die Hände eines Profis, der sich mit allen Feinheiten des Designs auskennt. Du musst dir keine Gedanken um Softwarepreise oder Lernkurven machen, da die Designer und Designerinnen sich für dich um alles kümmern. Und mit unserer weltweiten Design-Community kannst du dir sicher sein, jemanden mit genau dem Stil zu finden, nach dem du suchst!

Du benötigst ein professionelles Design für deine große Idee?
Unsere Design-Community kann dir dabei helfen!