Anzeige
Anzeige
Ratgeber
Artikel merken

Apps und Websites schick präsentieren: Das sind die 7 besten Mockup-Tools

Screenshot erstellen, in eine schicke Vorlage einfügen, fertig ist die Präsentation: Mit Mockup-Tools lassen sich Apps und Websites stilvoll in Szene setzen. Wir stellen euch die beliebtesten Dienste vor.

5 Min. Lesezeit
Anzeige
Anzeige

Screenshot per Drag & Drop einfügen und fertig ist das Mockup. (Bild: Smartmockups)

Hinweis: Wir haben in diesem Artikel Provisions-Links verwendet und sie durch "*" gekennzeichnet. Erfolgt über diese Links eine Bestellung, erhält t3n.de eine Provision.

Für Entwickler:innen und Designer:innen ist es wichtig, ihr Produkt schon vor dem ersten Download authentisch in Szene zu setzen und ein Stück weit „greifbar“ zu machen. Das gilt natürlich auch für Wireframes, die einen ersten Eindruck einer Website vermitteln sollen – egal, ob sie nur im Team oder direkt mit Kund:innen geteilt werden sollen. Wenn es schön aussieht, ist es schon schön.

Anzeige
Anzeige

Aber auch Marketer:innen oder Journalist:innen helfen Mockup-Tools, wenn es darum geht, ansprechende Bilder zu kreieren und nicht nur auf langweilige Screenshots zu setzen. Solche den realen Bedingungen nachempfundenen Produktpräsentationen können mithilfe von Online-Tools binnen weniger Minuten und mit wenig Klickaufwand erstellt werden – dafür müsst ihr weder mit Photoshop noch mit anderen Bildbearbeitungsprogrammen umgehen können.

Die beliebtesten Mockup-Tools im Überblick

Mockup-Tools gibt es wie Sand am Meer und nicht alle sind gleich. Das beginnt bei der Preisgestaltung: Manche Anbieter erlauben den kostenlosen Download, versehen das Bild aber mit einem Wasserzeichen, das nur gegen eine Gebühr entfernt wird. Wieder andere Mockup-Apps stellen nur einen Teil ihrer Bilder zum Gratis-Download zur Verfügung. Auch in Bezug auf die Geräteauswahl gibt es große Unterschiede – Smartphone-Mockups beinhalten nicht immer iPhone-Mockups oder aktuelle Geräte. Hier lohnt es sich, genauer hinzuschauen. Die meisten Mockup-Tools bieten auch unterschiedliche Designs an – das kann sich auf Gerätefarben beziehen, aber auch auf die Hintergründe. Vom freigestellten Gerät bis zu beruflichen und privaten Hintergrundszenarien sollte für jede:n das Passende dabei sein.

Anzeige
Anzeige

Im Folgenden stellen wir euch die beliebtesten Mockup-Tools vor. Sie alle sind grundsätzlich kostenlos nutzbar – teilweise aber mit eingeschränktem Funktionsumfang.

Anzeige
Anzeige

Placeit

PlaceIt ist der Platzhirsch unter den Mockup-Tools. (Foto: PlaceIt)

Placeit ist der Platzhirsch unter den Mockup-Tools. (Bild: Placeit)

Placeit* ist der Platzhirsch unter den browserbasierten Mockup-Diensten. Wer seine App oder sein Webprojekt stilvoll in Szene setzen will, kommt an der Lösung des Template-Marktplatzes Envato kaum vorbei. Die Auswahl ist riesig und überzeugt durch die Bank mit hoher Qualität. Per Drag & Drop lässt sich jeder Screenshot in ein authentisches Produktbild einbetten. Dabei stehen unterschiedlichste Kontexte vom Café übers Wohnzimmer bis hin zu abstrakten Präsentationsflächen zur Verfügung. Viele Bilder sind in einer Auflösung von 1920 x 1280 Pixeln gratis verfügbar und dürfen auch kommerziell genutzt werden. Wer druckfähige Auflösungen oder mehr Auswahl bevorzugt, zahlt 14,95 US-Dollar pro Monat oder 89,69 Dollar im Jahr.

Besonders praktisch: Der Funktionsumfang von Placeit geht über die reine Mockup-Erstellung hinaus und beinhaltet auch Elemente der Bildbearbeitung. Nutzer:innen können Bildausschnitte croppen oder drehen, Hintergrundfarben anpassen oder Logos und Text einfügen.

Anzeige
Anzeige

Smartmockups

Smartmockups bietet neben freigestellten Geräten auch eine große Auswahl an Szenarien aus allen Lebenslagen. (Bild: Smartmockups)

