Smartphone Mockup als animiertes GIF

Was wäre ein Smartphone, ohne passende Inhalte als Mobile Webseiten oder Apps. Mobiltelefone leben von der Mobilität und der Verfügbarkeit der optimierten Inhalte. Bei meiner Arbeit darf ich Inhalte für Mobilgeräte erarbeiten und sinnvolle Nutzerschnittstellen gestalten.

Menu auf Mobiltelefon

Ich beginne sehr früh im Prozess Ideen zu visualisieren und Skizzen auf Papier helfen mir sehr rasch eine Richtung zu finden. Welche Darstellung und Interaktion funktioniert auf einem Smartphone-Bildschirm und welche nicht? Hilfreich ist es, eine entsprechende Smartphone-Grafik zur Hand zu haben. Damit kann man dann ein interaktives Mockup – also ein bewegtes Muster – gestalten. Dies ermöglicht allen beteiligten sich das Endresultat besser vorzustellen. Es entstehen fruchtbare Diskussionen darüber, ob die App oder die mobile Website die Ziele erfüllt. Und ob die Vorstellungen dem entsprechen was der Kunde erwartet. Für die technische Umsetzung gibt es viel mehr Klarheit was erwartet wird und in welcher Form.

Aktuelles Smartphone

Für das Mockup suche ich mir jeweils ein aktuelles Smartphone. Dazu hilft mir ein passender Online-Shop für Mobil-Telefone auf: deinhandy.ch. Auf dieser Seite stöbere ich in den aktuellen Angeboten und notiere mir ein paar aktuelle Smartphones. Dann beginnt eine Webrecherche um eine passende Grafik für mein Mockup zu finden. Zum Glück finde ich bald einige Mockup-Vorlagen für Handys die ich lizenzfrei verwenden kann:
Ich werde fündig mit einer iPhone 6s Grafik in drei Ausführungen (Verlinkt am Ende des Artikels).

Mockup Erstellung

Für dieses Demo habe ich eine Animation im Browser erstellt. Eine Smartphone-Grafik als Hintergrund-Bild rundet das Demo ab.

Mobile Menu animiert

Als Übung für CSS Animations habe ich mit HTML und CSS3 ein Menu erstellt welches animiert wird. Die Menupunkte widerspiegeln offensichtlich eine Website eines Designers: Da finden sich Menupunkte wie «Services» oder «Work» welche gut zu den Angeboten eines Designers oder Designagentur passen würden. Das könnte die Startseite oder das Menu darstellen und ist nun mein Beispiel für diesen Blogeintrag.

Die Animation habe ich in der Grösse eines Smartphone-Bildschirms gehalten. Anschliessend wurde nun die vorher gefundene Handy-Grafik als Hintergrundbild exakt dahinter ausgerichtet.

So sieht schlussendlich mein Demo als animiertes GIF aus.

Animiertes Mockup

Animiertes GIF

Das animierte GIF habe ich also wie folgt erstellt: Zuerst habe ich ein Video ab dem Bildschirm aufgenommen. Dazu dient mir der Quicktime Player vom Mac OS. Ich konnte damit sogar einen spezifischen Ausschnitt am Bildschirm wählen, um mein Mobile Mockup zu filmen. Anschliessend habe ich das animierte GIF mit der Software «GIF-Brewery 3» erstellt und optimiert. Die Animation läuft nach Abschluss rückwarts und sieht so in einer Endlosschlaufe sehr hübsch aus. Ebenfalls konnte ich die Grafik etwas kleiner ausgeben als das Original-Demo. So nimmt es im Blogartikel nich so viel Platz weg.

Wer dieses Mockup nachbauen möchte, findet unten die entsprechenden Quellen dazu:

Ressourcen:

Schreibe einen Kommentar