Warum organisch gewachsene Seiten immer wild, meist nicht barrierefrei und damit teuer in der Pflege sind
Viele digitale Auftritte wachsen organisch: Eine Seite hier, ein Formular dort, jedes Mal aufs Neue, gegebenenfalls aus Bestandskomponenten, zusammengewürfelt. Die Inhalte sind zwar live, aber nicht so, wie man sich das vorgestellt hat. Im Arbeitsalltag bleibt jedoch kaum Zeit, Seitenaufbauten zu hinterfragen, und schon gar nicht, neue Anforderungen umzusetzen. Irgendwann steht dann zusätzlich die Frage im Raum, wie das Ganze eigentlich barrierefrei werden soll — und plötzlich merkt man, dass jede Farbe, jede Schriftgröße, jeder Button dieses Wildwuchses einzeln geprüft und nachgebessert werden müsste. Barrierefreiheit als nachträglicher Kraftakt bremst Teams aus und frisst Budgets auf, vor allen Dingen bei organisch gewachsenen Seiten.
Genau da setzt das barrierefreie Design System Starter-Kit an. Statt euer Design im Nachhinein Seite für Seite zu reparieren, setzen wir ein zentrales, barrierefreies Fundament auf, aus dem sich künftig jede Seite und jede Komponente ableiten lässt — konsistent, dokumentiert und von Anfang an zugänglich.
Was ist ein barrierefreies Design System?
Ein barrierefreies Design System ist eine zentrale, dokumentierte Sammlung aller Gestaltungsbausteine eurer digitalen Produkte — Farben, Typografie, Abstände, Komponenten — festgehalten als wiederverwendbare Design Tokens in Figma. „Barrierefrei" heißt dabei: Kriterien wie ausreichende Kontraste, lesbare Schriftgrößen und gut bedienbare Flächen sind direkt in diese Bausteine eingebaut, nach WCAG 2.2 AA und im Einklang mit EAA und DSA. Einmal richtig entschieden, greift jede Entscheidung automatisch auf allen Seiten.
Das Starter-Kit ist der übersichtliche Einstieg in genau dieses Fundament: In wenigen Tagen entsteht ein einsatzfähiges Grundgerüst eures barrierefreien Design Systems — inklusive Schulung, mit der z. B. auch interne Teams direkt selbst weiterarbeiten können.
Für wen ist das Design System Starter-Kit geeignet?
Das barrierefreie Design System Starter-Kit richtet sich an alle Unternehmen und Einrichtungen, die ihr Corporate Design in eine digitale, skalierbare, barrierefreie Form bringen möchten — egal, ob es organisch gewachsen ist oder gerade neu entsteht. Wir übergeben ein System, das ihr verstehen und sogar eigenständig weiterführen könnt.
Was ihr bekommt
In 5 bis 8 Tagen vom Kick-off bis zur Übergabe entsteht in Figma ein einsatzfähiges Fundament, mit dem direkt weitergearbeitet werden kann:
- Eure Brand-Design-Elemente (Farben, Typografie, Abstände u. a.) übersetzt in globale und semantische Design Tokens — das Fundament eures Systems
- Bis zu 40 exemplarische Komponenten-Tokens, z. B. Buttons, Icons oder Formularelemente, die als konkreter Startpunkt fungieren
- Die barrierefreie Prüfung der Tokens und Komponenten nach WCAG 2.2 AA
- Eine Layout-Preview über drei zentrale Seitentypen als Vorlage für eure weitere Arbeit
- Eine 30-minütige Präsentation des neuen barrierefreien Designs und eine gemeinsame Anpassungsrunde
- Eine 2-stündige Anwendungsschulung, nach der interne Teams den Aufbau verstehen und erste eigene Anpassungen selbst vornehmen können
- Am Ende habt ihr ein softwareunabhängiges Design System, das zwar in Figma erstellt, aber als JSON-Datei exportiert wird und daher nicht zwingend in Figma weitergeführt werden muss
7 Vorteile eines Design Systems
Eine Quelle, auf die sich alle verlassen können. Design Tokens können zur Single Source of Truth für Design und Entwicklung werden. Was einmal im System festgelegt ist, gilt überall gleich. Vorbei die Tage von „Sieht super aus, lässt sich aber so nicht bauen".
Weniger Grundsatzfragen, mehr Tempo. Euer Team muss nicht bei jedem neuen Update aufs Neue klären: „Welches Blau? Welcher Abstand? Ist das barrierefrei?" Die Antworten stecken bereits im System — das entlastet spürbar und macht die Arbeit an neuen Inhalten schneller.
Mehr aus begrenztem Budget. Wiederverwendbare Bausteine sparen künftig Zeit und teure Nacharbeit. Statt z. B. Einzelseiten barrierefrei zu machen, kann auf einem Fundament von Seiten-Templates aufgebaut werden, die diese Grundlagen bereits mitbringen — ein verantwortungsvoller Umgang mit Budgets. Dies ist umso wichtiger, wenn es sich bei Budgets z. B. um Spender-, Förder- und Steuergelder handelt.
Leichter barrierefrei zu halten. Standardisierte Systeme mit definierten Seiten-Templates und Sektionen bleiben deutlich einfacher barrierefrei als organisch gewachsene Einzellösungen — Barrierefreiheit skaliert mit, statt jedes Mal neu erkämpft zu werden.
Plattform- und softwareunabhängig. Design Tokens funktionieren unabhängig von Technik und Software. Ob heute Website, morgen App oder ein Wechsel des Frameworks oder der Gestaltungssoftware — euer gestalterisches Fundament bleibt bestehen.
Bereit für KI-gestützte Umsetzung. Ein klar strukturiertes Design System ist eine ideale Grundlage für „Vibe Coding" und KI-gestützte Prototypen und Entwicklung: Klare Regeln und Tokens geben KI-Werkzeugen das verlässliche Gerüst, das sie für gute Ergebnisse brauchen.
Eine nachhaltige Investition. Euer Design und die Regeln zu seiner Anwendung sind in skalierbarer Form festgehalten. Beim nächsten Design-Update müssen viele Grundsatzfragen, die sonst am Anfang jedes Projekts stehen, gar nicht mehr geklärt werden. Statt neu zu beginnen, baut man einfach weiter.
Zwei Varianten — passend zu jeder Ausgangslage
Beide Varianten des Design System Starter-Kits beinhalten die gleichen Design- und Schulungsleistungen. Wir unterscheiden lediglich, ob wir mit einem bestehenden, also einem Legacy-Design arbeiten, oder ob wir ein komplett neues Design umsetzen.
Barrierefreies Design System Starter-Kit für Legacy-Designs
Projektlaufzeit: 5 Tage vom Kick-off bis zur Übergabe
Für Organisationen mit einem organisch gewachsenen Design ohne bestehendes Design System, das nun barrierefrei werden soll. Wir sichten euer Bestandssystem, übersetzen die vorhandenen Design-Elemente in globale und semantische Tokens und passen sie barrierefrei an.
Barrierefreies Design System Starter-Kit für neue Designs
Projektlaufzeit: 8 Tage vom Kick-off bis zur Übergabe
Für Organisationen mit einem neuen Design, das in die digitale Welt übersetzt oder mithilfe eines Design Systems skaliert werden soll. Wir bringen euer frisches Design von Anfang an barrierefrei in ein digitales, skalierbares System.
Was die Varianten unterscheidet
- Legacy-Designs können schneller umgesetzt werden (5 statt 8 Tage Projektlaufzeit)
- Die Komplexität der exemplarischen Komponenten-Tokens kann bei Legacy-Designs größer ausfallen, da wir nicht von null beginnen
- Neue Designs entstehen komplett von scratch: Da, wo es vorher kein digitales Design gab, gibt es im Anschluss ein Basisdesign, auf dem weiter aufgebaut werden kann
Was bei den Varianten gleich ist
Design-Leistungen: Übersetzung eurer Design-Elemente in globale und semantische Design Tokens, Umsetzung von Komponenten-Tokens wie z. B. Buttons oder Formularelemente (bis maximal 40 Komponenten), drei zentrale Seitentypen (in zwei Viewports), barrierefreie Optimierung aller Tokens nach WCAG 2.2 AA.
Absprachen, Übergaben und Schulung: 30-minütige Präsentation des neuen barrierefreien Designs inkl. einer Anpassungsrunde, 2-stündige Demo und Anwendungsschulung des fertigen Design Systems, Übergabe als Figma-Datei oder als Export (JSON und PDF).
Das Starter-Kit ist bewusst als klar umrissener Einstieg gedacht: ein definierter Startpunkt mit übersichtlichem Leistungsumfang, der euch und eurem Team ein tragfähiges Fundament gibt. Es ist die ideale Basis für die nächsten Schritte, von der Erweiterung des Design Systems bis zur begleitenden Zusammenarbeit, z. B. in Form eines Maturity Retainers.
Warum das Starter-Kit von Truly XD?
Barrierefreie Design Systeme sind Teil unseres Kerns — als Gestaltungsprinzip von Anfang an. Aus eurem Design entsteht ein skalierbares und damit nachhaltiges System, in dem Barrierefreiheit von Grund auf eingebaut ist. Ideal, um mit jeder neuen Anforderung automatisch mitzuwachsen.
Entscheidend ist dabei, was nach der Übergabe passiert: Ihr erhaltet kein System, das nur wir bedienen können, sondern ein dokumentiertes Fundament plus die Schulung, um selbst damit zu arbeiten. Denn das Design System Starter-Kit ist ein Angebot aus der Truly XD Kompetenzaufbau-Produktreihe.
Bereit für weniger Wildwuchs?
Lasst uns euer Brand Design in ein barrierefreies Fundament verwandeln, das euer Team versteht und weiterführen kann. Schickt eine Mail an jenny@trulyxd.com, nehmt über LinkedIn Kontakt auf oder vereinbart ein unverbindliches Kennenlerngespräch auf Meetergo.
