Reinigung bis ins kleinste Detail

Sauberkeit und Ordnung sind jedem ein wichtiges Anliegen. Doch nicht jeder hat auch immer die Zeit, sich ordnungsgemäß und umfassend darum zu kümmern, dass alles hundertprozentig komplett gepflegt ist. Vor allem in Büros und Praxen sollte für solche Fälle doch ein Spezialist aufgesucht werden. Um ein möglichst professionelles und gepflegtes Bild von sich zu vermitteln, benötigt doch jedes kompetente Unternehmen eine Reinigungsfirma, die sich um das saubere und gepflegte Erscheinungsbild kümmert. Denn ein professioneller Eindruck kann nur durch Sauberkeit und Ordnung erlangt werden. Um weiterhin erfolgreich zu agieren, sollte doch jeder Unternehmer auch auf einen gepflegten Eindruck nach außen achten.

Reinigung in Streifen

Auch nach größeren Events oder Umzügen ist eine Reinigungsfirma einfach die beste Lösung, um in möglichst geringer Zeit, eine möglichst optimale Leistung zu erzielen. Weiterlesen

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