Mockups erstellen: Projekte visualisieren und erfolgreichen präsentieren!

Janina Horn
von Janina Horn
11. August 2023
13 mal geteilt
Redaktioneller Hinweis: Hier findest du das Autorenprofil von Janina Horn. Als Autor hat sich Janina Horn umfassend mit dem Thema auseinandergesetzt und teilt hier Erfahrungen und seine/ihre persönliche Expertenmeinung.
Mockups erstellen: Projekte visualisieren und erfolgreichen präsentieren!

Mockups erstellen gehört für viele App- und Webseiten-Designer schon fast zum Alltag. Das Angebot der Anbieter ist groß und unübersichtlich.

Nicht erst seit die KI-Tools den Markt für Bilderstellung und Design komplett umgekrempelt haben gibt es mit Mockup-Tools spannende digitale Werkzeuge, um Mockups zu erstellen.

Wenn du dich also fragst: Wie soll man sich da als Anfänger oder sogar als Fortgeschrittener auskennen und das beste Tool ausfindig machen?

Hierbei hilft dir dieser Artikel. Denn Mockups erstellen ist weder schwierig, noch erfordert es Kenntnisse im Bereich Photoshop oder sogar dem Coden . Die Tools, die du hier findest kannst du auch bedienen, wenn du überhaupt keine Ahnung von Photoshop hast. Damit steht der erfolgreichen Präsentation deines Produktes über Mockups nichts mehr im Wege!

Mockup erstellen was ist das

Mockup - was ist das?

Wenn du nicht genau weißt, was sich hinter dem Begriff “Mockup” verbirgt - kein Problem!

Mockup bedeutet auf deutsch “Attrappe” oder “Nachbildung” und ist die Bezeichnung für einen digital gestalteten Entwurf einer Webseite oder einer App. Quasi wie die Darstellung eines Prototypen für deine Webseite. Hierbei geht es darum, die Webseite so gut wie möglich zu gestalten inklusive der Navigationsstruktur, Site- und Design-Elementen im Detail.

Primär geht es hier darum, eine Webseite von Anfang an so aufzubauen, dass die Usability und User Experience möglichst hoch bzw. gut sind.

Oftmals geschieht das durch einen Screenshot eines Produktes, einer Anwendung in der App etc. der dann hochwertig z.B. auf einer Webseite oder im Bildschirm eines Smartphones angebracht wird, um dem Kunden die Visualisierung der Nutzung des Produktes zu erleichtern.

Mockup erstellen wann wofuer

Wann & Wofür brauche ich ein Mockup?

Besonders wenn du Entwürfe vor Kunden präsentieren möchtest, lohnen sich Mockups. Denn eine Darstellung des fertigen Produkts bzw. der Webseite macht den Entwurf haptischer und greifbarer und damit für den Kunden besser zu beurteilen.

Und dabei geht es nicht nur um Kunden wie Investoren, sondern zum Beispiel auch um die Nutzer einer App, die sich vor dem Herunterladen die Bilder, die im Google Play bzw. App Store hinterlegt sind, anschauen.

Alles in allem schadet es auf jeden Fall nicht, wenn du eine ansprechende Präsentation deiner Webseite, deines Produktes oder deiner App an der Hand hast.

Und da es inzwischen genügend Tools gibt, die sich mit dem Thema beschäftigen, findest du unter ihnen bestimmt einen Anbieter, mit dem du Mockups erstellen willst.

Mockup erstellen leicht gemacht mit diesen Anbietern!

Für Mockups gibt es sehr viele Anbieter auf dem Markt. Manche eignen sich nur für einen schnellen Prototypen einer App oder Webseite und mit anderen kannst du professionelle Mockups nicht nur für Apps und Webseiten, sondern auch für T-Shirts, Twitch-Panels, Produktverpackungen und viel mehr designen. Schau dir unsere Anbieter einfach mal an und entscheide dann, welcher dir am meisten zusagt.

Smartmockups

Mockups erstellen Smartmockups

Smartmockups ist nicht nur für einfache Mockups von Webseiten geeignet, sondern bietet auch das Produktdesign über T-Shirts, Business-Cards, Bücher, Plakatwänden, Produktverpackungen, Tassen uvm. an.

  • Mockups für: Technologie, Soziale Medien, Print, Verpackung, Haus & Dekor oder Bekleidung
  • Mit erweiterter Funktion noch mehr Möglichkeiten
  • Kostenlos für die ersten 200 Mockups

