t3n News Entwicklung

Mit diesen 12 Mockup-Tools, setzt du deine App in Szene

Mit diesen 14 Mockup-Tools setzt du deine App stilvoll in Szene

Ein richtig gutes App-Design ist für Startups, Coder und Designer viel wert – es mit schicken Produkt-Screenshots überzeugend in Szene zu setzen, aber noch viel mehr. Wir stellen die zwölf besten Mockup-Tools vor.

Mit diesen 14 Mockup-Tools setzt du deine App stilvoll in Szene

Mockup-Tools. (Foto: Dunnnk)

Mockup-Tools im Überblick

Für Entwickler wie Designer ist es daher wichtig, ihr Produkt schon vor dem ersten Download authentisch in Szene zu setzen und ein Stück weit „greifbar“ zu machen. Ob auf Landingpages oder in Presskits – nichts hilft dem Kunden die zu Beginn mehr zu verstehen, als ein schickes Mockup.

Solche den realen Bedingungen nachempfundene Produktpräsentationen können mithilfe von Web-Diensten binnen weniger Minuten und oft mit noch weniger Klickaufwand erstellt werden. Wir stellen euch die aktuell besten Tools vor.

1. PlaceIt

Mockup-Tools: PlaceIt ist der Klassiker. Extrem vielseitig, aber auch extrem teuer. (Foto: PlaceIt)
PlaceIt ist der Klassiker. Extrem vielseitig, aber auch extrem teuer. (Foto: PlaceIt)

PlaceIt ist der Platzhirsch unter den browserbasierten 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 auch durch die hohe Qualität. Per Drag & Drop lässt sich jeder Screenshot in einem authentischen Produktbild einbetten.

Nach anfänglicher Kostenlos-Strategie hat sich PlaceIt inzwischen einer Moneratisierungskur unterzogen. Kostenlos ist das Bild nur mit einer mageren Auflösung von 400 x 300 Pixeln (zum Beispiel iPhone). Wer höhere Auflösungen bevorzugt, zahlt zwischen acht und 100 Euro pro Mockup oder schließt ein monatliches Abonnement ab.

2. Scenery

Als native Mockup-App für den Mac kommt Scenery daher. (Foto: Scenery)
Als native Mockup-App für den Mac kommt Scenery daher. (Foto: Scenery)

Nicht als Online-Dienst, dafür aber als native App für den Mac kommt Scenery daher. Die App bietet eine beachtliche Auswahl an qualitativ hochwertigen Mockup-Vorlagen, die mit nur einem Klick um einen eigenen Screenshot von einer App oder Website bestückt werden können. So stehen neben üblichen Motiven wie Mac und iPhone auch Vorlagen für die Apple Watch zur Verfügung. Scenery bietet ein kostenloses Starter-Pack bestehend aus einer Handvoll Motiven für iPad, iPhone und Mac an. Wer mehr Hintergründe möchte, kann diese in der App für bis zu 60 US-Dollar pro Paket erwerben.

3. InstaMockup

Mockup-Tools: InstaMockup aus Deutschland positioniert sich als günstige PlaceIt-Alternative. Allerdings ist die Usability durch die alleinige iOS-App etwas umständlich. (Foto: InstaMockup)
Mockup-Tools: InstaMockup aus Deutschland positioniert sich als günstige PlaceIt-Alternative. Allerdings ist die Usability durch die alleinige iOS-App etwas umständlich. (Foto: InstaMockup)

Ein aus Deutschland stammender Dienst zum Erstellen von Produkt-Screenshots ist InstaMockup. Die Auswahl der verfügbaren Bilder hält bisher eine noch recht überschaubare Auswahl von Produktumgebungen (Mac, iPhone, iPad) bereit, die jedoch hinsichtlich der Qualität überzeugen und durchaus mit PlaceIt mithalten kann.

Der Clou ist aber zugleich das größte Manko: InstaMockup kann man nur auf dem iPhone und dem iPad nutzen, was vor allem im Hinblick auf die Bedienbartkeit große Fragezeichen aufwirft. Immerhin: Der Dienst ist bislang weitgehend kostenlos, nur bei druckkonformen Auflösungen werden 1,99 Euro pro Bild fällig.

4. ShapeItApp

