Ratgeber

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

Mockup-Tools. (Foto: Dunnnk)

Screenshot erstellen, in Smartphone-Vorlage einfügen, fertig ist die Präsentation: Mit Mockup-Tools lassen sich Apps und Websites stilvoll in Szene setzen. Die beliebtesten Dienste im Überblick.

Für Entwickler wie Designer ist es wichtig, ihr Produkt schon vor dem ersten Download authentisch in Szene zu setzen und ein Stück weit „greifbar“ zu machen. Solche den realen Bedingungen nachempfundenen Produktpräsentationen können mithilfe von Online-Tools binnen weniger Minuten und mit wenig Klickaufwand erstellt werden.

Die beliebtesten Mockup-Tools im Überblick

Cleanmock

Clean Mockups: Das Tool bietet einige Gratis-Vorlagen, die nach einer Registrierung noch erweitert werden können. (Screenshot: Clean Mockups)

Clean Mockups: Das Tool bietet einige Gratis-Vorlagen, die nach einer Registrierung noch erweitert werden können. (Screenshot: Cleanmock)

Sehenswerte Mockups vom iPhone X über das Android-Telefon bis hin zur Designvorlage für eine Grafik im App-Store: Der Dienst Cleanmock bietet eine solide Auswahl kostenloser Mockups, die nach dem Drag-&-Drop-Prinzip in Sekunden erstellt werden können. Wer sich zudem registriert, erhält zusätzliche Vorlagen. Mit einem Bezahlabo erhöht sich der Funktionsumfang noch einmal.

Placeit

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

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

Placeit ist der Platzhirsch unter den browser-basierten Mockup-Diensten. Wer seine App oder sein Web-Projekt stilvoll in Szene setzen will, kommt an der hauseigenen Lösung des Website-Builders Breezi 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. Gratis sind Bilder leider nur in geringen Auflösungen. Wer druckfähige Auflösungen bevorzugt, zahlt zwischen acht und 100 Euro pro Mockup oder schließt ein monatliches Abonnement ab.

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

Frisch auf dem Markt für Mockup-Tools ist Shotsnapp. Der Anbieter 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 kostenlos. Es gibt jedoch einige wenige Einschränkungen. Wer beispielsweise mehrere Bilder oder Objekte in einem Mockup abbilden will, muss eine Jahreslizenz für 29 US-Dollar erwerben.

Mockup Photos

Mockup Photos kostet bei höheren Auflösungen etwas Geld. (Foto: Mockup Photos)

Mockup Photos kostet bei höheren Auflösungen etwas Geld. (Foto: Mockup Photos)

Auch Mockup Photos bleibt dem Drag-&-drop-Prinzip treu und bindet Screenshots im Handumdrehen in fotorealistische Mockups ein. Insgesamt stehen mehr als 200 unterschiedliche Motive – von Smartphone über Laptop bis hin zum Tablet – zur Verfügung. Analog zu Placeit sind auch hier nur Mockups in geringer Auflösung (420 Pixel in der Breite) kostenlos, für höhere Auflösungen werden je nach Preismodell zwischen 99 US-Cent und 49 Dollar fällig.

Mockuphone

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

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

Wer nicht allzu großen Wert auf authentische Produktbilder mit Stockfoto-Charme legt, ist mit Mockuphone an der richtigen Adresse. Der Online-Dienst bettet Screenshots in Smartphone-Gewänder bekannter Hersteller ein. Ähnlich wie Placeit können das gewünschte Gerät ausgewählt und die jeweiligen Screenshots einfach per Drag-&-drop hochgeladen werden. Anschließend erscheint eine Voransicht des generierten Produktbildes. Per E-Mail könnt ihr euch die Bilder in allen Variationen dann als ZIP-Datei zusenden lassen. Der Service ist kostenlos.

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

24 Kommentare
Tim Edelmann
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
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
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
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
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
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
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
Jens Richter

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

Antworten
akkumulator1
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
Thomas Peham

Ich benutze zusätzlich auch die iOS App http://www.isweetit.com/ – toll um direkt am Smartphone App-Screens zu erstellen.

Antworten
Andre

Pffst! ;)
Mockup World – und gut is‘: http://mockupworld.co

Antworten
Jakelum
Jakelum

So viele nette Werkzeuge für Mockup wurde erwähnt . Kürzlich viele kostenlose Tools zur Erstellung iphone oder ein anderes Gerät Mockup steht kostenlos zur Verfügung . Würde gerne einige von ihnen hier präsentieren
http://textycafe.com/23-iphone-6-mockup-psd-templates/

Antworten
Manuel Pistner

Vielen Dank für die Liste, sie gibt einen sehr guten Überblickl! Wir nutzen Balsamique und sind damit auch recht happy. Was ich vermisse ist ein Tool, in dem man zu den Mockups auch „User Stories“ für die Agile Entwicklung hinterlegen kann. Gibt es dazu ein Tool?

Antworten
Grfxpro
Grfxpro

Amazing list… thanks for sharing… I would like to add one more site that is providing mock-ups http://www.grfxpro.com

Try it.

Antworten
Dhyey
Dhyey

Thanks for sharing this amazing bunch of mockups.

I also have site which is having photo realistic and high definition in the store.

Have a look they are free of cost. If you like you make a nice use of it.

Way to GrfxPro – http://www.grfxpro.com

Antworten
savageacee
savageacee

check out my personal portfolio. i make a lot of free mockups – https://www.anthonyboyd.graphics

Antworten
graphiccloud
graphiccloud

Pffst! ;)
Creative Genie – und gut is‘: http://creativegenie.net

Antworten
damsaddm
damsaddm

sometimes finding mockups are very hard.
Check this out https://psdmockup.net/

Thanks

Antworten
Bene
Bene

Ich werfe mal noch https://graphicburger.com/ nach. Unbedingte Empfehlung ;-)

PS: Der Artikel scheint ja seit 2013 immer wieder aktualisiert worden zu sein >> hier würde ich mir eine deutlichere Kenntlichmachung wünschen.

Antworten
Abbrechen

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

Bitte schalte deinen Adblocker für t3n.de aus!

Hey du! Schön, dass du hier bist. 😊

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

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

Danke für deine Unterstützung.

Digitales High Five,
Stephan Dörner (Chefredakteur t3n.de) & das gesamte t3n-Team

Anleitung zur Deaktivierung