Placeit

Mockups erstellen Placeit

Placeit bietet mit den größten browserbasierten Service an, mit dem du Mockups erstellen kannst.

  • Mockups für Apps, Webseiten, T-Shirts, Twitch-Panels, viele Arten von Kleidung uvm.
  • Fast 60.000 Templates zur Auswahl
  • Einfaches Drag&Drop-System
  • Kostenlos bzw. bei besserer Auflösung ab 8€ pro Mockup

Screely

Mockups erstellen Screely

Mit Screely kannst du sofort Mockups für Webseiten erstellen.

  • Nur für Webseiten geeignet
  • Kein Photoshop oder Sketch notwendig
  • Hintergrund anpassen inkl. Farbe
  • Kostenlos

Screenpeak

Mockups erstellen Screenpeek

Ein Mockup mit Screenpeak kannst du sowohl von deinem iPhone, iPad und MacBook als auch deinem iMac erstellen. Achtung aber, dieser Anbieter eignet sich nur für iOS-Nutzer!

  • Nur für das Erfassen von Webseiten geeignet
  • Einfach per URL
  • Nur Nutzung per iPhone kostenlos

Shotsnapp

Mockups erstellen shotsnapp

Shotsnapp eignet sich zum Erstellen von Mockups für Apps, Websites, Designs und Produkte.

  • Einfaches und intuitives Erstellen von Mockups
  • Verschiedene Schriftarten, Geräte und Fotos verfügbar
  • Bereits fertige Templates zur Auswahl
  • Kostenlos

Mockupsjar

Mockups erstellen MockupsJar

Bei Mockupsjar kannst du innerhalb von 3 Schritten schnell und einfach ein Mockup erstellen, ohne dass du Photoshop oder ein Plugin brauchst.

  • Über 711 Möglichkeiten für Mockups: Webseiten, Apps, Business Cards uvm.
  • Kostenlos

Mockuper

Mockups erstellen Mockuper

Mockuper ist ein simples, aber effektives Tool zum Erstellen von Mockups.

  • Geeignet für: Webseiten, Apps, Wearables (Fitnessuhren), Business Cards
  • Kostenlos

Mediamodifier

Mockups erstellen Mediamodifier

Bei Mediamodifier dreht sich alles um die Präsentation. Die Mockups, die du mit diesem Anbieter erstellen kannst, eignen sich besonders gut als Marketing Visuals für Social Media, Blogs, Ads und mehr.

  • Über 2000 Mockup-Templates
  • Kostenlos mit Option auf kostenpflichtiges Update

Dimmy.club

Dimmy club Mockups erstellen

Dimmy.club eignet sich vor allem dann für dich, wenn du dein Mockup auf dem Display eines Laptops, Tablets oder eines Smartphones präsentieren möchtest.

  • Passend bei Mockups für Webseiten und Apps
  • Geeignet für simple, cleane und elegante Mockups
  • Kostenlos

MockUPhone

Mockups erstellen MockUPhone

Mit MockUPhone kannst du Mockups mit verschiedenen Devices von Apple und Android sowie auf Laptops, Tablets und TV erstellen.

  • Geeignet für: Webseiten und Apps
  • Kostenlos

Mockuuups Studio

Mockups erstellen Mockuuups Studio

Bei Mockuuups Studio handelt es sich um ein Drag-and-Drop-Tool, das sich vor allem für die Darstellung von Apps und Webseiten auf dem Smartphone eignet.

  • 600+ Mockup-Möglichkeiten
  • Download verfügbar für Mac, Windows und Linux
  • Kostenlos

Cleanmock

Mockups erstellen Cleanmock

Cleanmock ist ein sehr simples Tool für Mockups im Bereich Webseite und App.

  • Mockups für: Android, iOS, App Store, Play Store, Web, Dribbble
  • Kostenlos

Mockup Photos

Mockups erstellen Mockup Photos

Bei Mockup Photos kannst du bis zu 1.600 Templates für Mockups auf Smartphone, Tablet oder Laptop nutzen.

  • Drag & Drop-System
  • Kostenlos; Kostenpflichtig für bessere Auflösung (ab 99 US-Cent)

