Aus Neu mach Glas

Nachdem uns der letzte UI Design Trend des Neumorphism Mitte des Jahres eher enttäuscht zurückgelassen hat, gibt es einen neuen Anwärter für den Design-Hype-Thron: Glassmorphism.

Während Neumorphism einen dreidimensionalen Effekt mit Relief und Tiefe simulieren wollte, ohne wirklich im dreidimensionalen Raum stattzufinden, geht Glassmorphism einen anderen Weg. Transparenz, knallige Farben und der Einsatz von vertikalen Ebenen sind hierbei typisch.

Was kann dieser neue Trend nun besser? Könnte er sich sogar nachhaltig durchsetzen?

Was ist Glassmorphism?

Glassmorphism ist ein neuer vertikal ausgerichteter Design Trend der folgende Kernfeatures beinhaltet:

Tatsächlich kennen wir das Prinzip schon seit langem. Apple verwendet Glassmorphism zu zahlreichen Anlässen: z.B. bei Fenstern ihres OS sowohl auf Desktop als auch auf iOS. Das Ganze geht aber auch noch weiter zurück: zu Windows Vista und iOS7. Da, vor allem auf mobilen Endgeräten, Pull-Down-Menüs zunehmend aufkamen, bot sich ein transparentes UI Design natürlich praktischerweise an, um zusätzliche Informationen und UI Elemente einblenden zu können. Oftmals wurde in solchen Menüs dann der Hintergrund darunter stark weichgezeichnet, wodurch ein Glaseffekt entstand. Während Apple auf mobilen Geräten den Glaseffekt deutlich wieder reduziert hat, bleibt er auf dem Mac OS weiterhin bestehen. Auch Microsofts Fluent Design System nimmt diesen Weg.

Erstmal übertreiben und testen

Schauen wir uns mal einige Beispiele von Glassmorphism an. Es ist ja mittlerweile normal neue Trends auf die Spitze zu treiben, wie wir im folgenden Beispiel gut sehen können. Lesbarkeit ist hierbei erstmal hintenangestellt, allerdings zeigt es hervorragend, was Glassmorphism ist. Stark zurückgenommener Hintergrund mit einem extrem dünnen, halbtransparenten Rahmen erzeugt die perfekte Glasoptik.

Beispiel Glassmorphism
Smart Calendar App von Ghani Pradita

Am besten funktionieren solche Trends wie Neumorphism und Glassmorphism, indem man eben nicht ALLES in diesem Stil gestaltet, sondern diese punktuell einsetzt.

Beispiel für Glassmorphism
Beispiel von Ghulam Rasool

Auch Icons können so gestaltet werden – auf jeden Fall eine coole Idee. Auch hier kommt es definitiv auf den Einsatzbereich an, da diese Icons z.B. eher schwer verständlich sind. Ein guter Anfang!

Icons in Glassmorphism
Icon Design von Marshall

Wie funktioniert Glassmorphism?

Glassmorphism imitiert, wie der Name schon andeutet, Glas. Ein angelaufener Effekt zeichnet den darunterliegenden Hintergrund weich und sorgt so für die materielle Illusion von Glas. Zudem bricht Glas Licht und übersetzt heißt das, dass solche Designelemente näher bei uns im Raum liegen, wenn die Transparenz niedriger wird. Dadurch wird das natürliche Lichtverhalten imitiert und sorgt zusätzlich für die räumliche Illusion. Das kann zum Beispiel dazu genutzt werden, mehrere solcher Glaselemente übereinander zu legen und im “Raum” weiter hinten mit höheren Transparenzen zu arbeiten.

Glassmorphism erzeugt glasähnliche Gestaltungselemente wie zum Beispiel News-Cards, die über knallbunten, kontrastreichen Verläufen eingesetzt werden.

Zudem werden glasmorphe Elemente mit einem dezenten Schatten ausgestattet sowie einer extrem dünnen, unscheinbaren, halbtransparenten 1-Pixel-Rahmenlinie. Dadurch entsteht zusätzlich ein räumlicher materieller Effekt, ganz ähnlich dem Neumorphism.

Der Effekt kann mit komplexeren Ebenen hergestellt werden, z.B. mit Lichteffekten und Verläufen, die den räumlichen Effekt weiter verstärken. Oder Ihr gestaltet z.B. in Adobe XD, den Effekt mit einer einzigen Ebene. Hier führen viele Wege nach Rom.

Glassmorphism in Adobe XD
Beispiel in XD

Für uns ist natürlich auch wichtig, wie man diesen Effekt per CSS herstellen kann. Schaut Euch dazu den Guide von Alber Walicki an. Er macht sich die Eigenschaft “backdrop-filter: blur()” dafür zunutze. Echt kein Hexenwerk.

How to Transparenz

Die Wahl der Transparenz ist sehr wichtig. Achtet darauf, dass ihr nicht dem gesamten Element eine Transparenz verleiht, sondern lediglich der Füllung, sonst erreicht ihr nicht den gewünschten glasigen Effekt.

Einsatz von Transparenz bei Glassmorphism
Nur die Füllung darf eine Transparenz bekommen, sonst verwischt nichts.

How to Background

Am besten kommt der Glassmorphism-Effekt tatsächlich, wenn man einen Hintergrund mit knalligen Farben mit ordentlich Kontrasten verwendet. Das verstärkt die Illusion der Räumlichkeit noch weiter, da der verschwimmende Effekt des angelaufenen „Glases“ so deutlicher sichtbar wird. Dadurch versteht man auch leichter, welche Ebene (z.B. bei mehreren Fenstern übereinander) ganz oben liegt und welche dahinter. Verwendet also möglichst einen farblich abwechslungsreichen Hintergrund!

Schlechte und gute Umsetzung von Hintergründen bei Glassmorphism
Achtet auf genügend Kontrast zum Hintergrund! Niemand will sich beim Anblick Eures Designs die Augen verbrennen.

Usability und Barrierefreiheit von Glassmorphism

Per se hat Glassmorphism dieselben Probleme mit der barrierefreien Umsetzung wie Neumorphism: Zu viel ist nicht gut. Verwendet den Stil immer in Maßen, damit die Hierarchie Eurer Design-Elemente immer klar und simpel zu verstehen bleibt. Insgesamt schneidet das normale Material Design in diesem Punkt einfach besser ab. Kombiniert vielleicht beide Prinzipien. Verwendet den Effekt nicht für Buttons, Call2Actions oder sonstige interaktive Elemente wie Akkordeons. Glassmorphism sollte, genau wie Neumorphism, lediglich als dekorative Stütze verwendet werden, auf Hintergründen und als Akzente.

Fazit

Trends kommen und gehen, wie immer. Der Witz beim Glassmorphism ist allerdings, dass wir ihn bereits von MAC OS und anderen Anwendungen kennen und er dennoch wieder aufflammt. Es ist etwas neues – ein moderner Ansatz der, richtig eingesetzt, durchaus Designs den letzten genialen Schliff verleihen kann. Es gilt malwieder abwarten, testen, Tee trinken und den Trend weiterentwickeln. Mir gefällt Glassmorphism wirklich sehr gut und ich werde diesen Trend im Jahr 2021 definitiv an der einen oder anderen Stelle dezent in meine Web Designs einbringen.

Neueste Artikel
Kommentare

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.