Web Design News & Link-Tipps – Nr 43

UX/UI Design

Apple Liquid Glass UI

Apple hat mit »Liquid Glass« ein umfassendes Redesign der Benutzeroberfläche angekündigt. Es wird plattformübergreifend zum Einsatz kommen und erinnert an eine Mischung aus Glassmorphism und dem einstigen Aqua-UI von Apple oder Aero von Microsoft. In Fachkreisen wird »Liquid Glass« als visuell beeindruckend, aber funktional problematisch kritisiert – also die Umkehr von Form follows function. Schlechte Lesbarkeit, visuelle Ablenkung und Retro-Anmutung werden am häufigsten genannt.

Design beginnt mit der Komposition der Inhalte

Der Artikel von Christopher Butler erklärt, wie wichtig Komposition, Rhythmus und visuelle Balance für wirkungsvolles Design sind – unabhängig von Farben oder Bildern. Butler empfiehlt deshalb, früh mit reduzierten Wireframes zu arbeiten, denn die Struktur trägt das Design.

CSS Grids in Figma

Figma hat mit Grid die Auto-Layout-Funktion erweitert und fasst nun Flexbox und Grid in einem Tool zusammen (CSS steuert in eine ähnliche Richtung). Höchste Zeit, dass UI Designer sich mit Grid auseinandersetzen und verstehen, wo Figma echten CSS Grids noch hinterherhinkt.

Der Butterfly Effekt im Design

Der Artikel von Martin Tomitsch beschreibt, wie kleine UX-Entscheidungen große, oft unbeabsichtigte Auswirkungen haben können – ähnlich dem »Butterfly Effekt«. Anhand des Beispiels von Uber, das bargeldlose Zahlungen einführte, zeigt der Autor, wie eine scheinbar nützliche Funktion zu realen Gefahren wie Überfällen und Gewalt führte. Um solche Folgen früh zu erkennen, empfiehlt er verschiedene Tools, die helfen, komplexe Zusammenhänge und Nebenwirkungen im Designprozess sichtbar zu machen.

Figma Sites überzeugt bisher nicht

Wir hatten es im letzten Newsletter schon angedeutet, nun sind erste Berichte online, die sich dem Thema detailliert annehmen. Figma Sites erzeugt momentan noch äußerst schlechte Code-Qualität und sollte nicht für produktive und professionelle Produkte eingesetzt werden.

Frontend

Das CSS-Enigma von Höhenangaben

Selbst erfahrene Entwickler sind oft befremdet, wie sich height in komplexeren Layouts verhält. Josh W. Comeau erklärt auf seinem Blog, warum prozentuale Höhenangaben in CSS oft nicht wie erwartet funktionieren und bietet wunderbar anschauliche Erklärungen sowie praktische Lösungsansätze.

Großes Safari Update auf Version 26

Apples Browser Safari macht einen großen Sprung auf Version 26 und WebKit hat dazu einen ausführlichen Artikel veröffentlicht, der die neuen Features und Verbesserungen beleuchtet. U.a. Unterstützung für SVG-Favicons, HDR-Bilder, WebGPU, CSS Anchor Positioning, Scroll-Driven Animations und digitale Ausweise via Web API.

State of CSS 2025-Umfrage geöffnet

Nach Jahren vieler Updates scheinen die Browser-Anbieter nun etwas abzubremsen, und uns die Möglichkeit zu geben, aufzuholen. Die bekannte Umfrage zur Nutzung von CSS Features ist vor diesem Hintergrund besonders interessant, um zu identifizieren, welche Features bereits wie stark genutzt werden.

Zukünftige Möglichkeiten um CSS-Gaps zu gestalten

In Chrome 139 (und Edge) sind nun »CSS Gap Decorations« experimentell verfügbar, mit denen sich Lücken (Gaps) zwischen Elementen in CSS-Layouts direkt gestalten lassen. Bisher mussten Entwickler dafür auf umständliche Workarounds wie Pseudo-Elemente oder zusätzliche DOM-Elemente zurückgreifen – mit »Gap-Decorations« ist das nun einfacher, semantischer und performanter.

Plastische Objekte mit CSS

In einem zweiteiligen Beitrag erklärt Julia Miocene die Möglichkeit, mit reinem CSS einfache 3D-Objekte zu erstellen und ihnen durch Licht- und Schatteneffekte mehr räumliche Tiefe zu verleihen. Schritt für Schritt wird erklärt, wie eine 3D-Szene aufgebaut und realistische Beleuchtung simuliert wird, so dass im Browser ein Eindruck plastischer Objekte entsteht.

30 Jahre JavaScript im Überblick

In »A Brief History of JavaScript« gibt es einen kompakten Überblick über die 30-jährige Geschichte von JavaScript – von seinen Anfängen als LiveScript im Netscape Navigator über die Standardisierung, die Entstehung von Node.js bis hin zu modernen Entwicklungen. Die Timeline zeigt, wie sich JavaScript von einer einfachen Skriptsprache zu einer der wichtigsten Technologien des Webs entwickelt hat.

Vorschlag für ein HTML <model>-Element

Das <model>-Element ist ein experimenteller Vorschlag der W3C Immersive Web Community Group, mit dem sich 3D-Modelle direkt in HTML einbetten und im Browser anzeigen lassen. Es befindet sich noch in der frühen Entwurfsphase und ist kein offizieller Webstandard, wird aber zukünftig von Apple in Vision OS unterstützt.

CSS if() und Reading‑Flow live erleben