Mockdrop

Mockups erstellen MockDrop

Mit Mockdrop kannst du Mockups erstellen und auf dem Bildschirm eines TV, Laptop, Tablet, Desktop oder einer Watch darstellen.

  • Kein Upload der Bilder notwendig
  • Kostenlos

Magic Mockups

Mockups erstellen Magic Mockups

Magic Mockups bietet einen sehr kleinen, aber dafür hochwertigen Service an. Deine Mockups kannst du auf den Bildschirm eines Laptops, Smartphones, Tablets oder iMacs einblenden.

  • Kostenlos

Multi Device Website Mockup Generator

Mockups erstellen Multi Device Website Mockup Generator

Wie der Name Multi Device Website Mockup Generator schon vermuten lässt, kannst mit diesem Anbieter das Mockup einer Webseite auf einem Laptop-, Tablet- und Smartphone-Bildschirm erstellen.

  • Geeignet für einen kurzen Eindruck, wie die Webseite auf dem jeweiligen Gerät aussieht
  • URL einfügen und los geht’s
  • Sonst keine weiteren Features
  • Kostenlos

Artboard Studio

Mockups erstellen Artboard Studio

Mit Artboard Studio kannst du ganz einfach professionelle Mockups erstellen.

  • Geeignet für Webseiten, Apps, T-Shirts uvm.
  • Eigene Templates erstellen oder bereits Fertige nutzen
  • Kostenlos

Axure

Mockups erstellen Axure RP

Axure ist ein Tool, das sich für den professionellen Gebrauch eignet. Du kannst mit ihm nicht nur Wireframes sondern eben auch Mockups erstellen. Insgesamt bietet die Axure RP eine große Auswahl an verschiedenen Tools.

  • Viele Vorlagen und vorgefertigte Elemente
  • Auch für komplexere Mockups geeignet
  • Ergänzung durch Fußnoten, Kommentare und Erklärungen
  • Erstellung von Klickdummys möglich
  • 30 Tage kostenlos, danach kostenpflichtig

Moqups

Mockups erstellen Moqups

Moqups ist sowohl für iOS, Android, Web und Windows als auch Mac geeignet.

  • Drag & Drop System
  • Zeichenfläche und Schablonen für sauberes Arbeiten
  • Erstellung von Klickdummys möglich
  • Kostenlos mit kostenpflichtiger Option

PicApp

Mockups erstellen PicApp

PicApp hat einen sehr cleanen Aufbau, ermöglicht dir aber hochwertige Mockups für Apps.

  • Verschiedene Smartphone-Modelle, z.B. Apple iPhone 6S Gold oder Google Pixel Silver etc.
  • Kostenlos

AppLaunchpad

Mockups erstellen AppLaunchpad

Mit AppLaunchpad kannst du Screenshots und Mockups für den Google Play Store und den App Store erstellen.

  • Viele Templates und Hintergründe verfügbar
  • Kostenlos

Balsamiq

Mockups erstellen Balsamiq

Das Tool von Balsamiq kannst du sowohl herunterladen, als auch als Web-Version verwenden. Das heißt, dass du online und offline Mockups erstellen kannst.

  • Einfache und intuitive Bedienung, auch für Anfänger im Bereich Mockups
  • 30 Tage kostenlos testen
  • Danach Nutzung nur mit kostenpflichtiger Variante möglich

Mockingbird

Mockups erstellen Mockingbird

Mockingbird kannst du ganz einfach als webbasierte Anwendung nutzen und musst nichts herunterladen.

  • Für Anfänger und Fortgeschrittene geeignet
  • 90 Module, Vorlagen und Elemente verfügbar
  • Simultanes Seiten erstellen für einen besseren Überblick über die Performance der Mockup-Seiten
  • Kostenlos
Mockups erstellen Photoshop

Mockup Tool oder doch lieber Photoshop?

Wie du siehst, kannst du auch mit Mockup Tools durchaus ein ansehnliches Ergebnis erreichen. Die Bedienung ist einfach und die Resultate definitiv einer Präsentation wert.

