Glassmorphism: Der Trend mit dem Glas-Effekt

In der Welt des User Interface Designs tauchen immer wieder neue Trends auf, die die Art und Weise verändern, wie wir digitale Oberflächen wahrnehmen und mit ihnen interagieren. Einer dieser Trends, der seit 2020 an Popularität gewonnen hat und in den Designsystemen großer Unternehmen wie Apple und Microsoft prominent vertreten ist, ist der sogenannte Glassmorphismus. Stellen Sie sich vor, digitale Elemente sehen aus wie gefrostetes Glas, durch das man hindurchsehen kann, aber der Hintergrund leicht verschwommen erscheint. Genau das ist die Essenz des Glassmorphismus.

Dieser Stil verleiht UI-Elementen eine einzigartige Tiefe und Hierarchie, indem er verschiedene Grade der Durchscheinung nutzt. Er ahmt das Aussehen von echtem, halbtransparentem Glas nach. Doch obwohl Glassmorphismus ästhetisch ansprechend sein kann, birgt er auch Herausforderungen, insbesondere im Hinblick auf die Zugänglichkeit und Benutzerfreundlichkeit, wenn er nicht sorgfältig angewendet wird.

Was genau ist Glassmorphismus?

Glassmorphismus ist ein visueller Designstil, der Transparenz und Unschärfe kombiniert, um UI-Elementen das Aussehen von gefrostetem Glas zu verleihen. Ziel ist es, Tiefe und Kontrast zwischen Vordergrund- und Hintergrundelementen zu erzeugen. UI-Elemente, die diesen Stil verwenden, wirken oft so, als würden sie über dem Hintergrund schweben.

Dieser Effekt kommt besonders gut zur Geltung, wenn die glassmorphischen Elemente vor komplexen oder farbintensiven Hintergründen platziert werden. Die Unschärfe lässt den Hintergrund durchscheinen, ohne ihn zu detailliert darzustellen, was dem Element im Vordergrund hilft, sich abzuheben und eine visuelle Hierarchie zu schaffen.

Glassmorphismus in Designsystemen

Obwohl der Begriff „Glassmorphismus“ weit verbreitet ist, bezeichnen Designsysteme diesen Stil oft unter breiteren Kategorien, die Materialien imitieren. Microsofts Fluent Design System nennt eine solche Komponente beispielsweise „Acrylic“. Diese „Materialien“ sollen die Illusion von Tiefe erzeugen und bestimmte Teile einer Benutzeroberfläche hervorheben oder umrahmen.

Auch in virtuellen oder gemischten Realitäten kann Glassmorphismus hilfreich sein, um Objekten Textur zu verleihen und eine 3D-Erfahrung zu unterstützen. Ein bemerkenswertes Beispiel ist Apples Vision Pro, das durchscheinende SwiftUI-Materialien in seinen UI-Overlays verwendet, um die virtuellen Umgebungen dahinter wahrnehmbar, aber unscharf zu halten.

Die Hauptmerkmale des Glassmorphismus

Der Glassmorphismus-Effekt wird hauptsächlich durch zwei Schlüsseleigenschaften erzeugt:

• Transparenz (Opacity): Ein glassmorphisches Element muss durchsichtig sein, damit der Hintergrund sichtbar wird. Dies wird durch Anpassen der Deckkraft (Opacity) der Füllung des Elements erreicht. Eine geringere Deckkraft lässt mehr vom Hintergrund erkennen, während eine höhere Deckkraft das Element undurchsichtiger macht. Im Gegensatz zu einem Fenster, das 0 % Deckkraft hat (man sieht alles klar), haben glassmorphische Elemente eine höhere Deckkraft (z. B. 30-40 %), um den „gefrosteten“ Look zu erzielen.
• Hintergrundunschärfe (Background Blur): Dies ist das entscheidende Merkmal, das den „gefrosteten“ Glaseffekt erzeugt. Die Hintergrundunschärfe verzerrt die Elemente, die sich hinter dem glassmorphischen Objekt befinden, und lässt sie verschwommen und unscharf erscheinen. Man kann immer noch die Anwesenheit von Objekten im Hintergrund erkennen, aber ihre Details sind verwischt. Der Grad der Unschärfe kann variiert werden, um den gewünschten Effekt zu erzielen – von einer leichten Weichzeichnung bis hin zu einer starken Verzerrung.

Zusätzlich zu diesen beiden Hauptmerkmalen können weitere Elemente verwendet werden, um den Effekt zu verfeinern:

• Konturen (Strokes): Eine leichte, oft halbtransparente oder mit einem Verlauf versehene Kontur um das Element kann die Illusion einer Glas- oder Acrylkante verstärken und dem Element mehr Definition verleihen, besonders auf einfacheren Hintergründen.
• Verläufe (Gradients): Verläufe können sowohl auf die Füllung als auch auf die Kontur des Elements angewendet werden. Ein leichter Farb- oder Opazitätsverlauf innerhalb der Füllung kann Lichtreflexionen auf der Glasoberfläche simulieren.

