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:

Browser-Addon Wappalyzer

Mich interessiert beim Besuchen einer Website nicht nur der Inhalt, sondern auch wie und womit eine Seite aufgebaut ist. Das kann ich z.B. im Quellcode oder mit dem Web-Inspector des Browsers nachschlagen. In diesem Beispiel finde ich dann, dass Joomla das CMS ist, mit welchem die Seite betrieben wird.

Wappalyzer ein praktisches Browser-Addon

Vor kurzem hat mir jemand das praktische Browser-Addon wappalyzer gezeigt. Und damit kann ich natürlich innert Sekunden sehen mit welchem CMS oder Tools eine Seite gebaut ist.
Es zeigt über ein Icon in der Browserleiste sofort das Icon des CMS an. Wenn ich dann auf dieses Icon klicke, klappt ein Menu runter, welches mir noch weitere spannende Details preis gibt.

screen-wappalyzer

Unterschiedlieche Infos erhalten – Tools erkennen

Da finde ich z.B welche Javascript Frameworks genutzt werden. Oft sieht man dann jQuery oder auch noch MooTools oder Prototype. Dann findet sich auch die serverseitige Programmiersprache wie ColdFusion, ASP.net oder PHP und manchmal sogar die Version davon.
Welcher Server wird verwendet? Ein Linux-Betriebssystem oder Windows? Bei Linux Systemen wird teilweise sogar angezeigt welches System (Debian, Ubuntu) oder ob das System auf einem Apache-Server oder einer Alternative wie NGINX läuft.
Natürlich findet das Tool auch alle Social Media Plugins: zum Beispiel Addtoany oder AddThis…

Dann finden sich weitere Infos zu Tracking-Scripts wie Google Analytics und weitere ähnliche Tools, welche ich gleich angezeigt bekomme. Das erleichtert natürlich die Analyse enorm. Ohne den Code im Browser zu durchforsten sehe ich hier sofort im Überblick alles was man so über das System einer Website von aussen erfahren kann.

Suchfaktor oder Lerneffekt

Nach der Installation des Addons habe ich viele Webseiten besucht, um zu sehen welches CMS sie nutzen. Mit dem Addon geht es halt viel schneller. So wird es sehr spannend zu sehen welche Webseiten welchen Server nutzen. Es stellen sich auch einige Lerneffekte ein: Grosse Seiten nutzen meist NGINX statt Apache. Oder ich sehe unterschiedliche Software zu Nutzeranalyse neben Google Analytics: Clicky, Heap, Optimizely oder Webtrends.
Auch eine Erkenntnis – noch nicht viele Webseiten nutzen die aktuellste PHP-Version 7. Aber viele laufen noch auf älteren Versionen welche nicht mehr mit Security Patches beliefert werden.
Auf jeden Fall spannend ist die Applikations-Übersicht: https://wappalyzer.com/applications

Interessant: Statistiken

Auf der Website von Wappalizer findet man einige Statistiken. Diese interessant aber nicht immer hilfreich: Sind doch jeweils nur die Top10 der Marktführer einer Kategorie einsehbar. Auch wichtig zu beachten: gemessen werden die Resultate natürlich nur von Nutzern welche das Addon installiert haben. Deshalb ist wohl diese Statistik zu wenig objektiv. Aber Tendenzen lassen sich damit auf jeden Fall feststellen.

Hier noch der Link zum Addon: https://wappalyzer.com/

Russo One Freefont

russo-one-roboto

Die richtige Schriftwahl für eine Webseite zu treffen ist ein entscheidender Faktor, ob die Webseite überzeugend wirkt oder nicht. Neben der Wahl muss dann auch der richtige Einsatz der Schrift gelingen. Denn Typografie trägt nicht nur den Text sondern trägt durch das Schriftbild auch eine Aussage. Sei es Eleganz, Stärke oder Seriosität.
Oft wird für die Überschriften eine unterschiedliche Schriftart gewählt als für den Lauftext.

Eine spannende Wahl als Titelschrift ist die «Russo One». Im Einsatz sieht man diese Schrift auf William Umzugsreinigung.
Die Russo One wird hier kombiniert mit der Roboto. Ich finde die Wahl und Kombination hier sehr gelungen.

Beispiel mit Titelschrift Russo One und Lauftext Roboto
Der Ausbau der Zeichen der Russo für verschiedene Sprachen ist ideal.

Russo One Zeichenvielfalt

Russo One vorgestellt

