Es sieht gut aus, ist genial und überzeugt – Das Perspective App Screen Mock-Up

18. November 2014, von lieAdmin2019
Liechtenecker Büro

Mock-Up
Ich liebe schönes Design und mag es, wenn auch andere überzeugt von meiner Arbeit sind. Deshalb schreibe ich in meinem ersten Blogbeitrag bei den Liechteneckers darüber, wie wir schöne Apps und Webseiten gut verpacken können.
Wir stecken sehr viel Zeit in unser Design, denn es muss perfekt sein und unsere Arbeit soll den Kunden überzeugen. Im Idealfall sind wir einige Tage vor dem Pitch mit der Umsetzung fertig und bereits neue Projekte warten schon auf uns. Doch da wir unser Design lieben, wollen wir es überzeugend in Szene setzen. Im Internet findet man viele Gratis-Mock-Ups für die private und kommerzielle Nutzung, die uns dabei helfen.
Ich suche mir meine Mock-Ups meist auf GraphicBurger oder PSD Covers, da ich von einer Holzgravur bis hin zum neuen iPhone alles finde. Noch dazu haben die Bilder eine hohe Auflösung. Kreative aus aller Welt stellen dort ihre neuesten Mock-Ups zur Verfügung. Die 3D-Grafiken sind professionell aufbereitet und nach dem Download einfach auf das eigene Projekt zu adaptieren.

Das Auge isst mit

So ein Rendering macht einen sehr professionellen Eindruck und der Kunde kann sich das finale Design viel besser vorstellen. Wir Kreative sind es gewohnt, unsere Ideen zu visualisieren und uns diese vorher auszumalen, den Kunden sollte man mit bei seiner Interpretation unterstützen.
Es gibt unzählige Vorlagen, mit denen man mit wenigen Klicks und in nur wenigen Minuten ein tolles Rendering vorbereiten kann. Die Kulissen sind von sehr elegant und minimalistisch bis hin zu knalligen Farben im Hintergrund oder real-life-Szenen und mitten drin – unser Design. Ich zeige euch anhand eines Beispiels wie einfach es geht, die derzeit modernen und schicken Perspective-App-Screen-Designs zu erstellen. Dieses habe ich auf Pixeden gefunden. Es sind drei Ansichten der App. Den Effekt macht die gekippte Optik aus und die Tiefe des Layers. So wird es mit einem flachen Smartphone verglichen oder, wenn man weiter denkt, mit futuristischen devices.

Schritt 1

Das Ausgewählte Mock-Up downloaden und in Photoshop öffnen.
Mock-Up öffnen

Schritt 2

Mit Doppelklick auf die Ebene „Put your design here“ öffnet sich ein neues Fenster.
Doppelklick auf die Ebene
Hier den Screenshot einfügen und platzieren. Mehrere Ebenen sind möglich. Dadurch kann man das Design auch erst in diesem Schritt gestalten. Sobald das Layout fertig ist – speichern und das Fenster schließen.
Ebene anpassen

Schritt 3

Man gelangt wieder zur Ursprugsdatei zurück. Nun verläuft der Prozess immer gleich, bis man alle „Put your design here“-Ebenen adaptiert hat. Wenn man nicht alle drei Screens haben möchte, kann die gewünschte Ebene ausgeblendet werden. Nun kann man auch den Hintergrund an dem App-Design anpassen oder ein Pattern gestalten. Die Screens können auseinander oder enger zusammen geschoben werden. Es gibt noch die Möglichkeit, Screens zu duplizieren, wobei man hier darauf achten muss, dass das Smartobject mit Rechtsklick „Neues Smartobject durch Kopie“ dupliziert wird. Ansonsten würde auch der kopierte Screen verändert werden.
Rendering abschließen
Na? Sieht doch gleich besser aus als eine klassische Frontansicht.

Abwechslung ist garantiert

Es ist dieselbe Grundidee, aber jedes Design ist anders und man kann es selbst noch so verändern, dass es zum Corporate Design der jeweiligen App passt.
Graphicburger – Isometric Perspective Mock-Up
Freepick – 3D Perspektive Mock-Up
Wenn man diese Anwendung öfters verwendet, kann man sich für $ 19 ein PSD-Plugin kaufen, welches genau diese Funktion erfüllt. Es können Screens hinzugefügt werden, Positionen verändert werden, Schlagschatten näher oder entfernter setzen, stärker oder schwächer.

Stephan

Meine Rolle bei Liechtenecker: langgedienter Frontend-Veteran Wenn es weder IT noch Digitalisierung gäbe, wäre mein Beruf: Förster ohne Kontakt zu Menschen! Mein Herz schlägt für: die Arterien.
3 Kommentare.
Kommentar verfassen
Name
Mail
Web
Captcha
Erfolgreich!
Fehler!
24. November 2014 um 14:20

Wenn man das ganze noch mobil von unterwegs mit iPad/iPhone machen möchte, dann kann man auch mal iSweetIt (www.isweetit.com) testen. Inklusive 4 kostenlose Stages und Vorlagen für Handy/Tablet/Notebook sowie Drucksorten und Plakate.

Jetzt antworten
Antwort verfassen
Name
Mail
Web
Captcha
Erfolgreich!
Fehler!
19. November 2014 um 17:14

Traurigerweise machen das mittlerweile viele so. Dann sieht das Mockup meist besser aus, als das fertige Produkt. Im Android Play Store gibt es da eine Menge Beispiele.

Jetzt antworten
Antwort verfassen
Name
Mail
Web
Captcha
Erfolgreich!
Fehler!
    Andrea Egger
    19. November 2014 um 17:50

    Es werden leider immer noch gute Designs in schlechten Präsentationen verpackt, sei es wegen Zeitmangel oder auch fehlendem Know-How. Das Mock-Up ist ein nettes Hilfsmittel, um diesem vorzubeugen. Das Design soll nicht von der Präsentation übertönt werden, denn dieses muss nach wie vor im Vordergrund stehen.

Home Office, Digitalisierung und Coronavirus
Zukunft – Blogbeitrag

Die Stunde der Wahrheit: Digitalisierung in Zeiten des Coronavirus

23. März 2020, von Susanne

Vier Eckpfeiler, die durch die Coronavirus-Krise aufzeigen, wie es um die Digitalisierung eines Unternehmens steht.

Jetzt lesen
Liechtenecker Leseliste #57 mit Michael Kräftner
Arbeitskultur – Podcasts

Folge #57 mit Michael Kräftner

6. März 2020

In Folge 57 ist Michael Kräftner, Founder und CEO von Celum, zu Gast. Mitgebracht hat er "The Hard Thing About Hard Things" von Ben Horowitz, ein ganz und gar unklassisches Management-Buch.

Jetzt anhören
Close