Glassmorphismus in der Praxis: Best Practices für Designer

Bei der Implementierung von Glassmorphismus ist es entscheidend, die potenziellen Einschränkungen zu verstehen, insbesondere im Hinblick auf die Zugänglichkeit. Durchscheinende Elemente können die Lesbarkeit von Text beeinträchtigen, da der Text über wechselnden, unscharfen Hintergrundfarben liegen kann.

Hier sind einige Best Practices:

• Kontrastanforderungen erfüllen: Stellen Sie sicher, dass Text- und Grafikelemente die erforderlichen Kontraststandards erfüllen (z. B. WCAG-Richtlinien). Da glassmorphische Komponenten transparent sind, kann Text über verschiedenen Farben liegen, was die Lesbarkeit erschwert. Tools zur Kontrastprüfung sind unerlässlich, um sicherzustellen, dass der Text immer lesbar ist, unabhängig davon, welcher Teil des Hintergrunds dahinter liegt.
• Mehr Unschärfe ist oft besser: Insbesondere bei komplexen Hintergründen wie Fotos oder Videos ist ein höherer Grad an Hintergrundunschärfe ratsam. Viele Designs zeigen Hintergründe, die zu deutlich erkennbar bleiben. Ein zu detaillierter Hintergrund kann jedoch vom Inhalt des glassmorphischen Elements ablenken und die Lesbarkeit des Textes beeinträchtigen. Die Unschärfe sollte ausreichen, um den Hintergrund zu beruhigen und den Fokus auf das Element im Vordergrund zu lenken.
• Benutzern die Anpassung ermöglichen: Bieten Sie, wenn möglich, Benutzern Optionen zur Anpassung von Kontrast oder Transparenz. Betriebssysteme wie macOS und iOS bieten Zugänglichkeitsfunktionen, die es Benutzern erlauben, die Transparenz zu reduzieren oder den Kontrast zu erhöhen. Dies ersetzt glassmorphische Elemente oft durch solide Farben und macht die Oberfläche für Menschen mit Sehbeeinträchtigungen zugänglicher. Wenn eine solche Anpassung nicht möglich ist, stellen Sie sicher, dass Ihre glassmorphischen Elemente standardmäßig WCAG-konform sind.

Wie erstellt man den Glassmorphismus-Effekt?

Die Erstellung des Glassmorphismus-Effekts basiert auf der Kombination der oben genannten Eigenschaften. Während der Prozess je nach verwendetem Design-Tool (wie Figma, Sketch, Adobe XD oder CSS) variiert, sind die zugrundeliegenden Prinzipien die gleichen:

1. Wählen Sie einen passenden Hintergrund: Glassmorphismus lebt von einem visuellen Hintergrund. Einfarbige oder sehr schlichte Hintergründe funktionieren weniger gut. Ideal sind farbintensive Hintergründe oder Verläufe, über denen der Unschärfeeffekt zur Geltung kommt. Eine mehrschichtige Struktur im Hintergrund kann ebenfalls zur Tiefenwahrnehmung beitragen.
2. Erstellen Sie das Element: Beginnen Sie mit einer Form (z. B. einem Rechteck für eine Karte).
3. Wenden Sie Transparenz an: Geben Sie der Füllung des Elements eine Farbe (oft Weiß oder eine helle Farbe) und reduzieren Sie deren Deckkraft (z. B. auf 20-40 %).
4. Fügen Sie Hintergrundunschärfe hinzu: Wenden Sie den Effekt „Hintergrundunschärfe“ (oder „Background Blur“) auf das Element an. Experimentieren Sie mit dem Wert, bis der gewünschte Grad der Unschärfe erreicht ist.
5. Optional: Fügen Sie eine Kontur oder Verläufe hinzu: Eine subtile, oft helle oder mit einem leichten Verlauf versehene Kontur kann die Kanten des Elements definieren. Verläufe in der Füllung können Lichtreflexionen simulieren.
6. Optional: Fügen Sie Rauschen hinzu: Ein leichtes Rauschen (Noise) auf der Oberfläche kann dem Element eine realistischere Textur verleihen, ähnlich wie bei echtem Glas.

Viele UI-Toolkits und Design-Ressourcen stellen vorgefertigte glassmorphische Komponenten zur Verfügung, die angepasst werden können, was den Prozess beschleunigt.

Sollte ich Glassmorphismus verwenden?

Wie bei den meisten Designtrends ist Mäßigung der Schlüssel. Glassmorphismus eignet sich hervorragend, um bestimmten Elementen wie Karten, Modalfenstern oder Seitenleisten Tiefe und visuellen Reiz zu verleihen. Er kann helfen, eine klare visuelle Hierarchie zu etablieren.

