Das „Thin Design“-Phänomen

„Dünn“ als Schönheitsideal existiert nicht nur bei bei Menschen, sondern seit geraumer Zeit auch in der Typografie.
Die Variante „Light“ einer Schriftart ist mittlerweile Standard.

Der Trend geht in diese Richtung, weil Bildschirme immer hochauflösender werden. In Zeiten von 4K und Retina Displays haben UX-Designer deutlich mehr Möglichkeiten Dinge auszuprobieren, die zuvor noch undenkbar waren.

„Thin Design“ scheint ein Teil davon zu sein. Und es beschränkt sich nicht nur auf die Typografie. Wer in letzter Zeit die Design-Entwicklungen von Microsoft (Windows 10) und Apple (OS X, iOS) verfolgt hat, wird feststellen, dass auch Symbole vom Schlankheitswahn betroffen sind.

Hier mal ein Beispiel, das ich auf der Apple-Website gefunden habe:
Screenshot

Wo kann ich „Thin Design“ einsetzen – wo nicht?

Als UX-Elemente halte ich „Thin Design“ für eine angebrachte Sache. Sowohl für Typografie, Symbole, aber auch für andere Controls, wie Buttons, Eingabefelder, Trennlinien.
Linien sollten aber möglichst vektorbasiert erzeugt werden und nicht beispielsweise als Bitmap, um eine Skalierbarkeit zu ermöglichen. Es besteht nämlich die Gefahr, dass die Linien dadurch verschwinden könnten. Bei Webdesign könnten Thin-Elemente beispielsweise per CSS (Border) oder SVG erzeugt werden.

Unangebracht halte ich Thin Design allerdings beim Logo-Design. Ein Logo muss universell einsetzbar sein und eine starke und selbstbewusste Darstellung haben. Besteht eine Bildmarke nur aus dünnen Linien, kann es schnell untergehen, wenn nicht sogar verschwinden. In Fließtexten bieten sich „leichte“ Schriftarten auch nicht an, weil dadurch die Lesbarkeit beeinträchtigt werden kann.

Beim Redesign der Nachrichten-Feeds auf Startmon.com habe ich mich auch mal am „Thin Design“ orientiert.
Du kannst es betrachten, wenn du auf https://startmon.com/ gehst und dann bei „Nachrichten-Feeds“ unten links auf den Maximieren-Button klickst.

Screenshot

Tumblr Bilder schneller im Vollbild betrachten

Tumblr-Bilder schneller in ganzer Pracht betrachten

Tumblr-Bilder schneller in ganzer Pracht betrachten

Beim Stöbern durch Tumblr-Blogs spürst du vielleicht häufig das Verlangen, ein Bild in der vollen Dimension anzusehen.
Denn in Blog-Posts sind die Bilder meistens komprimiert und um auf das volle Bild zu kommen kann schon mal zu einem Krampf führen. ^^

Deswegen habe ich für dieses Problem einen kleinen Service entwickelt. Dort gibst du die URL des Tumblr-Posts ein und du wirst direkt auf die Vollansicht weitergeleitet.

lgk.io/show-tumblr-image

Tipp: Wie du über JEDES neue Video deines Lieblings-YouTubers informiert wirst

Der „Abo-Box“-Algorithmus von YouTube ist vor allem darauf ausgerichtet, dass Videos von Kanälen, die regelmäßig neuen Content bietet, größer beworben werden.
So kommt es häufiger vor, dass ihr nicht erfahrt, dass euer Lieblings-YouTuber ein neues Video veröffentlicht hat.

Glücklicherweise gibt es die Option (zwar gut versteckt), dieses Verfahren für einzelne Kanäle zu deaktivieren. So geht es:

  • Besucht youtube.com und meldet euch an.
  • Öffnet diesen Link, um zur Abo-Verwaltung zu gelangen: https://www.youtube.com/subscription_manager
  • Es werden alle abonnierten Kanäle aufgelistet. Sucht euren gewünschten Kanal und klickt rechts auf das Zahnrad-Symbol.
  • Ein Dialog erscheint. Setzt dort den Haken bei „Ich möchte alle Mitteilungen zu diesem Kanal erhalten.“ und klickt auf „Speichern“.

