Alle Projekte
Branding + Website

Antidiskriminierungsbüro-Sachsen eV.

Bei der Wohnungssuche, am Arbeitsplatz, im Geschäft oder einer Behörde – wenn Menschen Diskriminierung erfahren, ist es wichtig, dass sie damit nicht allein gelassen werden. Das ADB Sachsen unterstützt Betroffene dabei, mit dem Erlebten umzugehen und berät sie, wie sie sich für Ihre Rechte stark machen können. In engem, direktem Austausch mit der Arbeitsgruppe entwickelten wir ein Corporate Design und realisierten die neue Website mit dem Content-Management-System October CMS. Wie lässt sich eine Vielzahl von Informationen für unterschiedlichste Zielgruppen schnell auffinden? Welche Prinzipien sind entscheidend für die Barrierefreiheit? Im Rahmen von zwei Workshops und einem schrittweisen Vorgehens haben wir auf diese Fragen Antworten gefunden.
Expertise
UX-Workshops, Logodesign, Prototyping, Responsive Webdesign, Entwicklung, User-Testing, Print-Design
Umfang
Logo, Website, Geschäftsausstattung, Vorlagen für Office 365, Flyer
Tools
October CMS, Sketch, Illustrator, Airtable, Office 365
Musterbriefbögen - und -visitenkarten sowie ein Tablet mit der neuen Website des ADB-Sachsen auf türkisblauem Hintergrund

Ein Logo in leichter Sprache

Für das ADB Sachsen haben wir das Corporate Design neu erarbeitet. Der minimalistische Logo-Entwurf übernimmt dabei den prägenden Charakter. In Analogie zu Verkehrszeichen, wie dem "Stopp"-Schild, suggeriert das neue Logo eine klare Botschaft: Stopp mit der Diskrimierung von Menschen! Die einfache Idee findet dabei Anwendung in unterschiedlichsten Formaten: Ordneretiketten, Aufsteller, Briefbögen und Website. Der dunkelblaue Farbton symbolisiert "Vertrauen" – einen zentralen Grundwert des eingetragenen Vereins. Für die typografische Grundgestaltung der öffentlichen Medien wird die Schriftfamilie "Din Next Pro" eingesetzt. Aufgrund der guten Lesbarkeit und der schlichten, reduzierten Grundformen findet die professionelle Schrift oft Anwendung bei der Gestaltung von Leitsystemen und Wegweisern.

Diskriminierung durchgestrichen, Pfeil nach rechts, großes durchgestrichenes D, Pfeil nach rechts, Signe des ADB mit durchgestrichenem D

Universelles Webdesign

Zur Gestaltung einer möglichst barrierefreien Website haben wir die Auswahl des Content Management Systems, das Erstellen der Informationsarchitektur, das Design, die Programmierung, sowie die geplante Erstellung von Inhalten ganzheitlich aufeinander abgestimmt. Zur Beurteilung der Qualität haben wir neben den Richtlinien der BITV (Barrierefreie-Informationstechnik-Verordnung) einen eigenen Kriterienkatalog für "gutes Webdesign" zur Evaluierung herangezogen. Bei der Bewertung der Website spielen viele Faktoren, wie Skalierbarkeit, Relevanz der Informationen, Sicherheit, Verlässlichkeit, Auffindbarkeit der Informationen, Wartung, gezielte Markenkommunikation, Mess- und Erfolgskontrolle, sowie Nutzungsfreundlichkeit eine wichtige Rolle. Im Rahmen der Evaluierung haben wir zwei Tests mit NutzerInnen durchgeführt. Die Website ist für Menschen mit Sehbehinderung einfach und intuitiv in der Bedienung. Informationen werden über die Navigation schnell gefunden und sind relevant.

schwebendes Tablet auf türkisblauen Hintergrund mit der dem Startbereich der neuen Website im Anschnitt

Von den NutzerInnen zur Seitenstruktur

