Der Barrierefreie-Designsystem-Blueprint
Neu!
Das Nachschlagewerk für alle Anforderungen der WCAG und EN 301 549! Erstelle barrierefreie Designsysteme, ohne lange nach Antworten suchen zu müssen oder etwas zu vergessen.
Dein neuer Desing-Begleiter!
Du bist mit den Designanforderungen der WCAG überfordert? Du hast Angst, etwas zu vergessen und nicht alle Anforderungen mitzudenken? Du willst leicht verständliche Vorlagen, was du bei jeder Komponente beachten sollst?
Mit unserem Barrierefreie-Design-System-Blueprint wollen wir all diese Fragen und Ängste beseitigen!
Wir geben zu, die Anforderungen an Barrierefreiheit können am Anfang etwas verwirrend sein. Man weiß nicht genau, wo man anfangen soll, was man alles beachten muss und wie sich die Anforderungen auf jede Komponente im Design-System auswirken.
Darum haben wir diesen Design-Blueprint erstellt, der dich durch den Prozess führt und dein neuer Begleiter ist, wenn es um Barrierefreiheit im Design-Alltag geht.
Was du bekommst
Anforderungen auf Komponenten-Basis
Wir zeigen dir für alle gängigen UI-Komponenten für Websites und Apps, was du beachten musst, um sie barrierefrei zu machen!

Fehler, Lösungen und Best Practices
Positive Beispiele, Best Practices, Warnungen und gängige Fehler. Wenn nötig, gibt es noch Hintergrundwissen und Tool-Empfehlungen!

Alles an einem Ort: gut strukturiert
Kein langes Suchen auf Websiten, in Kursen oder der WCAG. Der Blueprint hat alles, was du bei barrierefreien Designs beachten musst, an einem Ort!

Beispiele von echten Seiten
Zusätzlich zu den Erklärungen und Beispielen in Figma versuchen wir, wo es möglich ist, auch Beispiele auf echten Webseiten zu zeigen.

Updates mit neuen Komponenten
Updates mit neuen Komponenten, Tools oder – je nach Feedback von euch – detaillierteren Erklärungen.

Support bei Fragen
Du kannst jederzeit Fragen stellen und deine Wünsche äußern, um das File noch hilfreicher zu machen!

Für wen ist der Design-Blueprint?
UI & UX Designer*innen
In erster Linie richtet sich der Blueprint and UI/UX-Designer*innen, die wissen müssen, worauf es ankommt, wenn sie barrierefreie UI-Designs erstellen.
Marken-Designer*innen
Aber auch Marken-Designer*innen finden in dem File alle Best Practices, die sie benötigen, um eine Brand von Grund auf barrierefrei zu planen und zu konzipieren.
Wie sieht das GEnau aus?
Zu jedem Design-Thema, das mit Barrierefreiheit zu tun hat (Umgang mit Farben, Texten, Icons etc.), und zu den gängigsten UI-Komponenten (Buttons, Formulare, Karusselle …) findest du Anleitungen.
Diese Anleitungen verdeutlichen, was konform mit der WCAG ist, was als Fehler gilt und was gerade so durchgeht, aber nicht die Beste Practices ist.
Bei dem Thema »Text auf Bild« zeigen wir zum Beispiel, warum Text auf Overlays setzen nicht optimal ist, was man stattdessen tun kann und natürlich, dass Text einfach so auf ein Bild zu setzen ein klassischer Fail mit der WCAG ist.
Barrierefreie-Designsystem-Blueprint holen!
Der Barrierefreie-Designsystem-Blueprint
Ein Figma-File mit allen Anforderungen der EN 30 1549 und WCAG!
Was du bekommst:
- Zugriff auf ein Figma-File mit allen Anforderungen der WCAG & EN 301 549 für deine Design-Systeme.
- Lösungen, Best Practices und gängige Fehler.
- Anleitungen für die barrierefreie Umsetzung der wichtigsten UI-Komponenten.
- Updates mit neuen Komponenten, Tools oder – je nach Feedback von euch – detaillierteren Erklärungen.
- Support bei weiteren Fragen.
Häufige Fragen
Was ist der Blueprint für barrierefreie Designsysteme?
Der Blueprint ist ein Figma-File, das dir alle Informationen liefert, die du brauchst, um barrierefreie Designsysteme zu erstellen. Du findest darin Anleitungen, wie du die Barrierefreiheit einhältst und damit WCAG und EN 301 549 konform wirst. Außerdem zeigen wir dir darin, Best Practices und gängige Fehler. Von der Auswahl der Farbe, bis zum Umgang mit Formularen findest du alles, was du beachten musst, an einem Ort!
Ich habe schon einen Workshop für Design gemacht, hilft mir der Blueprint trotzdem?
Das musst du natürlich selbst entscheiden. Wenn du das Gefühl hast, du hast bereits genug Wissen, dann ist unser Blueprint für dich vielleicht nichts mehr. Aber auch in unserer täglichen Arbeit hilft er uns sehr, nicht nur die Kriterien einzuhalten, sondern sie auch zu testen und an Kunden zu kommunizieren. Melde dich bei uns, wenn du unseren Workshop schon besucht hast, und du bekommst 25 % Rabatt.
Wie lange habe ich Zugriff auf den Blueprint?
Der Zugriff ist unbegrenzt!
Dürfen mehrere Leute auf den Bluprint mit einem Kauf zugreifen?
Nein. Jeder Kauf ist eine Einzellizenz. Bei mehr als 3 Leuten, melde dich gerne für einen Mengen-Rabatt!