Atomic Design für konsistentes UI

Der letzte Relaunch des zentralen Webauftritts der UT lag bereits knapp zehn Jahre zurück. Die UT stand somit vor der Herausforderung, den zentralen Webauftritt in allen Bereichen zu erneuern. Dies sollte in ca. zwei Jahren, rechtzeitig zur kommenden Evaluierung der Exzellenzinitiative, gelingen.

Der zentrale Webauftritt der UT umfasst mehrere zehntausend Seiten und erstreckt sich über ca. 25 Hierarchieebenen, die zugänglich zu machen sind. Das System wurde zum damaligen Zeitpunkt auf verteilten Servern des Rechenzentrums der UT betrieben. Aufgrund des Umfangs der Website und der Komplexität des Projekts erfolgte eine Aufteilung in mehrere Teilprojekte. Unsere Agentur zeichnete für das Teilprojekt „Design“ verantwortlich. Die Aufgabenstellung des Projekts umfasste die komplette Erneuerung des Corporate Designs der UT für den Bereich Web. Hierfür sollte zunächst ein responsives Designkonzept für die zentrale Website sowie das angehängte Intranet erarbeitet und anschließend in vollwertige, barrierefreie HTML5-Templates (inkl. SCSS, Javascript etc.) umgesetzt werden. Die erstellten Templates sollten so aufbereitet und dokumentiert werden, dass diese vom nachfolgenden Teilprojekt „Technik“ mit möglichst geringem Aufwand in das TYPO3-System zu integrieren und alle wesentlichen Inhaltselemente abgedeckt sind.

Eine weitere Teilaufgabe des Projekts beinhaltete die Konzeption und Umsetzung eines so genannten „Living Styleguides“. Dieser sollte das entwickelte Corporate Design der UT bzw. die darin enthaltenen UI-Komponenten etc. möglichst vollständig dokumentieren und u.a. für die Weiterentwicklung sowie die Verwendung in Webprojekten außerhalb des zentralen Redaktionssystems herangezogen werden können. Grundlage bei der Entwicklung sollten die Prinzipien des „Atomic Design“ bilden.

Umsetzung als agiler Prozess

Die Umsetzung des Projekts wurde als agiler Prozess ausgestaltet, der mit mehreren Workshops eingeleitet wurde. Herausforderung und Aufgabe letzterer war es u.a. die vielfältigen, im Einzelfall gegenläufigen, Anforderungen und Vorgaben der verschiedenen Interessengruppen und Projektbeteiligten im Umfeld einer großen Hochschule in Einklang zu bringen – was durch eine enge Zusammenarbeit mit unseren Ansprechpartnern in der Hochschulkommunikation auch gelungen ist. Die Erarbeitung des Designkonzepts sollte auf den Ergebnissen des Pitch-Prozesses aufbauen und erfolgte nach dem Top-Down-Verfahren grob in vier Schritten mit Iterationen: 

• Gestaltung des responsiven Grundgerüsts
• Gestaltung der benötigten UI-Elemente basierend auf den HTML-Elementen der aktuellen HTML5-Spezifikation
• Gestaltung gängiger und spezifischer UI-Muster basierend auf den UI-Elementen
• Gestaltung vorgegebener Seitentemplates, basierend auf den UI-Mustern und den UI-Elementen

Besonderes Augenmerk legte die UT weiterhin auf die Entwicklung des Navigationskonzepts und die damit verbundene technische Umsetzung. Diese war wesentlich von der Struktur und Tiefe des Seitenbaums beeinflusst, der ca. 25 Ebenen umfasste. Im Verlauf des Projekts wurden zahlreiche Mechanismen und Gestaltungen in Form von Entwürfen und Prototypen evaluiert und diskutiert, um die Erfüllung der zahlreichen Anforderungen abzuprüfen. Schließlich wurde eine Lösung erarbeitet, die mehrere Navigationsmechanismen kombiniert und als zentrales Element ein Megadropdown-Menu aufweist, das auf dem Desktop drei und mobil bis zu acht Ebenen direkt zugänglich macht.

Die Umsetzung nach den Prinzipien des Atomic Designs konnte zügig vorangetrieben werden. Beginnend mit grundlegenden Elementen wie Buttons oder Boxen (Atome, Moleküle) wurden immer komplexere Strukturen bis hin zu Templates und vollständigen Musterseiten aufgebaut. Der Aufbau des Living Styleguides auf Basis der Open Source Software „Pattern Lab“ stellte beide Seiten vor Herausforderungen, die jedoch gemeinsam gemeistert wurden. Als spezialisierte TYPO3 Agentur, die in der Regel sowohl die konzeptionelle als auch die technische Umsetzung von Websites verantwortet, war unser Team gut gerüstet, die erstellten Templates für die Weiterverarbeitung durch anschließende Teilprojekte vorzubereiten. Die Umsetzung des Projekts endete nach rund sieben Monaten erfolgreich mit der Abnahme seitens der UT und Übergabe sämtlicher Ressourcen.

Umfassendes Designkonzept für den universitären Alltag

Im Ergebnis des Projekts entstand ein umfassendes Designkonzept, das alle Belange des universitären Alltags abdeckt und sich in den Folgejahren im praktischen Einsatz an der Hochschule bewähren konnte. Ergänzt wurde das Konzept um ein zusätzlich entwickeltes Markenlogo zur Exzellenzinitiative „We value excellence.“

Im Rahmen des Living Styleguides wurden detaillierte Templates und Musterseiten für rund 20 Seitentypen, beginnend mit der zentralen Startseite über Fakultäten, Institute und Einrichtungen bis hin zu diversen Sonderseiten für News, Events, Mitarbeiter, Intranet und Text aufgebaut. Gleichsam wurden mehr als 100 UI-Komponenten in unterschiedlichen Komplexitätsstufen implementiert, dokumentiert und mit Hinweisen zur Verwendung sowie Barrierefreiheit angereichert. Der erstellte Styleguide ist online einsehbar. Die Umsetzung der Templates erfolgte auf Basis aktueller Webstandards. Die Qualitätssicherung im Frontend erfolgte u.a. durch systematische und protokollierte Browsertests, teilweise unter Zuhilfenahme webbasierter Testplattformen und virtueller Maschinen. Die Einhaltung von Standards zur Barrierefreiheit und Zugänglichkeit wurde durch einen BITV-Selbsttest sichergestellt.

Für das Team unserer Agentur konnten wertvolle Erfahrungen im Umfeld einer großen deutschen Hochschule gesammelt werden, die auf vielfältige Weise in spätere Projekte und bestehende Prozesse eingegangen sind.