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 - 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.

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

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

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

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

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

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

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

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

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

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 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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!