Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Ratgeber

15 praktische Mockup-Tools, um deine App in Szene zu setzen

    15 praktische Mockup-Tools, um deine App in Szene zu setzen

Mockup-Tools. (Foto: Dunnnk)

Mit dem richtigen Mockup-Tool lässt sich eine App stilvoll in Szene setzen. Wir stellen die beliebtesten Lösungen vor.

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. Ob auf Landingpages oder in Presskits – nichts hilft dem Kunden besser, mit einer App warm zu werden, als ein schickes Mockup. 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

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 durch die Bank mit hoher Qualität. Per Drag & Drop lässt sich jeder Screenshot in einem authentischen Produktbild einbetten. Gratis sind Bilder leider nur in mageren Auflösungen. Wer druckfähige Auflösungen bevorzugt, zahlt zwischen acht und 100 Euro pro Mockup oder schließt ein monatliches Abonnement ab.

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)

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.

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 Bedienbarkeit große Fragezeichen aufwirft. Immerhin: Der Dienst ist bislang weitgehend kostenlos, nur bei druckkonformen Auflösungen werden 1,99 Euro pro Bild fällig.

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.

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.

Finde einen Job, den du liebst

21 Reaktionen
savageacee
savageacee

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

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

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

Antworten
Thomas Peham
Thomas Peham

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

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

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

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

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

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

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

Ich nutze allerdings meistens die Mockups von: Pixeden.com

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

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
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
Bitte melde dich an!

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

Jetzt anmelden