in Mockups sind Designs, bei denen ein eigentlich meist rein digitales Design so in einer analogen Umgebung präsentiert wird, dass der Effekt einer echten Alltagsdarstellung entsteht. Das kann von Logos auf Produktboxen über Schilder bis hin zu Visitenkarten-Designs auf verschiedenen Arten von Papier reichen. Seit einiger Zeit werden vermehrt aber auch Webseitendesigns auf Laptops, Handys und Tablets dargestellt.
Webseiten in ihrer natürlichen Umgebung – Laptop, Handy, Tablet
Mittlerweile gibt es eine ganze Reihe guter Anbieter, die kostenlose Ihre Seite in eine schöne Umgebung integrieren und das auch noch völlig automatisiert. Denn während man bei den meisten für Photoshop erhältlichen Mockup-Vorlagen darauf achten muss das darzustellende Quellmaterial in der richtigen Größe bereitzustellen, so bieten viel, auch kostenlose, Anbieter mittlerweile die Möglichkeit an, einfach die Webseiten-Adresse anzugeben. Die Seite wird dann automatisch in der richtigen Größe und dem richtigen Format als Bild gespeichert und in das Mockup integriert.
Update 2020: Smartmockups got even better!
https://smartmockups.com/mockups/multiple-devices?filter=free
Update: 2019 – Multi Device Mockup Maker von techsini.com
Auf der Webseite von Techsini findet man ein praktisches Tool, mit dem man zwar nur drei Mockup-Ansichten erstellen kann. Dennoch braucht man nur eine URL einzugeben, um sehr schnell ein durchaus sinnvolles Standard-Mockup zu erstellen. https://techsini.com/multi-mockup/index.php
Ein Beispiel aus der Praxis: www.Steuerberater-Eggert.de
Die Internetseite der Steuerberatungskanzlei Eggert haben wir vor wenigen Jahren auf eine modern WordPress Plattform migriert. Für Werbeunterlagen werden vom Kunden jedoch bspw. angenehme realistische Darstellungen der Seite verlangt. Da sollte man doch gleich an ein schönes Mockup denken.
Was man aus dieser Seite machen kann, um sie ordentlich zu präsentieren, lässt sich bspw. ganz einfach bei folgenden Anbietern erkennen:
Magic Mockups
Magic Mockups ist ein kostenloser Anbieter für Mockups der bereits eine ganze Reihe von Designs zur Verfügung stellt. Neben dem Standardrepertoire wie Laptop, Tablet oder Handy bietet Magic Mockups jedoch auch Poster und Bilderrahmen an.
Die Screenshots werden sauber im korrekten Format von der angegebenen URL abgerufen. Die fertig erstellten Designs lassen sich zudem auch in sehr hohen Auflösungen herunterladen.
MockupsJar
Mockupsjahr bietet eine größere Designsammlung als Magic Mockups an, die Screenshots wurden bei unseren Tests jedoch nicht immer im passenden Format heruntergeladen, sodass tlw. kleinere Kanten und Flächen in den Displays sichtbar waren. Dennoch lohnt sich ein Blick auf die vielen schönen Designs.
- http://mockupsjar.com/
- https://mockupsjar.com/mockups/macbook-pro-imac-template-transparent-background
Andere Dienste
- http://frame.lab25.co.uk/frames/37
- https://www.theprintful.com/generator
- http://dunnnk.com/
- http://mockuphone.com/iphone6plussilver
- https://smartmockups.com/de/pricing
PSD Mockups
Das Ergebnis
Hier nun ein Mockup, dass mit Magic Mockups erstellt wurde. In dem Design sind gleichzeitig die Desktop-Ansicht auf dem Laptop sowie die Mobilgeräte-Ansicht im Telefon zu sehen. Die Screenshots wurden automatisch im korrekten Format geladen und auch die Responsivität wurde beim Abruf korrekt ausgelöst.
Free PSD Mockups are a pre-made image that makes it simple to flawlessly embed your very own substance into. Add your application plans to shows, messages to signs or a promotion. Mockup Free Download Collect countless and clean as well as photo-realistic mockups. You’ll discover something that suits your requirements, ensured!