Mockup-Tools: ShapeItApp überzeugt mit einer großen Auswahl – einmal hochgeladen, werden Mockups zudem automatisch für alle verfügbaren Bilder generiert. (Foto: ShapeItApp)
Mockup-Tools: ShapeItApp überzeugt mit einer großen Auswahl – einmal hochgeladen, werden Mockups zudem automatisch für alle verfügbaren Bilder generiert. (Foto: ShapeItApp)

Eine Alternative zu PlaceIt ist auch ShapeItApp. Der Web-Client bietet sowohl Einzelvorlagen für Smartphones (iPhone, BlackBerry, Nexus) und Mac-Computer als auch solche in realen Umgebungen an. Vorweg: Um ShapeItApp zu nutzen, muss browserseitig die WebGL-Unterstützung aktiviert (Safari) oder alternativ der Google Chrome Browser genutzt werden.

Ein anschließend hochgeladener Screenshot wird unabhängig von Seitenverhältnis und Auflösung durch ShapeItApp passend für jedes Gerät konvertiert. Das gewünschte Mockup kann dann kostenlos in hoher Auflösung heruntergeladen werden. Achtung: Laaaaaangsam!

5. Place.to

Mockup-Tools: Place.to bietet eine große Auswahl für vergleichsweise wenig Geld. (Foto: Place.to)
Mockup-Tools: Place.to bietet eine große Auswahl für vergleichsweise wenig Geld. (Foto: Place.to)

Auch Place.to bleibt dem Drag-and-Drop-Prinzip treu und bindet Screenshots im Handumdrehen in fotorealistische Mockups ein. Insgesamt stehen mehr als 200 unterschiedliche Motive – vom 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 US-Dollar fällig.

6. 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 kann man sich die Bilder in allen Variationen dann als .ZIP-Datei zusenden lassen. Der Service ist kostenlos.

7. Mockdrop

Mockup-Tools: Mockdrop ist kostenlos und bietet tolle Motive. (Foto: Mockdrops/t3n)
Mockup-Tools: Mockdrop ist kostenlos und bietet tolle Motive. (Foto: Mockdrops/t3n)

Ein kostenloser Service zum Erstellen von Mockups nach dem Drag-and-Drop-Prinzip kommt mit Mockdrop daher. Derzeit gibt es etwa 20 Vorlagen für Apple-Geräte. Die Bilder sollen nur im Browser verarbeitet werden, sodass Mockups nicht von Dritten abgegriffen werden können. Im Wochenturnus kommen neue Bilder hinzu, wer möchte, kann sich per E-Mail benachrichtigen lassen.

8. Mockerie

Mockerie bettet auch Videos als Mockup ein und bietet Instagram-ähnliche Filterfunktionen an. (Foto: Mockerie)
Mockerie bettet auch Videos als Mockup ein und bietet Instagram-ähnliche Filterfunktionen an. (Foto: Mockerie)

Mockerie dürfte der jüngste Vertreter in der Riege von Mockup-Tools sein. Gerade erst wurde Mockerie auf Product Hunt vorgestellt und bietet bereits 100 unterschiedliche Motive – vom iPhone über den Laptop bis hin zum Tablet – an. Sogar Videos lassen sich in ein Mockup verpacken.

Die Besonderheit von Mockerie: Jedes erstellte Mockup kann mit verschiedenen Filtern versehen werden, wie man sie etwa aus Instagram kennt. Mockerie bietet ausgewählte Motive kostenlos an. Wer auf das gesamte Portfolio zugreifen will, zahlt allerdings 15 US-Dollar pro Monat als Gebühr.

9. Frame

Frame bietet Mockup-Vorlagen in 35 unterschiedlichen Varianten für viele Geräteklassen an. So zum Beispiel auch fürs Surface-Tablet von Microsoft. (Foto: Frame)
Frame bietet Mockup-Vorlagen in 35 unterschiedlichen Varianten für viele Geräteklassen an. So zum Beispiel auch fürs Surface-Tablet von Microsoft. (Foto: Frame)

35 unterschiedliche Motive – vom Apple- bis zum Android-Device – bietet der Online-Dienst um Frame an. Screenshots können wahlweise per Drag-and-Drop oder per manuellen Upload in die ansprechenden Motive eingebettet werden. Frame ist gänzlich kostenlos und auch die Mockups sind nach dem Download in ausreichend hoher Auflösung verfügbar.