Allerdings hängt die Entscheidung Mockup Tool oder Photoshop auch sehr stark davon ab, was du präsentierst bzw. worauf es hierbei ankommt. Photoshop zu verwenden ist deutlich aufwendiger, kann sich aber je nach Produkt lohnen. Wenn der Design- und Planungs-Aspekt des Produktes einen sehr großen Teil ausmacht, kann es sich auch lohnen, wenn du den arbeitsintensiveren Weg wählst und auf Photoshop zurückgreifst.

Aber hier ist auch die Frage: Wenn du ein solches Produkt entworfen hast - musst du dann überhaupt auf Tools zurückgreifen, um ein Mockup zu erstellen, oder bist du nicht sowieso schon bei Photoshop zu Hause?

Und selbst wenn du Photoshop in und auswendig kennst, spricht ja nichts dagegen, Mockup Tools als Basis oder Inspiration zu nutzen, um dir die Arbeit zu erleichtern!

Wie du siehst, lohnt es sich eigentlich für Jeden, Mockups über ein Tool zu erstellen. Egal ob blutiger Anfänger oder eingefleischter Vollprofi!

Was hältst du von der Möglichkeit, Mockups mit einem Tool zu erstellen? Nutzt du Eins dieser Tools oder vielleicht sogar eins, das hier noch fehlt? Schreib mir deine Meinung zu dem Thema und Tool-Vorschläge gerne in die Kommentare!

Wenn du mehr über die Möglichkeiten der Digitalisierung für Selbständige wissen willst, dann schau gerne in die entsprechende Kategorie auf Digital-Affin für mehr Inspiration!

Anzeige

Ich möchte dich darauf hinweisen, dass dieser Beitrag Affiliate-Links oder andere Link-Kooperationen enthalten kann. Damit finanzieren wir unser Blog-Projekt. Kooperationen haben allerdings keinen Einfluss auf die sorgfältig redaktionell erarbeiteten Texte. Als Blogger schreiben wir über unsere Erfahrungen und die eigene Meinung.

4 Kommentare

  • Zunächst mal lieben dank für zusammen Stellung von so vielen Tools, die größten teils auch noch kostenlos zur Verfügung stehen. Leider suche ich mehr Informationen über Mockups bzw. klick Dummys in Photoshop um digitale Sachen für mich besser visualisieren zu können für das anschließende erstellen von Landingpages und Websites. Aber wer weiß, vielleicht greife ich noch auf ein anderes Tool zurück
  • Hey Anja,

    besten Dank für deinen Kommentar.

    Vielleicht helfen dir auch Online-Whiteboards weiter. Dort kannst du alle möglichen Inhalte hochladen und visualisieren. Miro, Figma, etc. heißen die. Findest du ansonsten auch hier: https://www.digital-affin.de/blog/online-whiteboard-tools/

    Ansonsten beschreib gern nochmal genauer, was du vorhast, vllt fällt mir noch ein passendes Tool für dich ein.

    Grüße
    Jan
  • Hallo Jan,

    sehr spannend welche technischen Möglichkeiten die Digitalisierung so mit sich bringt. Kannte diese Art von Tools bisher gar nicht. Wenngleich ich sie wohl eher nicht brauche dank WordPress und Gimp ;)

    Viele Grüße
    Ronny
  • Hey Ronny,

    danke für deinen Kommentar. Wie meinst du das, dass du Wordpress und Gimp dafür hast? Gimp als Fotoprogramm erklärt sich mir noch halbwegs.. stelle mir das aber sehr aufwendig vor, darin immer wieder unterschiedliche Mockups zu erstellen. Da sind die Mockup Generatoren doch viel einfacher!?

    Schreib gern mal, wie dein Tipp zu deinem Prozess ist :-)

    Grüße

    Jan

Was denkst du?

Hi, hier blogge ich mit meinem Team. Mein Name ist Jan, Digital Native und fasziniert von Apps und Tools der Digitalisierung.

Mit unseren Beiträgen geben wir Inspiration, was sich sinnvoll digitalisieren lässt und erbringen damit unseren Beitrag zur Digitalisierung.

Dieser Blog wird betreut von meiner Digitalagentur Inboundly, mit der wir uns auf Blog Marketing spezialisiert haben.

Mehr zu mir findest du unter www.jansiebert.org

© 2024. Projekt von Inboundly | Blog-CMS von Chimpify | Impressum | Datenschutz
..