Apps und Websites schick präsentieren: Das sind die 7 besten Mockup-Tools
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.
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.
Im Folgenden stellen wir euch die beliebtesten Mockup-Tools vor. Sie alle sind grundsätzlich kostenlos nutzbar – teilweise aber mit eingeschränktem Funktionsumfang.
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 9,99 US-Dollar pro Monat.
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. Zudem gibt es mittlerweile auch Videos.
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 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
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.
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
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.
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 21. Juni 2024 grundlegend überarbeitet.
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.
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!
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.
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
Der einfachste Weg ist der hier:
http://mockupeverything.com
Ich nutze allerdings meistens die Mockups von: Pixeden.com
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
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?
http://mockflow.com ??
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
Vielen Dank, FrameApp von AppDemoStore hat mich üerzeugt! Einfach, kostenlos – damit werden die PSD Vorlagen Überflüssig!
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ß
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.
ShapeItApp erzeugt eine solche Arbeitsspeicherbelastung, dass der Browser abstürzt (Chrome und Firefox). Ziemlich geniale Beispiele, die Ihr da recherchiert habt…..
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 :)