In einem gemeinsamen Workshop mit der Arbeitsgruppe wurde das Feedback von WebseitenbesucherInnen, ClientInnen und EntscheidungsträgerInnen gesammelt und analysiert. Auf Grundlage der Meinungen, der Bedürfnisse, der Wünsche und Probleme wurden gemeinsam NutzerInnenprofile erstellt. Für die gewonnenen Proto-Personas hat die Arbeitsgruppe fiktive Fragen bei der zukünftigen Nutzung ermittelt. Die Fragen der NutzerInnen wurden vereinfacht und durch ein offenes Card-Sorting gruppiert. Die einzelnen Gruppen bildeten dabei inhaltliche Themen. Die Bereiche, wie beispielsweise Informationen zu den Angeboten Beratung, Weiterbildung und Materialien wurden priorisiert und chronologisch strukturiert. Auf diese Weise konnte in mehreren Schritten eine nutzerInnenzentrierte Seitenstruktur gewonnen werden. Diese bildete die Grundlage für die Erstellung von Inhalten und Design.

Methodische Herangehensweise: Nutzerfeedback, Pfeil nach rechts, Zielgruppe, Pfeil nach rechts, Nutzerfragen, Pfeil nach rechts, Card Sorting, Pfeil nach rechts, Seitenstruktur

Barrierefreies Design

„The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.“ - Tim Berners-Lee, W3C Director (W3C 2003)

"Barrierefrei" bedeutet für uns nicht nur, dass die Bedürfnisse von Menschen mit Behinderungen berücksichtigt werden sollten, sondern dass alle möglichen Barrieren für unterschiedliche Zielgruppen vermieden werden. Somit sollen alle Menschen unabhängig ihrer Sprache, ihrer wirtschaftlichen Situation und ihren körperlichen oder geistigen Einschränkungen auf die Informationen rund um das Thema Diskriminierung zugreifen können.

Lupe über der neuen Website, die das Breadcrumb und einen Teil des Logos hervorhebt

Konsistente Navigation

Die Website ist klar gegliedert und hält die Anforderungen in den Bereichen Informationsstruktur, Navigation und Auffindbarkeit ein. Die Inhalte sind optimal für Suchmaschinen und Screenreader aufbereitet. Der klar abgegrenzte Rahmen schafft Orientierung und bietet eine übergreifende Navigation. Der Einsatz von Breadcrumbs (Brotkrumennavigation) erleichtert NutzerInnen die Orientierung und gibt zu jedem Zeitpunkt Auskunft, wo sie sich gerade befinden. Die Darstellung wurde optimiert für unterschiedliche Endgeräte wie Tablet, Mobile Devices und Desktop.

Erleichterte Accessibility

Die Website bietet Videos in der deutschen Gebärdensprache (DGS). Somit können Gehörlose und hörbeeinträchtigte Menschen wichtige Grundinformationen abrufen. Da nicht nur Menschen mit Behinderung, sondern auch Menschen mit fehlenden Sprachkenntnissen besondere Aufmerksamkeit erhalten sollten, besteht die Möglichkeit über die "Leichte Sprache" Informationen auf einfachem Niveau zu erhalten. Darüber hinaus bietet die Website Informationen in sechs Sprachen an.

Lupe über der neuen Website, die die Menüoptionen für Accessibillity (Schriftkontrast, leichte Sprache, Gebärdensprache und Fremdsprachen) hervorhebt.

Verbesserte Lesbarkeit

Die Lesbarkeit von Informationen kann durch ein vermindertes Sehvermögen stark beeinträchtigt sein. Die Website setzt daher auf flexible Schriften. Die Größe der Schrift kann über das Menü oder den Browser beliebig angepasst werden. Im Sinne des Universal Design ist die Schrift auch ohne spezielle Einstellungen lesbar, kontrastreich und klar strukturiert.

Lupe über der neuen Website, die einen Absatz der Website (Überschrift, Beschreibungstext und Button) hervorhebt

Screenreader-Kombatibillität

Damit Menschen mit Sehbehinderung auf die Website zugreifen können, wurden bei der konzeptionellen und technischen Entwicklung mehrere Aspekte berücksichtigt. Links sind kontextbezogen beschrieben ("Zur Beratung" anstelle "Weiter") und entsprechend im Quellcode ausgezeichnet. Die Formulare zur Beratung sind speziell mit Beschriftungen hinterlegt. Bilder sind mit ALT-Tags versehen und können deshalb auch über Suchmaschinen besser gefunden werden.

Codeabschnitt mit aria-label, Pfeil nach oben zeigt visuelles Ergebnis, Pfeil nach unten zeigt Ergebnis bei Sprachausgabe