Una  demonstriert in ihrem YouTube-Video, wie moderne Browser mit CSS‑if()-Funktionen und Reading‑Flow umgehen – live in Chrome 137. Sie zeigt anschaulich, wie Bedingungen direkt in Styles definiert werden können und wie sie das Textlayout beeinflussen, wenn sich das Leseflussverhalten ändert.

OKLCH‑Ökosystem: Präzise Farbwerkzeuge und -workflows

Die Evil Martians stellen in diesem Beitrag ein umfangreiches Tool‑Set rund um das OKLCH‑Farbmodell vor. Es umfasst u. a. einen interaktiven Color Picker, einen Harmonizer für zugängliche Farbpaletten und ein Kontrast-Analyse-Plugin für Figma. Mit diesem Ecosystem können konsistente, wahrnehmungsbasierte Farben erzeugt werden – ideal für präzise und barrierearme Designsysteme.

Inkonsistenzen bei vertikalen Schriftmetriken erkennen

Vertikale Schriftmetriken wie Auf- und Abstrich, Baseline und Zeilenabstände variieren je nach Browser, Betriebssystem und Anwendung – was zu unerwarteten Layoutverschiebungen führt. Tools wie Vertical Metrics helfen, solche Unterschiede sichtbar zu machen, indem sie Fonts aus verschiedenen Umgebungen vergleichen.

WordPress

FAIR-Projekt bringt dezentrale Repositories für WordPress

Das neue FAIR-Projekt, unterstützt von der Linux Foundation und über 300 Mitwirkenden, bringt dezentrale Repositories für WordPress und schafft so mehr Unabhängigkeit, Sicherheit und Kontrolle jenseits von WordPress.org. Das Projekt entstand aus Bedenken hinsichtlich der zentralisierten Kontrolle durch Matt Mullenweg und wird von einer neutralen, community-geführten Governance-Struktur getragen.

FSE-Themes mit theme.json steuern

Der Artikel »How to Make Block Themes Better with Theme JSON« erklärt, wie in der Datei theme.json globale Design- und Einstellungsoptionen wie Farben, Typografie und Abstände zentral definiert und direkt im Block-Editor verfügbar gemacht werden. Das ermöglicht die Umsetzung von konsistenten, wartbaren und anpassbaren Designsystemen in WordPress-Themes.

Barrierefreiheit

BFSG-Check

Wie hoffentlich bereits bekannt sein sollte :) , tritt am 28. Juni 2025 das Barrierefreiheitsstärkungsgesetz in Kraft. Auf bfsg-gesetz.de (privater Anbieter) gibt es umfassende Hintergrundinformationen und einen hilfreichen Mini-Test, der Aufschluss gibt, ob ein Unternehmen überhaupt vom BFSG betroffen ist.

Was einen guten Accessibility-Designer ausmacht

David A. Kennedy erläutert in diesem Beitrag die Kernkompetenzen erfolgreicher Accessibility-Designer – von tiefem Nutzerverständnis über technisches Know-how bis hin zu empathischer Kommunikation im Team. Sein Ansatz verdeutlicht, dass Barrierefreiheit mehr ist als Technik: Es geht um Haltung, Zusammenarbeit und nachhaltige Prozesse.

Design Beyond Barriers – Leitfaden für inklusive digitale Produkte

Design Beyond Barriers bietet ein praxisnahes Handbuch, wie man digitale Produkte schafft, die wirklich für alle funktionieren. Die Plattform zeigt aktuell rund 30 Antworten auf die wichtigsten Fragen zur Barrierefreiheit, in denen zentrale Prinzipien inklusive Designstrategien erläutert werden. Ziel ist es, Inklusion von Beginn an zu denken – nicht als Pflichtprogramm, sondern als kreative Chance. Ideal für Teams, die digitale Produkte entwickeln, die nicht nur barrierefrei sind, sondern echte Nutzerzentriertheit leben.

Allgemein

Vibe Coding Retro Fight Game aus Berlin-Friedrichshain

Vibe Coding – also das Erzeugen von Software mittels KI – hat zunehmend hohe Relevanz für die Design und Development Branche. Jonas wurde nun mit ein paar Freunden in einem kleinen Spaß-Projekt verewigt. David Brandau hat verschiedene Tools kombiniert und einen ausführlichen Erfahrungsbericht geschrieben.

Rechtskonforme Gestaltung von Cookie-Bannern

Mit dem Verwaltungsgericht Hannover hat erstmals eine höhere richterliche Instanz klargestellt, dass der Zustimmen- und der Ablehnen-Button auf Cookie-Bannern optisch gleichwertig, sofort sichtbar und mit einem Klick erreichbar sein müssen, ohne zusätzliche Navigation oder versteckte Optionen. Als Folge des Urteils vom März 2025 ist zukünftig davon auszugehen, dass jede Abweichung beim Ablehnen-Button als Verstoß gegen die DSGVO gilt.

Tools

• Obra Icons bietet über 1.000, skalierbare SVG-Icons, die frei nutzbar sind
• Das GitHub-Paket @platformatic/php-node ermöglicht es, PHP-Anwendungen direkt im selben Prozess wie eine Node.js-App auszuführen, ohne dass eine Netzwerkverbindung zwischen beiden nötig ist. Dadurch wäre es z.B. möglich WordPress direkt mit einem Next.js-Frontend kombinieren, ohne dass dafür eine API-Schnittstelle wie GraphQL nötig ist.
• udm14.com – Bietet eine Suchmaske und hängt ein &udm14-Parameter an die Google-Suchanfrage an, damit diese sich ohne AI-Vorschläge öffnet.