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

Bildstrecke Designers Saturday Langenthal 2014

Heute zeige ich einige Bildimpressionen vom 15. Designers Saturday in Langenthal (1./2. November 2014). Die Fotos sind mit einem iPhone fotografiert – keine Sternstunde der Photografiekunst, aber dennoch einige auflockernde Impressionen.

Ein Besuch vor Ort lohnt sich auf jeden Fall: www.designersaturday.ch

Licht mit Moos bestückt

Geschwungenes Led Licht. Leuchten von Sattler.

Hocker an der Wand – mit Polsterstoff von Création Baumann

Weiterlesen