Web Design News & Link-Tipps – Nr. 42

Von: Jonas, Raimund, Sophie, Felix, Konstantin

Unsere Themen im Mai: Die Figma-Konferenz Config mit vielen Neuerungen, die Zukunft des Webdesigns, native CSS-Carousels und die kommenden WCAG 3.0 mit deutlich verbessertem, nutzungszentrierterem Bewertungssystem.

Aktualisiert am 22. Mai 2025

UX/UI Design

Zahlreiche Erweiterungen bei Figma

Auf der diesjährigen Figma-Konferenz Config wurden zahlreiche Neuerungen vorgestellt. Figma Design unterstützt nun CSS Grids – ein überfälliges Feature, das wir bereits letztes Jahr erwartet hatten. Zudem wurde ein neuer Mode namens Figma Draw ergänzt, der den Fokus stärker auf das Malen und Zeichnen mit Vektor-Pfaden legt. Darüber hinaus wurden umfangreiche neue Tools veröffentlicht, die sich in Beta befinden und für die später eigene, kostenpflichtige Lizenzen notwendig werden.

Figma Sites ist eine direkte Konkurrenz zu Webflow und Framer und ermöglicht die Veröffentlichung fertiger Websites aus Figma-Designs heraus. Hier scheint noch etwas Arbeit notwendig zu sein, um zur Konkurrenz aufzuschließen. Mit Figma Make wurde ein AI-Tool veröffentlicht, dass aus der Kombination von Figma Designs und AI Prompts interaktive Prototypen erzeugt. Figma Buzz richtet sich an Personen, die Brand Assets erstellen müssen. Im Zuge dessen wird es bald auch eine neue Lizenz für Content-Producer geben, die in Buzz oder Sites rein redaktionell mitarbeiten. 

Wie Voreingenommenheit gegenüber Design Systemen vermieden werden kann

Design Systeme neigen dazu, die Perspektive einzelner Gruppen (z.B. Designer oder Developer) stärker zu berücksichtigen als die anderer Projektbeteiligter. Der Artikel »Bias in Design Systems« sensibilisiert für das Thema, zeigt typische Workflows und bietet konkrete Lösungsvorschläge an, mit denen wir selbst auch gute Erfahrungen machen.

Lokalisation von Design Systemen

In »Integrating Localization Into Design Systems« wird beschrieben, welche Anforderungen zu erfüllen sind und welche Probleme sich daraus ergeben, wenn Design Systeme so vorbereitet werden sollen, dass sie in verschiedene Kulturräumen und Sprachen funktionieren. Herausforderungen wie unterschiedliche Textlängen, verschiedene Textlaufrichtungen sowie Inkonsistenzen von Schriftschnitten in verschiedenen Sprachen und Sprachsystemen werden erörtert. Es wird die Entstehung eines flexiblen Systems beschrieben, das Lokalisation effizient unterstützt und Fehler im späteren Entwicklungsprozess vermeidet.

Die Zukunft des Webdesigns

Im Artikel »The Future of Web Design: Will We Even Recognize It in 100 Years?« stellt Noah Davis die These auf, dass sich Webdesign in den nächsten 100 Jahren so radikal verändern wird, dass es mit heutigen Standards kaum noch vergleichbar sein wird. Designer könnten zu »Experience Engineers« werden, die dynamische, personalisierte Umgebungen gestalten, die sich nahtlos in unseren Alltag integrieren.

Frontend

<dialog> und Popover API

Auf den sog. »Top Layer« des Browsers können wir im Code aktuell über <dialog> oder mittels Popover API zugreifen. Der Artikel »Dialog is for modals, popover is for everything else« erklärt die Unterschiede.

GSAP-Animationen vollständig kostenfrei

Die Javascript-Animations-Bibliothek »GSAP« ist jetzt vollständig kostenfrei verfügbar, inklusive aller Premium-Plugins und für kommerzielle Zwecke. Webflow hatte die Bibliothek erst vor wenigen Monaten aufgekauft und sich nun mit Veröffentlichung der Version 3.13 überraschend zu diesem Schritt entschieden.

Native Carousels mit CSS

Seit Chrome 135 sind neue CSS-Pseudo-Elemente wie ::scroll-button() und ::scroll-marker() verfügbar, mit denen sich u.a. Slider und Carousels ohne JavaScript realisieren lassen. Im Chrome Developer Blog werden die Funktionen detailliert beschrieben.

Automatisch ausreichende Farbkontraste mit contrast-color()

Ein Beitrag im Webkit-Blog erklärt eine neue CSS-Funktion contrast-color(), die den Browser befähigen soll, automatisch eine Farbe mit ausreichend Kontrast zu einer angegebenen Referenzfarbe auszugeben. Sie wird als deutlich vereinfachte Variante des Vorläufers color-contrast() beschrieben, was wohl hauptsächlich der Tatsache geschuldet ist, dass noch immer nicht klar ist, welche Farbkontrastberechnungen für WCAG 3 notwendig sein werden.