Die Schrift gibt es nur im Schnitt «Regular» zu haben. Dieser wirkt aber wie ein «Black» Schnitt und markiert klar sein Territorium.
Für die Webseite mit der Umzugsreinigung ist es genau die richtige Wahl, weil die Schrift folgende Eigenschaften ausstrahlt:
Sie markiert Tatkraft und Klarheit. Es ist keine zögerliche Schrift, sondern sie unterstreicht die Aussagen. Ebenfalls hebt sie sich hervorragend ab zur Laufschrift und bildet dadurch einen spannenden Kontrast. Die Schrift wirkt nicht langweilig und fade – nein sie hat auch Charakter. Gestaltet wurde die Schrift von Jovanny Lemonad. Der Name bedeutet «Russisch» und will modern wirken.
Mir gefällt z.B. das versale R mit dem gewichtigen Körper. Diese Betonung gibt der Schrift den spannenden Charakter.

Russo One Beispieltext

Zur Roboto gibt es zu sagen

Die Roboto ist sehr gut am Bildschirm lesbar. Ich empfehle sie oft für den Einsatz von Lesetexten am Bildschirm. Manchmal auch als Ersatz für eine Helvetica. Die Innenräume sind offen, die Wirkung ist geometrisch. Jeder Buchstabe nimmt aber den Raum ein den er in seiner natürlichen Wirkung benötigt und wird nicht in ein Raster gedrängt. So wirkt die Schrift sehr seriös und ist flüssig lesbar.
Im Gegensatz zur Russo bietet die Roboto eine ausgesprochene Vielfalt an Schnitten. Der Designer Christian Robertson hat viele Schriftschnitte ausgearbeitet: von Thin bis Black inklusive Kursiven. Dazu noch eine Condensed Variante «Roboto Condensed» und eine serifenbetonte Version «Roboto Slab» mit demselben Umfang an Schriftschnitten. Das macht die Schrift sehr praxistauglich und als Ergänzung zur Russo One ist es eine perfekte Wahl.

Dieses abschliessende Beispiel zeigt die Roboto Regular als Fliesstext, ohne Silbentrennung, wie es auf Webseiten üblich ist. Und in negativer Darstellung – helle Schrift und farbiger Hintergrund. Dazu habe ich einen luftigen Zeilenabstand gewählt um ein angenehmes Lesen zu ermöglichen.

Russo One auf Google Fonts

Roboto auf Google Fonts

russo-one-roboto

Farben und Formen die inspirieren

Designerstücke als Inspiration

Farben, Formen und Proportionen. Das sind Zutaten für Design. Ich schaue mir immer wieder Produkte oder Seiten an bei denen Ich Inspiration finde. Auf der Designermöbel-Seite von betz-designmoebel findet sich dazu so einiges:
Möbel mit klaren Linien und geometrischen Formen. Schwungvoll geformte Lehnen und Stühle welche nicht nur elegant aussehen, sondern auch solide funktionieren und langlebig gebaut sind.

Als Gestaltungsübung picke ich mir drei Designstücke aus der Website. Damit will ich ein grafisches Design realisieren. In meinem Beispiel für die Verwendung einer Visitenkarte.
Ich entscheide mich für Produkte der Marke Vitra Design. Ich suche möglichst drei ganz unterschiedliche Möbel oder Accessoires. Mein Entscheid fällt auf den Stuhl Zig Zag, die Wanduhr Sunburst. Als letztes Objekt nehme ich noch den Stuhl Eames in einem Petrol-Farbton dazu. Nun habe ich drei Designstücke ausgewählt. Die im Moment noch leeren Visitenkarten warten auf die Kreationsphase.

Designprozess

Nun beginnt der Designprozess. Ich mag diesen auf unterschiedliche Weise angehen. Die erste Variante: Ich beginne einfach drauf los und erstelle mein Design aus dem Bauch heraus. Die Designstücke inspirieren automatisch zu Formen und Farben. Ich mache pro Karte immer ein paar Entwürfe. Einige werden sofort wieder verworfen. Andere sind zu brav und langweilig. Andere werden zu wirr und unruhig und eignen sich nicht für eine Visitenkarte. Deshalb gehe ich meist recht ins Detail und gestalte die Elemente ähnlich einer Makroaufnahme. So finde ich mit dieser Variante vorzügliche Designs. Der grosse Nachteil: Aus dem Bauch heraus gestaltete Objekte habe manchmal keine erklärbare Entstehungsgeschichte oder Begründungen mit der sich eine Gestaltung verkaufen lässt für einen Kunden.