Eine übermäßige Verwendung, bei der fast alle Elemente glassmorphisch sind, kann jedoch zu einer unübersichtlichen Oberfläche führen, bei der es schwierig wird, wichtige Informationen zu unterscheiden. Die Lesbarkeit von Text auf diesen Elementen ist ein ständiger Punkt der Aufmerksamkeit.

Es ist wichtig, das visuelle Gewicht der auf glassmorphischen Oberflächen platzierten Inhalte zu berücksichtigen. Fettschrift oder eine höhere Kontrastfarbe für den Text können notwendig sein, um die Lesbarkeit zu gewährleisten, insbesondere im Vergleich zu feinem, hellem Text, der schnell im unscharfen Hintergrund verschwinden kann.

Glassmorphismus und seine Wurzeln im Skeuomorphismus

Obwohl der Begriff „Glassmorphismus“ erst 2020 von Michal Malewicz geprägt wurde, lässt sich die Idee, digitale Elemente wie physische Objekte erscheinen zu lassen, bis zum Beginn des Skeuomorphismus in den frühen 2000er Jahren zurückverfolgen. Skeuomorphismus ist ein UI-Trend, der reale Objekte in digitalen Oberflächen nachahmt, um die Interaktion intuitiver zu gestalten (z. B. Papierkorb-Symbol, Disketten-Symbol zum Speichern).

Apple nutzte bereits 2013 in iOS 7 durchscheinende Elemente mit leichter Unschärfe. Mit macOS Big Sur (2020) wurde der Stil mit glasartigen Dropdown-Menüs und Seitenleisten erneut populär. Microsofts „Acrylic“ im Fluent Design System verfolgt ähnliche Ziele.

Glassmorphismus kann als eine moderne, minimalistischere Weiterentwicklung des Skeuomorphismus betrachtet werden, die sich auf das Material Glas konzentriert, anstatt eine breite Palette physischer Objekte nachzuahmen.

Glassmorphismus vs. Neumorphismus

Ein weiterer Trend, der oft im Zusammenhang mit Glassmorphismus genannt wird, ist Neumorphismus. Es ist hilfreich, die beiden zu unterscheiden:

Glassmorphismus und Neumorphismus sind unterschiedliche Ansätze, um digitalen Oberflächen eine physische Anmutung zu verleihen. Glassmorphismus konzentriert sich auf das Material Glas und die Wirkung von Licht und Transparenz, während Neumorphismus auf die Form und das Gefühl von weichen, gedrückten oder erhabenen Elementen abzielt.

Häufig gestellte Fragen zu Glassmorphismus

Warum heißt es Glassmorphismus?

Der Name leitet sich vom englischen Wort „glass“ (Glas) und „morphism“ (Form, Gestalt) ab, da das Design die Form und das Aussehen von Glas imitiert, insbesondere von gefrostetem oder durchscheinendem Glas.

Ist Glassmorphismus für die Zugänglichkeit problematisch?

Ja, er kann problematisch sein, insbesondere bei der Lesbarkeit von Text, wenn der Kontrast zwischen Text und dem variierenden, unscharfen Hintergrund nicht ausreichend ist. Sorgfältige Anwendung und Kontrastprüfung sind unerlässlich.

Welche Hintergründe eignen sich am besten für Glassmorphismus?

Hintergründe mit lebendigen Farben, Verläufen oder visuellen Mustern funktionieren am besten, da sie den Unschärfeeffekt hervorheben und dem glassmorphischen Element etwas zum Durchscheinen geben.

Ist Glassmorphismus noch ein aktueller Trend?

Obwohl die anfängliche Hype-Phase von 2020-2021 möglicherweise abgeklungen ist, bleibt Glassmorphismus ein etablierter Stil, der in vielen modernen Benutzeroberflächen und Designsystemen verwendet wird, oft in Kombination mit anderen Elementen.

Zusammenfassend lässt sich sagen, dass Glassmorphismus ein wirkungsvoller Designstil ist, der digitalen Oberflächen Tiefe und Eleganz verleihen kann. Er ist am effektivsten, wenn er gezielt und mit Bedacht eingesetzt wird, um bestimmte Elemente hervorzuheben und eine klare visuelle Hierarchie zu schaffen. Die Berücksichtigung von Zugänglichkeitsprinzipien, insbesondere in Bezug auf Kontrast und Lesbarkeit, ist dabei von größter Bedeutung. Durch die Kombination von Transparenz, Hintergrundunschärfe und subtilen Details wie Konturen und Verläufen können Designer beeindruckende Benutzeroberflächen schaffen, die das Auge ansprechen und dennoch funktional bleiben.

Hat dich der Artikel Glassmorphism: Der Trend mit dem Glas-Effekt interessiert? Schau auch in die Kategorie Design rein – dort findest du mehr ähnliche Inhalte!