Gitarrengriffe mit CSS visualisieren mit CSS attr()

Mads Stoumann zeigt in seinem Beitrag, wie sich Gitarrengriffe allein mit HTML und CSS und dem Einsatz der neuen verbesserten attr()-Methode visualisieren lassen. Besonders beeindruckend ist die Umsetzung von Barre-Griffen, offenen und gedämpften Saiten sowie Fingerpositionen – alles rein mit CSS realisiert.

Typografie mit lh-Einheiten verfeinern

Jen Simmons erläutert in diesem Beitrag auf WebKit, wie die gar nicht so neuen CSS-Einheiten lh und rlh die Gestaltung von vertikalen Abständen verbessern. Die lh-Einheit entspricht der aktuellen Zeilenhöhe des Elements, während rlh auf die Zeilenhöhe des Root-Elements verweist. Diese neuen Einheiten sind seit 2023 in allen gängigen Browsern verfügbar und bieten eine verbesserte Möglichkeit, typografische Details zu optimieren.

Barrierefreiheit

Reading-Order ab Chrome 137

Wir haben bereits in Ausgabe 29 über die CSS-Eigenschaft reading-order berichtet – einer Technik, um die Tab-Reihenfolge mit CSS festzulegen. Chrome 137 führt die neuen CSS-Eigenschaften reading-flow und reading-order nun ein, um die Tastaturnavigation und die Fokus-Reihenfolge in Flex- und Grid-Layouts an die visuelle Anordnung anzupassen.

WCAG 3.0 führt eine neue Bewertungslogik für mehr Nutzerzentrierung ein

Die kommende Version der Web Content Accessibility Guidelines (WCAG 3.0) verabschiedet sich vom bisherigen »Pass/Fail«-Modell und führt ein differenziertes Bewertungssystem ein. Anstelle binärer Ergebnisse werden einzelne Aspekte wie Tastaturnavigation, Formularbeschriftung oder Fehlermeldungen separat bewertet und auf einer Skala von »Poor« bis »Excellent« eingeordnet. Diese Scores werden anschließend zu einem Gesamtergebnis aggregiert, das die tatsächliche Nutzererfahrung besser widerspiegelt. Kritische Fehler können jedoch weiterhin das Gesamtergebnis maßgeblich beeinflussen. Dieser Ansatz reflektiert wesentlich besser die allgemeine Nutzungserfahrung. Mikhail Prosmitskiy hat eine gute Zusammenfassung auf Smashing Magazine erstellt.

Eine Lösung für Karussells nur mit CSS ist da – aber auch barrierefrei?

Weiter oben haben wir auf die neuen, nativen CSS-Karussells aus dem Overflow Module 5 hingewiesen. Sara Soueidan analysiert in diesem Artikel, wie diese in Bezug auf Barrierefreiheit abschneiden. Trotz des Versprechens, »von Haus aus barrierefrei« zu sein, zeigen ihre Tests, dass viele Implementierungen grundlegende Probleme aufweisen – etwa fehlende eindeutige Namen, unvollständige ARIA-Rollen und inkonsistente Tastaturnavigation. Ein wichtiger Beitrag, der zeigt, warum neue CSS-Features nicht automatisch zugänglich sind und wie wichtig kritisches Hinterfragen bleibt.

Tools

• Mit dem Design Tokens Generator können Tokens anhand zahlreicher Konfigurationsmöglichkeiten erzeugt und als JSON exportiert werden.
• Das Figma-Plugin »Select all instances« hilft dabei, alle Instanzen innerhalb eines verschachtelten Figma-Dokuments zu überprüfen
• CSS Hell – 15 Puzzles für wirklich masochistische oder wirklich gute CSS-Fans …

Geschrieben von:

Jonas Hellwig

Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. 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 Xing

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.

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.

Felix Lehmann

Als Team Lead für Design und Code bei kulturbanause verantwortet Felix die Konzeption, Gestaltung und Entwicklung komplexer Websites und Designsysteme. Er begleitet den gesamten Prozess – vom ersten Workshop bis zum Launch. Wenn er nicht selbst maßgeblich an der Umsetzung beteiligt ist, unterstützt er das Team bei der Umsetzung moderner, funktionaler Lösungen mit aktuellsten Browser-Technologien und ist die Schnittstelle zum Kundenteam.

Konstantin Hanke

Konstantin arbeitet als Webentwickler bei kulturbanause. Seine Hauptaufgabe ist die technische Umsetzung von klaren, soliden und effizienten Webauftritten und Website-Komponenten. Darüber hinaus kümmert er sich um die Wartung, Optimierung und Weiterentwicklung von bestehenden Websites. Sein besonderes Interesse gilt der Idee von quelloffener, freier Software.