Was sind eigentlich Mockups?
Ich versuche mal den Begriff Mock-Up mit einfachen Worten aus der Fotografie und Bildbearbeitung zu beschreiben. Im ersten Schritt wird eine Fotografie erstellt, in der ein kleiner Bildbereich ausgetauscht werden kann. Das kann der Bildschirm eines Laptops sein. Der Laptop selber steht auf einem Schreibtisch in einem Raum. Das kann ein Bilderrahmen sein, der an der Wand hängt. Das kann ein Plakat an einer Litfaßsäule in einer Straße sein.
In einem weiteren Schritt wird in einem Bildbearbeitungsprogramm, in meinem Beispiel Photoshop, das Bild so bearbeitet, dass – bleiben wir beim Bespiel Laptop, der Bildschirm freigestellt wird. Dahinter wird eine veränderbare Smartobjektebene gelegt, die per Mausklick mit dem eigenen Bild ausgetauscht werden kann. So hat man die Möglichkeit, eigene Bilder in fremde Fotos so zu integrieren, dass dies echt wirkt, so als wenn man es schon so fotografiert hätte.
Der Vorteil dieser fertigen Mock-Up Bilder ist, dass man mit wenig Kenntnis über das Thema Freistellen unendlich viele Möglichkeiten hat, eigene Bilder bzw. Screenshots, zu integrieren.
Mockups sind nützliche Webdesign Tools
Mockups sind ein nützliches Mittel im Webdesign, um aus Ideen ein individuelles und passendes Design zu entwickeln Bei gut ausgearbeiteten Mockups ist es in der Regel nur noch ein kleiner Schritt zum pixelgenauen Webdesign, welches schliesslich als Vorlage für die Programmierung dient. Umfangreiche, mehrteilige Mockups können auch als Basis für Prototypen verwendet werden. Diese verhalten sich dann fast identisch, wie die fertige Website oder Webapplikation. In professionellen Mockup-Tools sind solche Möglichkeiten bereits integriert und sogenannte Click-Dummies relativ kostengünstig realisierbar.
Ein Mockup kommt während der Planung eines Webauftritts zum Einsatz. Mit der Hilfe eines Mockups kannst du deine neue Website sehr schnell und einfach visualisieren und erhälst einen ersten Eindruck von der Gestaltung und den Funktionalitäten deiner Website. Dazu brauchst du nicht eine Zeile Quellcode schreiben, da Mockups entweder auf Papier entworfen oder über sogenannte Mockup-Tools am PC realisiert werden.
Bei einem Mockup tritt das Design der Website in den Hintergrund. Hier geht es einzig und alleine darum, die verschiedenen Elemente deiner Website anzuordnen und somit einen optimalen Userflow zu realisieren. Im Fokus steht dabei die Planung der Interaktionsmöglichkeiten und Funktionen deiner Website.
Mockups dienen als Grundgerüst der Bedienelemente
Man kann sagen, dass es sich bei einem Mockup um ein Grundgerüst der Bedienelemente handelt. Dieses Grundgerüst besitzt keine weiteren Funktionalitäten. Durch die schematische Darstellung eines Mockups, kannst du dich auf das Wesentliche konzentrieren. Du erhälst viel schneller ein Gefühl dafür, ob deine Ideen umsetzbar sind oder ob am Grundkonzept noch weiter gefeilt werden muss. So bekommst du schon sehr früh ein Feedback und musst nicht mitten im Entwicklungsprozess dein Konzept komplett überarbeiten. Das spart Zeit, Geld und vorallem Nerven.
Wo findest du Anbieter für Mockup Dienste
1.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
2.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
3.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.
4.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.
5.Mockdrop
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.
6.Mockerie
Mockerie wurde ursprünglich mal auf der Discovery-Plattform Product Hunt vorgestellt. Der Dienst bietet 100 verschiedene Motive – vom iPhone über den Laptop bis hin zum Tablet – an. Sogar Videos lassen sich in ein Mockup verpacken. Nett: Jedes erstellte Mockup kann mit 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.
7.Magic Mockups
Eine 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 mit einer maximalen Auflösung von 1600 x 1067 gratis 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.
8.Picapp
Der Webdienst Picapp ist der Purist unter den Mockup-Diensten. Geräteausschnitt wählen, Bild hochladen und speichern! Zur Auswahl stehen immerhin 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.
9.Mockupsjar
Einen guten Eindruck hinterlässt auch Mockupsjar: Der Online-Dienst wirbt mit dem Versprechen „Erstelle realistische Mockups für deine Website und Mobile App in 3 Schritten. Kostenlos!“ 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.
10.Dunnnak
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.
11.Mockuper
Mit einer hochwertigen Auswahl ohne anfallende Kosten kann Mockuper überzeugen. Der nur im Chrome-Browser funktionierende Dienst bietet neben Smartphone- und Tablet-Mockups auch zahlreiche Vorlagen für Werbetafeln, Fernseher oder Wandbilder
Multi Device Website Mockup Generator
Wer nur mal schnell sehen will, wie eine bestehende Website auf verschiedenen Geräten aussieht, sollte zum Multi Device Website Mockup Generator greifen. Dort muss nur einmal die korrekte URL einer beliebigen Website eingegeben werden und schon erscheint sie in der iMac-, iPhone-, Macbook- und iPad-Vorlage. Kostenlos.
Du siehst also wie einfach und schnell du ein paar schöne Mockups für deine Webseite erstellen kannst. Probier es doch mal aus und erfreue dich dann am fertigen Ergebnis.
Verwendest du denn eigentlich Mockups und wenn ja wie setzt du sie denn auf deinen Blog ein?
Erzähl es mir und meinen Lesern. Ich würde mich sehr darüber freuen.
Herzlichst Eure Gabi
Willst du auch schöne Mockups erstellen die deine Webseite so richtig aufwerten und dich von anderen abheben? Dann habe ich da was für dich. IIn meiner Facebookgruppe Blogbusinessaufbau für Coaches , Solopreneure und Networker bist du herzlich willkommen.
hier gehts zur Facebookgruppe ⇒
Hier ist ein kleines Beispiel wie du Mockups verwenden kannst.