Wer neben einer großen Auswahl Wert auf gute Filtermöglichkeiten legt, sollte sich Smartmockups einmal ansehen. Das Go-to-Tool der t3n-Redaktion bietet über 8.000 teilweise kostenlose Mockups aktueller Geräte diverser Hersteller wie Apple oder Samsung. Dazu kommen verschiedene Betriebssysteme und Szenarien vom freigestellten Gerät über den Coworking-Space bis zum gemütlichen Abendessen. Kostenlos nutzbare Vorlagen können in mittlerer Bildqualität heruntergeladen werden. Wer mehr will, muss 14 Dollar im Monat oder 108 Dollar im Jahr bezahlen. Dafür gibt es dann mehr Funktionen, Video-Mockups und Branding-Möglichkeiten.

Shotsnapp

Shotsnapp setzt auch Webseiten in Browsern hübsch in Szene. (Screenshot: t3n.de)

Shotsnapp setzt auch Websites in Browsern hübsch in Szene. (Screenshot: t3n)

Shotsnapp aus Malaysia weiß im Vergleich zu vielen Konkurrenten mit einem durchdachten Design und hochwertiger Präsentation zu überzeugen. Auch technisch kann sich das Tool durchaus sehen lassen: Nutzer können zusätzlich zum Wunschgerät auch einen eigenen Hintergrund wählen, Farben definieren und ihre Mockups sogar mit individuellen Schriftzügen versehen. Grundsätzlich ist Shotsnapp für Nutzer:innen kostenlos. Es gibt jedoch einige wenige Einschränkungen. Wer beispielsweise mehrere Bilder oder Objekte in einem Mockup abbilden will, muss eine Jahreslizenz für 36 Dollar erwerben.

Mockuphone

Mockup-Tools: Mockuphone ist kostenlos und beschränkt sich auf Geräte-Vorlagen bekannter Smartphones. (Bild: Mockuphone)

Wer nicht allzu großen Wert auf authentische Produktbilder mit Stockfoto-Charme legt, ist mit Mockuphone an der richtigen Adresse. Der Onlinedienst bettet Screenshots in Smartphone-Gewänder bekannter Hersteller ein. Nutzer:innen wählen das gewünschte Gerät aus und laden die jeweiligen Screenshots einfach per Drag & Drop hoch. Das generierte Produktbild könnt ihr dann in allen Variationen als ZIP-Datei herunterladen – eine Voransicht gibt es allerdings nicht. Der Service ist kostenlos.

Anzeige
Anzeige

Mockuper

Eine tolle Alternative zu den gebührenpflichtigen Mockup-Tools: Mockuper. (Foto: Mockuper)

Eine tolle Alternative zu den gebührenpflichtigen Mockup-Tools: Mockuper. (Foto: Mockuper)

Mit einer großen Auswahl ohne anfallende Kosten kann Mockuper überzeugen. Der Dienst bietet neben Smartphone- und Tablet-Mockups auch zahlreiche Vorlagen für Werbetafeln, Fernseher oder Wandbilder. Die Geräte sind nicht immer auf dem neuesten Stand – wer Mockuper nutzen will, sollte also genau hinschauen.

Besonders praktisch: Mockuper hat Vorlagen mit mehreren Devices im Angebot, die alle unterschiedlich „befüllt“ werden können.

Multi Device Website Mockup Generator

Wenn es schnell gehen muss: Greif zum Multi Device Website Mockup Generator. (Screenshot: t3n.de)

Wenn es schnell gehen muss: Greif zum Multi Device Website Mockup Generator. (Screenshot: t3n)

Wer nur mal schnell sehen will, wie eine Website auf verschiedenen Apple-Geräten aussieht, sollte zum Multi Device Website Mockup Generator greifen. Nutzer:innen geben einmal die korrekte URL einer beliebigen Website ein und schon erscheint sie in der iMac-, iPhone-, Macbook- und iPad-Vorlage. Der Dienst ist kostenlos.

Anzeige
Anzeige

Previewed

Previewed bringt zwar keine Alltagsszenarien, dafür könnt ihr die Geräte aber so einfärben, wie ihr wollt – unabhängig von der Realität. (Bild: Previewed)

Wer es etwas abstrakter mag und keinen Wert auf lebensnahe Szenarien liegt, könnte mit Previewed glücklich werden. Nutzer:innen können Apple-Geräte so einfärben, wie sie es sich wünschen – ob es das Device so im Handel gibt, spielt keine Rolle. Hintergründe und Bildausschnitte lassen sich ebenfalls anpassen. Wer mit Previewed arbeiten möchte, muss sich auf der Seite registrieren. Kostenlos können Mockups in einer Auflösung von 720p heruntergeladen werden, die dann unter einer „CC BY 3.0 DE“Lizenz verwendet werden dürfen. Gegen eine Einmalzahlung von sieben Dollar gibt es eine höhere Auflösung, mehr Bearbeitungsmöglichkeiten, Mockup-Videoclips und fünf Downloads. Ab 19 Dollar im Monat kostet es, wenn ihr unbegrenzt viele Mockups herunterladen und Videos mit höherer Framerate erstellen wollt.

