Web Design News & Link-Tipps – Nr. 37

Von: Raimund, Jonas, Sophie, Felix, Konstantin

Unsere Themen im Dezember: Der neue Web-Almanach, passende Design Tokens für bessere Design-Systeme, moderne CSS-Umsetzungen von klassischen UI-Elementen, WordPress-Trends für 2025 und eine Beeinträchtigung, gegen die Web Design nichts ausrichten kann.

Aktualisiert am 10. Dezember 2024

Allgemein

Web Almanac 2024 erschienen

Der jährlich erscheinende Almanach ist eine Zusammenfassung der aktuellen Entwicklungen, unterlegt mit Statistiken. Es macht definitiv Sinn, alles komplett zu lesen (super umfangreich!), auch wenn man schon länger dabei ist.

CSS hat jetzt ein offizielles Logo

Das neue CSS-Logo soll das inoffizielle, weit verbreitete CSS3-Shield-Logo ablösen und damit die Weiterentwicklung der Sprache auch optisch unterstreichen. Die Hintergrundfarbe des Logos ist »Rebecca Purple« — eine Hommage an Rebecca Meyer, Tochter des geschätzten Webstandardexperten Eric Meyer, die im Alter von sechs Jahren verstarb.

Umwälzender Einfluss von KI auf das Web Design

UX-Veteran Paul Boag begrüßt die neuen AI-Zeiten. Vom UI Design über Coding und UX bis zum Copywriting verändert KI das Arbeitsfeld Web Design tiefgreifend. Der Artikel geht auf alle Bereiche ein und nennt Beispiele, wobei Boag die Rolle der KI mit einem hochqualifizierten Praktikanten vergleicht.

UX/UI Design

Die Design-Tokens, die wir nutzen, entsprechen nicht den Design-Systemen, die wir entwickeln

In diesem Artikel identifiziert Nate Baldwin einen Unterschied zwischen den Anforderungen an Design-Tokens in einem Erstellungs- und einem Anwendungs-Workflow. Er stellt die These auf, dass wir eigentlich keine Tokens benennen, sondern Taxonomie-Systeme definieren und dann die Daten klassifizieren. Das klingt jetzt etwas abstrakt, aber er hat einen Punkt. Mit dem aktuellen technischen Stand und den verfügbaren Designtools generieren wir oft unflexible, fragile Systeme, die eigentlich nicht ihrem Anspruch gerecht werden.

UX Goals vs. OKRs vs. KPIs

Die NNGroup hat ein kurzes Video veröffentlicht, dass die drei Begriffe einordnet und anhand eines Beispiels erklärt, wie sie zur Messung von Zielen und Erfolg genutzt werden können.

Die Erstellung des neuen Figma Design-Systems – UI3

Der Artikel gibt Hintergrundinformationen zum neuen Design-System von Figma UI3. Er erklärt, warum die Schaffung eines konsistenten und flexiblen Systems notwendig war, beschreibt die Herausforderungen des zuvor fragmentierten Systems und zeigt auf, wie das Design-System nun die Zusammenarbeit zwischen Designer und Entwickler effizienter gestaltet. 

Frontend

Moderne Ansätze für Accordion, Modal und Co.

Auf CSS Tricks sowie auf Zeroheight sind Artikel erschienen, die sich klassische UI-Elemente vornehmen und beleuchten, wie diese mit modernem HTML/CSS (::details-content, Popover API etc.) realisiert werden können.

Auch Kevin Powell nutzt das Pseudo-Element ::details-content und die CSS-Eigenschaft interpolate-size, um mit modernem CSS Details/Summary-Elemente auf einfache Weise zu animieren. Funktioniert noch nicht flächendeckend, macht das Feature aber fit für die Zukunft.

State of JS 2024 offen für Teilnahme

Die jährliche Umfrage zu JavaScript ist für die Teilnahme geöffnet. Wir werden über die Ergebnisse berichten.

CSS overflow: clip

Der Wert clip für die overflow-Eigenschaft von CSS ist in den Browsern gut unterstützt, doch eher unbekannt. Ahmad Shadeed erklärt auf bekannt anschauliche Weise, wie die Technik funktioniert, und zeigt praktische Anwendungsfälle.

Weiche Übergänge mit View Transition API

In diesem Artikel wird erläutert, wie die View Transitions-API verwendet werden kann, um in Webplattform-basierten Anwendungen weiche Übergänge zwischen Zuständen oder Seiten zu ermöglichen, ohne auf einen Drittanbieter angewiesen zu sein. Es wird gezeigt, wie einfach und effizient solche Transitions in bestehende Projekte integriert werden können, ohne dass die Codebasis grundlegend überarbeitet werden muss.

Neue CSS Funktionen, die jetzt verwendet werden können

Thomasorus hat eine Liste von neuen CSS Funktionen zusammengestellt, die jetzt in allen modernen Browsern verfügbar sind und die Art, wie wir Websites umsetzen, fundamental ändern.