10. Magic Mockups

Magic Mockups bietet sehr hochwertige Mockup-Vorlagen an. Erfreulich sind auch die hohen Auflösungen zum Nulltarif. (Foto: Magic Mockup)
Magic Mockups bietet sehr hochwertige Mockup-Vorlagen an. Erfreulich sind auch die hohen Auflösungen zum Nulltarif. (Foto: Magic Mockup)

Eine vergleichsweise kleine aber sehr hochwertige Auswahl bietet der Online-Dienst Magic Mockups an. Wer seine App oder Website in fotorealistischen Umgebungen von Macs, iPhone oder iPad einbinden will, findet hier einen einfachen und zuverlässigen Dienst. Screenshots lassen sich über den manuellen Upload einbinden und anschließend mit einer maximalen Auflösung von 1600 x 1067 kostenlos herunterladen. Zwar gibt es auch größere Auflösungen (bis zu 5.000 Pixel und mehr) kostenlos. Wegen hoher Serverbelastungen bitten die Macher in diesem Zuge allerdings um eine kleine Spende per PayPal.

11. PicApp

Ein Gerät, eine Hand, der Rest ist freigestellt: PicApp setzt auf Purismus. (Foto: PicApp)
Ein Gerät, eine Hand, der Rest ist freigestellt: PicApp setzt auf Purismus. (Foto: PicApp)

Der Webdienst PicApp ist augenscheinlich der Purist unter den Mockup-Diensten. Geräteausschnitt wählen, Bild hochladen und speichern! Zur Auswahl stehen erfreulicherweise nicht nur aktuelle iPhone-Modelle, sondern auch Smartphones anderer Hersteller (Samsung, Google, HTC, LG). Zudem stehen mit dem iPad, dem Lenovo Yoga und dem Google Nexus auch entsprechende Tablet-Schablonen zur Verfügung. Die kostenlose Auflösung (zum Beispiel 445 x 500 Pixel für iPhone) dürfte für professionelle Anwender zu klein sein. Hochauflösende Mockups gibt es für fünf US-Dollar.quit

12. Mockupsjar

Bei Mockupsjar stehen Insgesamt 24 unterschiedliche Motive zur Verfügung, darunter Apple-Produkte und sogar Bilderrahmen. (Foto: Mockupsjar)
Bei Mockupsjar stehen Insgesamt 24 unterschiedliche Motive zur Verfügung, darunter Apple-Produkte und sogar Bilderrahmen. (Foto: Mockupsjar)

Einen guten Eindruck hinterlässt auch Mockupsjar: Der Online-Dienst wirbt mit dem Versprechen „Create realistic mockups for your awesome website and mobile app in 3 steps. For free!“ und wird dem durchaus gerecht, allerdings mit einer vergleichsweise überschaubaren Auswahl. Insgesamt stehen 24 unterschiedliche Motive zur Verfügung, darunter Apple-Produkte und sogar Bilderrahmen. Die Mockups können mit einer Auflösung von bis zu 2560 Pixeln kostenlos heruntergeladen werden.

13. iSweetIt

Mit der iOS-App iSweetIt kommt man in wenigen Sekunden zum schicken Mockup. (Screenshot: t3n)
Mit der iOS-App iSweetIt kommt man in wenigen Sekunden zum schicken Mockup. (Screenshot: t3n)

Ähnlich wie InstaMockup ist auch iSweetIt eine speziell für iPhone und iPad konzipierte Anwendung, mit der sich binnen weniger Klicks schöne Mockups erstellen lassen. Die optische Qualität der gebotenen Motive macht einen sehr guten Eindruck, auch die Auswahl (es gibt neben Smartphones und Notebooks beispielsweise auch Plakat- und Notizzettel-Motive) sehen lassen. Eine Besonderheit gegenüber vergleichbaren Diensten stellen Bearbeitungswerkzeuge dar. Nervig sind lediglich die bei jedem Klick aufploppenden Werbebanner. Der Eimmalpreis für alle Motive in Höhe von 9,99 Euro ist aber akzeptabel

14. Dunnnk

Schicke und kostenlose Mockups für Apps gibt es auch bei Dunnnk. (Screenshot: t3n)
Schicke und kostenlose Mockups für Apps gibt es auch bei Dunnnk. (Screenshot: t3n)

