UX Audit

Wir trainieren dein Team? Buch unsere Workshops, Trainings und Coachings.

Zeigt her!
Close

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

18. November 2014, von stephan
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.

Du willst mit jemanden über das Thema plaudern?

Einen kostenlosen Termin mit CEO Susanne vereinbaren!

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.

Technologie – Blogbeitrag

Die Macht von PHPStan: Fehlererkennung und Codequalität in der PHP-Entwicklung

21. März 2024, von Daniel

In der Welt der Webentwicklung ist die Qualität des Codes von entscheidender Bedeutung. Schlecht geschriebener Code kann zu Bugs, Sicherheitslücken und ineffizienter Leistung führen. PHPStan ist ein leistungsstarkes statisches Analysetool, das dazu beitragen kann, die Codequalität zu erhöhen und Bugs frühzeitig zu erkennen. In diesem Beitrag werden wir uns genauer ansehen, welche Arten von Fehlern PHPStan erkennen kann und welche Aufgaben möglicherweise andere Tools übernehmen müssen.

Jetzt lesen
Liechtenecker Leseliste #62 mit Susanne Liechtenecker
Inspiration – Podcasts

Folge #62 mit Susanne Liechtenecker

27. November 2020

In Folge 62 besinnt sich Susanne auf die Anfänge dieses Podcasts und begrüßt keinen Gast, sondern erzählt über das Buch "Jäger, Hirten, Kritiker" von Richard David Precht und warum es sie inspiriert hat.

Jetzt anhören
Close