Web Design News & Link-Tipps – Nr. 54

Von: Ferenc, Jonas, Charleen, Robert, Sophie, Raimund

Im Mai haben wir diskutiert, wo KI im Designprozess aufhört und echtes Gestalten anfängt. Im Frontend übernimmt CSS weiterhin immer mehr Aufgaben, die bislang JavaScript vorbehalten waren. WordPress wagt ein Desktop-Experiment, responsive Bilder werden deutlich vereinfacht, und in der Barrierefreiheit zeigt sich, wie begrenzt automatisierte Tests wirklich sind.

Aktualisiert am 11. Mai 2026

UX/UI Design

Design + Dev ohne Übergabe

Luke Wroblewski beschreibt, wie sein Team eine Website mit Figma und KI-basierter Übergabe ans Development realisiert hat. Keine wirklich neue Erkenntnis, aber ein interessanter Einblick, wie Designer, Entwickler und Content-Manager parallel arbeiten. »Without the handoff, everyone builds. And that makes all the difference.«

Der »Cognitive Bias Index«

Jon Yablonski hat mit dem Cognitive Bias Index eine Art Suchverzeichnis für kognitive Verzerrungen zusammengestellt. Dort findet man typische Denkfehler und eine kurze Erklärung dazu, wie solche Biases Entscheidungen beeinflussen.

KI erzeugt Output, aber nicht zwingend Design

Karri Saarinen schreibt in »Output isn’t Design«, dass KI-Tools zwar schnell Interfaces erzeugen, den Designprozess aber nicht ersetzen können. KI liefert Ergebnisse, die auf den ersten Blick funktionieren, erfasst aber den Kontext und das eigentliche Problem nur oberflächlich. Produkte, die nur mit KI entstehen, sehen oft gut aus, zeigen beim Benutzen aber schnell ihre Schwächen. Nathan Beck vertieft diese Problematik in »The Death of Design« und kommt in seinem Artikel zum gleichen Schluss.

Design braucht eigene Workflows

Jeana Clark, Designerin und Front-End-Entwicklerin, kritisiert auf ihrem Blog, dass durch den Einzug von KI-Tools Prozesse und Arbeitsabläufe von Entwicklung und Design zu sehr vermischt werden. Aus ihrer Sicht sollte Design bereits Fragen und Probleme lösen, bevor es zu »Output« durch Code kommt.

Frontend

sizes=“auto“

Die aufwendige manuelle Konfiguration responsiver Bilder hat ein absehbares Ende. Mit sizes="auto" in Kombination mit loading="lazy" können wir den Browser automatisch die passende Größe eines Bildes wählen lassen. Der reißerisch betitelte Artikel The End of Responsive Images erklärt die Hintergründe.

Native Randomness in CSS

Mit random() könnte CSS künftig erstmals echte Zufallswerte direkt im Browser erzeugen, ganz ohne JavaScript. Die geplanten nativen Zufallswerte in CSS ermöglichen zufällige Größen, Farben oder Rotationen direkt in der Rendering-Engine des Browsers. Warum das ein bedeutender Schritt ist, erörtert Alvaro Montoro von CSS-Tricks.

HTML trifft GPU: Erste Experimente mit HTML in Canvas

Mit »HTML in Canvas« entsteht aktuell ein experimenteller Ansatz, der klassische HTML-Elemente direkt in GPU-beschleunigte Canvas-Umgebungen integriert. Erste kreative Experimente damit verbinden interaktive Website-Elemente wie Buttons, Texte und Inputs mit Shader- und 3D-Effekten und zeigen, wie sich künftig aufwendige visuelle Effekte in Verbindung mit HTML auf Websites umsetzen lassen könnten.

Zustandswechsel und UI-Logik mit CSS steuern

Das Konzept der »Radio State Machine« nutzt versteckte Radio-Inputs, um komplexe Zustände von Interfaces komplett per CSS zu steuern. Moderne Selektoren wie :has() und appearance ermöglichen damit auch barrierefrei umsetzbare UI-Logik, die früher fast nur mit JavaScript umgesetzt wurde – von Tabs bis zu mehrstufigen Oberflächen und Zustandswechseln.

Compositing vs. Blending verständlich erklärt

Niklas Gadermann erklärt erschöpfend, wie Browser Bilder aus vielen Ebenen zusammensetzen und was dabei die Unterschiede zwischen Compositing und Blending sind. Compositing beschreibt in dem Kontext das Zusammenfügen von Layern, während sogenannte Blend Modes bestimmen, wie deren Pixel interagieren, um visuelle Effekte zu erzeugen.

Scroll‑basierte Animationen ohne JavaScript

Josh W. Comeau zeigt in einem hervorragend aufbereiteten Blogbeitrag, wie sich Scroll‑Animationen bald komplett in CSS umsetzen lassen. Mit der neuen »Animation Timeline« (noch nicht baseline) wird Fortschritt nicht mehr an Zeit, sondern an Scroll‑Position gebunden und erlaubt performante Effekte.

WordPress

WooCommerce spricht Claude

Gary Murray stellt mit WooCommerce for Claude ein experimentelles Plugin vor, das eine »KI-Schicht« zwischen WooCommerce-Shops und Claude einzieht. Shop-Betreibende können damit Fragen direkt an den eigenen Shop stellen, z.B. »Wie lief mein Shop diese Woche?«. Das Projekt entstand im Rahmen des Radical Speed Month und ist noch kein offizielles Core-Feature.