So bekommst du alle Videos eines YouTubers

Ein Spiel, nur mit HTML, CSS und JS: „Hang The Song“

Hang ... song!

Screenshot

Ein Bildschirmfoto der Hang The Song App unter Windows 10 auf meinem Lumia 550.

Ziel des Spiels ist es, Songs nur anhand der ersten und der letzten Wörter des Lyrics zu erraten.
Ist das auf Anhieb zu schwierig, bekommst du über „Get a new hint“ zwei weitere Wörter zum Lyric hinzu.
Ein Hinweis kostet dir 10 Punkte. Pro Song hast du insgesamt 100 Punkte zur Verfügung. Sind alle Punkte aufgebraucht, ist das Spiel leider vorbei.

Am besten ist es also, so wenig Punkte wie möglich zu verschwenden und die Song-Titel zu erraten.

Kostenlos spielen

Die App ist unter lgk.io/hang-the-song erreichbar und kann direkt im Browser gespielt werden.
Sie ist auf mobile Endgeräte optimiert, kann aber genau so gut am PC verwendet werden.

Ich habe außerdem mit dem Windows App Studio herum experimentiert und so gibt das Spiel auch als Windows 10 App. Für PCs UND Smartphones!

Allerdings noch nicht im Windows Store. Wenn du die Apps aber trotzdem testen willst, kannst du das tun.


Voraussetzung ist, dass du entweder Windows 10 oder Windows 10 Mobile benutzt.

Windows 10 am PC:

  1. Stelle sicher, dass sich dein PC im Entwickler-Modus befindet.
  2. Installier das Windows Zertifikat
  3. Installier die App Hang The Song

Windows 10 am Smartphone:

  1. Stelle sicher, dass dein Smartphone Querladen von Apps erlaubt.
  2. Installier das Windows Zertifikat auf deinem Handy:
    hang-the-song-cert-install
  3. Installier die App auf deinem Handy:
    hang-the-song-app-install

Troye Sivan – Fools (Remix by Elgeekay) — Free download

cover

I made a remix of the song „Fools“ by Troye Sivan. To find out more about the original check out the official website: http://www.troyesivan.com/

You can download my remix for free. If you want to use it for any of your works, please contact me first.

Download (MP3, 2.8 MB)


Die komfortable Art, JavaScript- und CSS-Dateien zu kombinieren — mit Miniphpy

Miniphpy

In den Artikeln Traffic verringern: JavaScript-Dateien kombinieren und Website-Gestaltung: Beschleunigung durch Kombinieren von CSS-Dateien bin ich bereits darauf eingegangen, dass es Sinn macht, bei Web-Projekten CSS- und JavaScript-Dateien zusammenzufassen, um mehrfaches Abfragen einzelner Dateien zu verhindern.

Verwendet man CSS Pre-Prozessoren wie LESS oder Sass, ist es ziemlich einfach, seine Stylesheets zu kombinieren. Seit einiger Zeit nutze ich für das Kompilieren von LESS-Dateien die Anwendung Koala.

Nur für das Kombinieren von JavaScript-Dateien habe ich bisher noch keine Lösung gefunden. Und deswegen habe ich mir einfach selbst eine gemacht: Miniphpy

miniphpy-screenshot

Durch das Web-Interface kannst du deine Dateien zu Bündel kombinieren. Um auf Dateien zu verweisen, kannst du entweder einen lokalen Pfad oder eine URI zu einer Datei angeben.

Die Dateien werden dann, abhängig von der Reihenfolge, zusammgefügt und anschließend komprimiert.

Hierbei kannst du wählen, ob die Komprimierung lokal (erfolgt mithilfe von Bibliotheken, die in Miniphpy enthalten sind) oder remote (dabei werden APIs der Komprimierungs-Dienste http://javascript-minifier.com/ und http://cssminifier.com/ verwendet) passieren soll.

Da Miniphpy eine PHP-Anwendung ist, musst du Apache (z.B. durch XAMPP) auf deinem PC am Laufen haben.