Mit Dunnnk dürften Entwickler und Designer vollends auf ihrer Kosten kommen. Der neue Dienst ist vollständig kostenlos, bietet eine beachtliche Auswahl an schicken Motiven und bietet einmal erstellte Mockup in ausreichend hoher Auflösung zum Download an. Besonders erfreulich ist, dass endlich auch Mockups für die Apple Watch in Windeseile erstellt werden können.

Newsletter

Bleibe immer up-to-date. Sichere dir deinen Wissensvorsprung!

Vorheriger Artikel Zurück zur Startseite Nächster Artikel
20 Antworten
  1. von Tim Edelmann am 01.03.2013 (14:12 Uhr)

    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 Teilen
  2. von Oli am 01.03.2013 (14:36 Uhr)

    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 Teilen
  3. von Smartphones und kleine Screens am 01.03.2013 (18:49 Uhr)

    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(1920x1080) gestyled sein und möglichst keine Fehler enthalten.

    Antworten Teilen
  4. von Steve am 01.03.2013 (22:31 Uhr)

    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 Teilen
  5. von ThinkingShip am 02.03.2013 (01:17 Uhr)

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

    Ich nutze allerdings meistens die Mockups von: Pixeden.com

    Antworten Teilen
  6. von Arne am 01.04.2014 (06:58 Uhr)

    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 Teilen
  7. von nichauser am 01.04.2014 (09:12 Uhr)

    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 Teilen
  8. von Chris am 02.04.2014 (08:39 Uhr)

    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 Teilen
  9. von Sisalteppich am 02.04.2014 (11:25 Uhr)

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

    Antworten Teilen
  10. von Dirk am 02.04.2014 (11:30 Uhr)

    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 Teilen
  11. von Carsten Braun am 02.04.2014 (13:33 Uhr)

    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 Teilen
  12. von jr2015 am 04.08.2014 (15:28 Uhr)

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

    Antworten Teilen
  13. von akkumulator1 am 14.01.2015 (15:38 Uhr)

    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 Teilen
  14. von Thomas Peham am 06.02.2015 (08:58 Uhr)

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

    Antworten Teilen
  15. von Andre am 10.09.2015 (15:11 Uhr)

    Pffst! ;)
    Mockup World - und gut is': http://mockupworld.co

    Antworten Teilen
  16. von Jakelum am 21.09.2015 (17:11 Uhr)

    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 Teilen
  17. von Manuel Pistner am 11.05.2016 (10:45 Uhr)

    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 Teilen
  18. von Grfxpro am 31.05.2016 (12:56 Uhr)

    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 Teilen
  19. von Dhyey am 27.07.2016 (09:34 Uhr)

    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 Teilen
Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Mehr zum Thema Apps
Corporate Design: So setzen Gründer und Startups ihr Logo und Co. in Szene
Corporate Design: So setzen Gründer und Startups ihr Logo und Co. in Szene

Das Corporate Design fasst grafisch zusammen, wofür dein Unternehmen stehen will. Die Entwicklung ist oft teuer und aufwendig. Steht es dann endlich, gilt es, das volle Potenzial zu nutzen. » weiterlesen

Webentwicklung, UX-Design, Product Lead oder Grafik: Traum-Ferienwohnungen, CHECK24, RTL, Otto, myToys und mehr suchen neue Mitarbeiter
Webentwicklung, UX-Design, Product Lead oder Grafik: Traum-Ferienwohnungen, CHECK24, RTL, Otto, myToys und mehr suchen neue Mitarbeiter

Zweimal pro Woche verweisen wir hier auf aktuelle und interessante Jobangebote aus unserer Stellenbörse „t3n Jobs“. Heute können wir euch 27 Angebote aus den Bereichen „Entwicklung“ und … » weiterlesen

Design-Workflow mit dem iPad: 5 Apps, die euer Tablet zum perfekten Werkzeug machen
Design-Workflow mit dem iPad: 5 Apps, die euer Tablet zum perfekten Werkzeug machen

Wer seinen Design-Workflow optimieren will und ein iPad besitzt, kann das Gerät mit den richtigen Apps zum Grafiktablett machen, oder beispielsweise als zweiten Bildschirm nutzen. Wir stellen euch … » weiterlesen

Alle Hefte Jetzt abonnieren – für nur 35 €

Kennst Du schon unser t3n Magazin?