WordPress-Backend als Desktopumgebung

Das WordPress-Backend sieht seit 2012 nahezu unverändert aus. Zwei Automattic-Entwickler haben das mit dem WordPress Desktop Mode geändert: ein experimentelles Plugin, das das Admin-Interface in eine fensterbasierte Oberfläche mit verschiebbaren Fenstern verwandelt. Thomas Zwirner hat es ausprobiert und berichtet über Kompatibilität und Potenzial.

Design-Tools pro Block ab WP 7.0

In Vorbereitung auf WP 7.0 gibt es eine aktualisierte Übersicht, welche Gestaltungs-Tools die einzelnen Core-Blöcke unterstützen. Ein nützliches Referenzdokument für Block- und Theme-Entwickler.

Barrierefreiheit

Kontextabhängiger Fokus auf modale Dialoge

Accessibility-Experte Adrian Roselli führt in seinem Blog mit Beispielen aus, dass es keine pauschalen Regeln für den Fokus in Modalen gibt, sondern dieser vom Kontext des Inhalts abhängt. Folglich muss nicht notwendigerweise immer »Schließen« oder der erste Link/Button fokussiert werden.

Barrierefreiheit von Diagrammen und Charts

Müssen Diagramme für Screenreader zugänglich sein? Martin Underhill argumentiert in seinem Artikel: nicht unbedingt – aber die enthaltenen Daten müssen es sein.

Grenzen automatisierter Accessibility-Tests

Tools wie axe oder Lighthouse erkennen nur 30–40 % der tatsächlichen WCAG-Verstöße. David Mello erklärt in seinem Artikel, warum das so ist und wie manuelle axe-Playwright-Tests in Kombination mit manueller Prüfung die Lücken schließen können.

Tools

• Terraink ist ein kostenloses Open-Source-Tool, das aus beliebigen Koordinaten individuell gestaltbare Kartenposter erzeugt.
• Grainrad erstellt Farbverläufe mit individuell anpassbarer Körnung, bei denen sich Farben, Intensität und Struktur frei konfigurieren lassen.
• Haikei generiert konfigurierbare SVG-Hintergründe in verschiedenen Stilen, die sich als SVG oder PNG exportieren lassen.
• Griddy Icons bietet ein kostenloses und frei verwendbares Icon-Set.
• Photopalettes extrahiert Farbpaletten aus hochgeladenen Bildern.
• Design Tools FYI sammelt aktuelle Design- und Development-Tools in einer nach Einsatzbereich kategorisierten Übersicht.
• Tiks ist eine kleine Bibliothek für geschmackvolle UI-Sounds, die mit der Web Audio API synthetisiert werden.
• Shaderpad ermöglicht es, GLSL‑Shader im Browser auszuführen – praktisch für visuelle Effekte und Animationen.
• Wakamai Fondue ist ein Tool, mit dem sich Fonts hochladen lassen. Es fasst zusammen, welche Zeichen, Features und typografischen Optionen verfügbar sind.

Geschrieben von:

Ferenc Petöcz

Als Webentwickler setzt Ferenc bei kulturbanause maßgeschneiderte Webauftritte und Website-Komponenten um und betreut und optimiert Bestehende. Er hat besonderes Interesse an innovativen Ansätzen und modernen Lösungen, wobei er dabei stets auf die Robustheit und Verlässlichkeit des Gesamten achtet.

Jonas Hellwig

Jonas ist Gründer von kulturbanause. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.

Jonas Hellwig bei Mastodon, LinkedIn, Xing und YouTube.

Charleen Warkentin

Charleen arbeitet als Webdesignerin bei kulturbanause. Sie gestaltet und realisiert Websites, die durch klare Strukturen, ästhetisches Design und hohe Benutzerfreundlichkeit überzeugen. In enger Zusammenarbeit mit den Developern sorgt sie dafür, dass Gestaltung und Funktion perfekt ineinandergreifen.

Robert Menzel

Robert arbeitet als Frontend-Developer und Web-Designer bei kulturbanause. Zu seinen Aufgaben gehören die visuelle Gestaltung und die technische Umsetzung von Websites, eCommerce-Shops oder dessen Kombination. Besonders gerne übernimmt er die Entwicklung individueller und anspruchsvoller Websites mit umfangreichen ineinandergreifenden Funktionen, getreu dem Motto: »Der beste Lack bringt nichts, wenn die Maschine darunter nicht läuft.«

Sophie Tausch

Sophie beschäftigt sich mit allen Themen rund um UX/UI Design. Ihre Hauptaufgaben beinhalten Produkt- und Nutzerforschung, das Strukturieren von Informationen und Inhalten und die Erstellung von visuellen Konzepten und Prototypen. Hierbei legt sie besonders Wert auf die Balance zwischen Ästhetik und Benutzerfreundlichkeit, sowie auf eine enge Zusammenarbeit mit dem Development.

Raimund Büchner

Raimund ist oft die erste Ansprechperson bei kulturbanause. Er kümmert sich hauptsächlich um die Betreuung und Beratung unserer bestehenden als auch künftigen Kundschaft. Ein weiterer Schwerpunkt seiner Tätigkeit liegt im Design nicht unmittelbar sichtbarer Dinge: Struktur und Inhalte. Projekte unterstützt er daher vor allem in der Anfangsphase in Bereichen wie Informationsarchitektur, UX-Design und Content Strategy.