Eine andere Designvariante ist – zuerst denken und dann entwerfen. Bei dieser Variante bin ich meist besser gerüstet mein Design zu begründen, wenn jemand nach dem Wieso und Warum fragt. Was habe ich überlegt. Wie ist der Bezug zu meinem Thema, was für eine Geschichte oder Assoziation erzähle ich. Finde ich eine Spannung oder Botschaft, die ich mit meinem Design weitertragen kann. Mit dieser Variante kann ich meist sehr klar erklären weshalb etwas entstanden ist. Kunden schätzen den Mehrwert dieser Vorgehensweise. Es ist nicht nur etwas ästhetisch Schönes – das Design trägt auch eine Botschaft.

Für die Übung heute wähle ich den ersten Ansatz. Ich spiele. Muss nicht für einen Kunden arbeiten. Darf einfach nach Lust und Fantasie mit Farben und Formen spielen. Darf ausprobieren und verwerfen.

Finale Resultate

Am Ende stehen die drei Entwürfe die ich hier gerne zeige. Die Ableitung zum Produkt und der ursprünglichen Inspiration ist sichtbar, wenn ich das Produkt daneben platziere.
Würde das Produkt fehlen, kommt man kaum auf die Quelle der Inspiration. Und wenn ich die Umsetzungen weiter variiere, verliert es den Ursprung.
Solche Projekte gefallen mir und halten mich fit für weitere Gestaltungsprojekte und ich freue mich schon über eine neue Herausforderung.

design_wood

design_sunburst

Visitenkarten Design Eames

Bildstile für Webseiten in blau

Bildsprache im einheitlichen Look

Bildbearbeitung mit pixlr

Um einen einheitlichen Look für eine Bildsprache zu erhalten kann man ein einfaches aber wirkungsvolles Stilmittel verwenden. Man färbt Bilder mit einem Farbton ein.
Früher wurde dieser Effekt für einen 2-farbigen kostengünstigeren Effekt mit 2 Farben angewendet (Schwarz + 1 Buntfarbe). Aktuell sehe ich diesen Bildstil sehr oft auf Webseiten. Beispielsweise sieht man diesen auf der Website von Blue Frost Security. Alle Bilder sind dort mit einem kühlen blau eingefärbt. Das unterstreicht optimal das Thema Security wie auch den Firmennamen (Blue Frost). Ein grosser Benefit dieses Stils ist die visuelle Konsistenz des Auftritts. Man kann unterschiedliche Bildquellen nutzen und durch die Farbgebung wirken die Bilder einheitlich.

Gerne beschreibe ich wie man diesen Blue-Frost-Effekt erreichen kann.

Vorbereitung

Hinweis: Ich habe alle Schritte in einem Video festgehalten.

Als erstes werde ich mir Bildmaterial besorgen. Hier hole ich mir ein kostenloses Bild mit einer Public Domain Lizenz um den Effekt nachzubauen. Das Bild mit dem Mann der am Notebook arbeitet eignet sich sehr gut für die Nachstellung des Security-Bildes.

Nun benötige ich ein Bildbearbeitungsprogramm. Ich arbeite oft in Photoshop. Damit aber alle dieses Tutorial nachvollziehen können, zeige ich die Bearbeitung anhand von pixlr – einem Online Bildbearbeitungsprogramm, welches frei genutzt werden kann.

Konkrete Schritte

Zuerst wähle ich «Bild vom Computer öffnen»

Anschliessend lege ich eine neue Ebene an und stelle die Vordergrundfarbe auf den Farbwert RGB 137 / 188 / 250 resp. Hex #89bafa
Zum Füllen der Ebene nutze ich das Füllwerkzeug (Farbtopf).

pixlr-neue-ebene

Die Einstellung/Modus der Ebene stelle ich auf «Multiply»

Bereits jetzt sehe ich einen Verfärbungseffekt. Diesen kann man nun variieren. Je nach Einstellung der Hauptfarbe auf der ersten Ebene oder durch Variation des darunterliegenden Bildes.

Um meinen Effekt noch frostiger werden zu lassen wähle ich nun die Ebene mit dem Foto. Ich passe die Helligkeit an und nehme die Farbintensität zurück:

Menu > Anpassung > Farbton&Sättigung

Ich klicke als erstes die Checkbox «Colorieren» an. Dies reduziert alle Farben auf ein einfarbiges Bild. Die Farbsättigung stelle ich auf Minus 75. Anschliessend OK klicken.

pixlr-farbton-saettigung

Menu > Anpassung > Gradationskurve

Hier ziehe ich in der Mitte der Kurve nach oben, das Bild wird heller. Ohne die hellsten und dunkelsten Bildstellen zu verändern.

pixlr-gradationskurve

Nun kann ich den Effekt noch verstärken und das Bild mehr aufhellen in dem ich den Ebenen-Modus der blauen Fläche auf «Overlay» stelle.

Fertig ist das frostige Bild.

final-blue