Auf der Website bekommst du auch einen guten Eindruck, was sich geändert hat. Unter anderem neue Formen und neue Animationen.

Was ich am spannendsten finde: dynamische Farben.

Google hat in Android 12 ein Algorithmus integriert, der Farbtöne aus dem Wallpaper der Nutzer:innen extrahiert, die vom UI verwendet werden können. So bekommen die Apps eine persönlichere Note.

Ich habe kein Android-Gerät, deswegen konnte ich das Feature noch nicht selbst ausprobieren.

Umsetzung für Webseiten?

Bisher ist Material You hauptsächlich für Android vorgesehen, es wird aber eine Frage der Zeit sein, dass auch an Web gedacht wird. Webseiten haben keine direkte Möglichkeit, den Wallpaper vom Betriebssystem abzugreifen.

Möglicherweise wird Google für Chrome die Theme-Farben als CSS-Variablen liefern, sodass Webentwickler:innen diese einfach nutzen können. Andere Chromium-Browser (wie Edge) könnten diese API dann ebenfalls erhalten.

Übergangslösung

Ich habe ein wenig experimentiert und Farben aus dem Standard-Wallpaper aus macOS Monterey mit Hilfe von Adobe Color extrahiert.

Den Dark Mode habe ich ebenfalls berücksichtigt:

In nächsten Schritten könnte man mit JavaScript herausfinden, welches Betriebssystem verwendet wird und jeweils Farben der Standard-Wallpaper anwenden.

Oder man erlaubt, Benutzer:innen ein Bild zum Analysieren hochzuladen/auszuwählen. Das halte ich allerdings für einen nicht sehr eleganten Ansatz.

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:

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.

Aber auch Google und nun auch Apple ziehen nun mit.

Ein Bestandteil von Flat Design sind “Long Shadows”. Vor allem bei App-Icons findet man diese.

Seht einfach selbst:

Weitere Beispiele findet ihr in diesem Artikel auf designmodo.com.

Tutorial

Aber dies soll ein Tutorial sein, darüber wie man “Long Shadow”-Icons mit Photoshop verwirklichen kann.

Für den Schatten verwende ich eine selbstgemachte Vorlage, womit es einfacher ist den Schatten zu erstellen.

Die Vorlage hier als PSD: 45-Grad-Form.psd

Wie bei dem Beispiel mit dem Google Fonts-Icon, erstellen wir einen 45°-Schatten, welcher nach unten rechts scheint.

Für den Icon-Hintergrund erstellen wir ein abgerundetes Quadrat in der Farbe #00a89b.

Für das Tutorial wollen wir ein “Home”-Icon machen.
Also fügen wir ein Haus-Symbol ein. Das Icon stammt von iconmonstr.com. Dort findet ihr noch viele weitere Icons, die ihr verwenden könnt.

Da das Symbol aus zwei Körpern (Haus und Schornstein) besteht, erstellen wir zwei voneinander getrennte Schatten.

Zuerst ist das Haus dran. Wir fügen die beiden Ebenen aus der Schatten-Vorlage ein und bewegen diese zu der jeweils äußersten Kante des Hauses.

In einer neuen Ebene unter dem Haus-Symbol färben wir den unteren Bereich mit dem Pinsel-Werkzeug (B) schwarz. Das Schwarz muss dabei über der Vorlage liegen.

Das Schwarze soll unser Schatten werden. Der Teil des Schattens, das nun über die Vorlage steht soll nun abgeschnitten werden.

Dafür müssen wir die beiden Vorlagen-Ebenen in eine Auswahl umwandeln. Am einfachsten geht das, wenn man STRG gedrückt hält und auf die entsprechende Ebenen-Miniatur klickt.

Halte ich zu STRG auch noch SHIFT (Umschalt) gedrückt, kann ich eine Ebene zur Auswahl hinzufügen.

Wechseln wir nun wieder zur “Schatten”-Ebene und drücken ENTF, werden die überschüssigen Teile sauber abgetrennt.

Die Auswahl kannst du übrigens mit STRG + D aufheben.

Blendest du nun die Vorlagen-Ebenen aus (in meinem Fall sind es Ebene 4 und Ebene 3), wirst du sehen, dass ein Teil des Schattens noch über den Icon-Hintergrund übersteht.

Auch hier, geht es am einfachsten, wenn du den Icon-Hintergrund mit STRG und Klick auf die Miniatur auswählst.

Allerdings musst du danach die Auswahl noch umkehren, da wir ja den Teil des Schattens außerhalb des Icon-Hintergrundes entfernen wollen.

Nun, auch dafür gibt es einen Tastenkürzel, und zwar STRG + SHIFT (Umschalt) + I.

Wechseln wir nun wieder zur “Schatten”-Ebene und drücken ENTF, wird der unschöne Überschuss entfernt.

Nun können wir noch die Deckkraft des Schattens regulieren. Ich habe sie bei mir auf 23% gestellt.

Das Resultat ist doch schon mal ganz ansprechend. Die vorherigen Schritte wiederholen wir jetzt, allerdings beim Schornstein.
Das sieht dann so aus:

Das fertige Projekt könnt ihr hier als PSD runterladen: home-long-shadow.psd