Haben wir ein Mockup-Tool in dieser Auflistung vergessen? Sagt es uns in den Kommentaren!

Dieser Artikel wurde am 29. September 2021 grundlegend überarbeitet.

Mehr zu diesem Thema
Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
14 Kommentare
Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Tim Edelmann

Hi,

ich benutze Mockabilly (http://www.mockabilly.com/) um dem Kunden direkt auf dem Device ohne vorhergegangene Entwicklung interaktiv zeigen zu können wie es später aussehen könnte. So wird die Kundenpräsetnation lebendiger weil auch er sich schon im Vorfeld durch seine app navigieren kann.

Gruß,
Tim.

Antworten
Oli

Um Leuten zu zeigen, wie ihre Webseite auf Mobil-Geräten wirkt, nutze ich das hier http://lab.maltewassermann.com/viewport-resizer/ Wirklich absolut genial!

Antworten
Smartphones und kleine Screens

Man muss auch herausfinden welche Tools die Kunden wirklich benutzen und kennen um sich verbal und konzeptionell in deren Denkwelt zu bewegen.
Die Mitarbeiter haben vielleicht nur ein Android-2-Handy während Big-Boni-Boss mit einem Ipad herumläuft weil er seine Brille nicht trägt und auf dem Iphone alles zu klein ist. Die Mockups müssen dann also für Androids und iOS und bald auch noch Win8Phone und SmarTVs(1920×1080) gestyled sein und möglichst keine Fehler enthalten.

Antworten
Steve

Wie sieht´s denn mit den Rechen aus? Ich würde solche Grafiken ja nicht nur gern Kunden zeigen, sondern ggfs. auch abdrucken bzw. auf Webseiten zeigen.
Kennt da wer Mockups, die man 1. vom Ersteller benutzen darf und 2. nicht so sehr iPhones o.Ä. ähneln, wo der Hersteller Ärger machen könnte?

Schöne Grüße

Steve

Antworten
ThinkingShip

Der einfachste Weg ist der hier:
http://mockupeverything.com

Ich nutze allerdings meistens die Mockups von: Pixeden.com

Antworten
Arne

Möchte hier auch mal was für Oldschool Designer anbieten, UIStencils (nein ich bekomme dafür kein Geld ;) ). Finde die Schablonen nur einfach sehr nett für das Wireframen von Anwendungen: http://tinyurl.com/pu5ultg

Antworten
nichauser

Wow eigentlich genau das was ich in nächster Zeit gesucht hätte, das ist ja mal ein passender Zeitpunkt.
Ein wirklich toller Artikel, mit interessanten Vorschlägen und Seiten die ich mir aufjedenfall mal genauer anschauen werde.

Jedoch hat Steve mit seinem Kommentar eine interessante Frage, die mich auch intressieren würde, eingebracht. Wie sieht es denn aus mit den Rechten? Darf ich diese Bilder dann auch auf meiner Webseite abbilden oder muss ich dafür irgendwas spezielles beachten?

Antworten
Chris

Ich nutze Antetype, damit habe ich die gestalterischen Möglichkeiten von Photoshop kombiniert mit sehr mächtigen Layout-Tools, wie z.B. responsive design features:

http://www.antetype.com

Antworten
Sisalteppich

Vielen Dank, FrameApp von AppDemoStore hat mich üerzeugt! Einfach, kostenlos – damit werden die PSD Vorlagen Überflüssig!

Antworten
Dirk

Hallo Steve, nichauser,
bei InstaMockup dürft ihr die Bilder komplett verwenden, sowohl auf Euren Seiten, Blogs etc., als auch kommerziell. Wir arbeiten dazu direkt mit Fotografen im Team und stellen sicher, dass wir die Rechte unserer Bilder haben.
Gruß

Antworten
Carsten Braun

Benutze auch schon mal das hier:
HubSpot’s Device Lab (beta)
http://snippets.hubspot.com/hubspot-device-lab
Das Beste was ich in dieser Richtung bisher gefunden habe. Vor allem zum testen.
Habe jetzt auch InstaMockup auf dem iPad getestet. Wirklich gelungen – nur Schade, dass es so wenige Vorlagen gibt.

Antworten
jr2015

ShapeItApp erzeugt eine solche Arbeitsspeicherbelastung, dass der Browser abstürzt (Chrome und Firefox). Ziemlich geniale Beispiele, die Ihr da recherchiert habt…..

Antworten
akkumulator1

Ich habe mit http://mockdrop.io/ auch eine kostenlose mockup Alternative entwickelt. Da die Bilder zu 100% im Browser verarbeitet werden, können ihre Mockups nicht von Dritten abgegriffen werden.
Jede Woche füge ich neue Bilder hinzu.
Viel Spaß damit :)

Antworten

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team von mehr als 75 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Anzeige
Anzeige