Ethan Marcottes Buch »Responsive Web Design« ist jetzt vollständig und kostenfrei online verfügbar

Ethan hat den Begriff »Responsive Web Design« geprägt. Seit seiner bahnbrechenden Veröffentlichung im Jahr 2011 bleibt Responsive Web Design eine grundlegende Ressource und ist jetzt mit Vorwort von Jeremy Keith und kostenfrei online verfügbar.

Benutzt mehr Layers

Schon seit der Bekanntmachung, dass Cascade Layers Einzug in alle Browser erhalten werden, sind wir große Fans und Anwender der ersten Stunde. Dieser Artikel erklärt das Prinzip anhand eines CSS-Resets.

WordPress

WordPress 2025 – Herausforderungen und Chancen

Frank Klein zeichnet die Entwicklung von WordPress nach, das einst für seinen einfachen Einstieg geschätzt wurde und heute deutlich mehr technisches Wissen als gehostete Plattform-Lösungen erfordert. Das macht es für Einsteiger weniger attraktiv und erhöht die Notwendigkeit für Entwickler, ihre Kenntnisse zu erweitern. WordPress entwickelt sich nach oben in eine anspruchsvollere und hochpreisige Kundengruppe hinein. Das verkleinert den Plugin-Markt und verlangsamt das Wachstum von Page Buildern, da diese weder in High-Class-WordPress-Projekten noch in gehosteten Plattform-Lösungen relevant sind.

Performance

Core Web Vitals für Performance-Vergleich

Harry Roberts entwickelt auf Grundlage der Core Web Vitals (CWV) eine Methode, eine beliebige Anzahl von Websites in der Performance zu vergleichen. Dazu sind einige Berechnungen notwendig, am Ende steht ein übersichtliches und recht überzeugendes Ergebnis.

Barrierefreiheit

Ansprechende und barrierefreie Focus-Outlines

Der Beitrag »Beautiful focus outlines« erklärt, wie eine individuelle Gestaltung von Fokus-Zuständen die Nutzbarkeit von Websites verbessern kann, und gibt Tipps für eine konsistente, sichtbare und ansprechende Gestaltung. Diese verbessert nicht nur die optische Darstellung, sondern ist auch Voraussetzung für eine barrierefreie Umsetzung.

Unterschiedliche Arten von fokussierbaren UI-Elementen

Eric Eggert erläutert zwei unterschiedliche Arten von fokussierbaren Elementen: Sequenziell fokussierbare Elemente und Elemente, die außerhalb der Sequenz liegen, aber trotzdem fokussierbar sind und deshalb auch im Accessibility Tree einer Website auftauchen. Essenzielles Wissen, um UIs für Tastatursteuerung zugänglich zu machen.

Alt-Text wird nicht immer gebraucht

Der Beitrag zeigt, dass Alternativtexte für Bilder nicht immer erforderlich sind. Das kann beispielsweise der Fall sein, wenn ein Bild keine zusätzlichen Informationen enthält oder die Informationen bereits an anderer Stelle klar dargestellt sind. Der Beitrag bietet Hilfestellungen für die Entscheidung, wann ein Alt-Text sinnvoll ist. Ziel ist es, die Barrierefreiheit zu verbessern, ohne Nutzer durch unnötige Informationen zu überfordern.

Berührung nicht erkannt: Eine Barriere für ältere Menschen

Manchen Beeinträchtigungen können wir nicht mit besserem Design entgegenwirken. Wir müssen uns jedoch bewusst sein, dass sie existieren. Bspw. funktionieren fast alle Touch Screens kapazitiv, indem sie die elektrische Ladung in unserer Haut nutzen. Leider wird bei Menschen ab 40 die Haut immer trockener, weshalb Touch Screens zunehmend verzögert oder gar nicht reagieren.

Tools

• Anchoreum ist ein weiteres Tool zum Erlernen der CSS-Eigenschaft Anchor Position.
• CSS Shadow Palette Generator erzeugt CSS-Schatten für Elevation-Tokens.
• Auf Freelogo.me gibt es ansprechende Platzhalter-Logos, die kostenlos als SVG heruntergeladen und ohne Einschränkungen verwendet werden können.
• UI Inspector – Inspect & Edit Websites ist eine Chrome-Erweiterung, die es ermöglicht, Websiteinhalte zu inspizieren, zu bearbeiten und zu stylen.
• Die browserbasierte Plattform Magma ermöglicht es Anwendenden, in Echtzeit gemeinsam auf einer geteilten Leinwand zu zeichnen.
• Draw.Audio ist ein kostenloses Musik-Tool zum Entdecken von Klangsynthese, basierend auf der Web Audio API.
• Auf Easing Wizard erstellt man mithilfe einer übersichtlichen grafischen Oberfläche komplexe cubic-bezier-Werte für CSS transition-timing-function oder animation-timing-function.

Geschrieben von:

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.

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

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.