Atomic-Design für konsistentes UI

Universität Tübingen Designkonzept

Responsive Design mit Living Styleguide, der alle Gestaltungsmöglichkeiten, von den kleinsten Elementen bis hin zu fertigen Templates und Musterseiten, umfasst.

Bildmontage Universität Tübingen responsive Website Startseite

Über das Projekt

08/2018

Als eine der ältesten Universitäten Europas hat die Eberhard Karls Universität Tübingen seit dem Jahr 1477 ihren festen Platz in der internationalen Forschung und Lehre. Im Rahmen der dritten deutschen Hochschul-Exzellenzinitiative erhielt die Universität vor einigen Jahren außerdem den Exzellenzstatus. 

300 Atome, Moleküle etc.
Atomic Design mit Pattern Lab
99% im BITV Selbsttest

Im Zuge des Relaunch des zentralen Webauftritts der Universität erhielten wir den Auftrag für das Teilprojekt "Design", welches die Gestaltung und Umsetzung des Designkonzepts sowie die Erstellung eines modularen Styleguides umfasste. Eine besondere Herausforderung war dabei die Entwicklung eines Navigationskonzepts, das den hohen Anforderungen der Kern-Website sowie den eigenständigen Bereichen der Fakultäten, Institute und Fachbereiche mit ihren zahlreichen Unterseiten gerecht wird und dennoch eine intuitive Nutzerführung mit verschiedenen Zugängen zu den Inhalten gewährleistet.

Das responsive Design basiert auf einem dezenteren Farbkonzept, zeitgemäßer (Web-)Typographie, reduziertem Einsatz von Schmuckelementen sowie funktionalen und klar strukturierten Seiten, wodurch die Inhalte nun mehr im Fokus liegen. Da die Hauptnavigation mit Megamenü bis zu drei Navigationsebenen direkt zugänglich macht, wird der Einstieg zu den Unterseiten vereinfacht. Die Hauptnavigationen in den eigenen Bereichen der Fakultäten und Institute werden durch eine Bereichsnavigation im Header unterstützt, wodurch sich die Nutzer leichter orientieren können. Über leitende Elemente, wie den flexibel einsetzbaren Boxen und Neustrukturierung der Einstiegsseiten, erfolgt eine gezielte Nutzerführung über die Inhalte der Seiten. 
 

Die Verfeinerung und Umsetzung des Designkonzepts erfolgte nach dem Atomic Design Prinzip mit dem System "Pattern Lab". Hiermit lieferten wir nicht nur die HTML- und CSS-Templates für die neue Website, sondern einen Living Styleguide, in dem alle zur Verfügung stehenden Komponenten und Musterseiten aufgeführt sind und nach dem Baukastenprinzip kontinuierlich weiterentwickelt und ergänzt werden können. Dies ermöglicht eine hohe Flexibilität und Vielfalt bei der Aufbereitung von Inhalten und gewährleistet gleichzeitig ein immer aktuell bleibendes und konsistentes Erscheinungsbild sowohl für die Website als auch für weitere Webanwendungen der Universität Tübingen.

Screenshots

Impressionen des Projekts

Short facts

Leistungen und eingesetzte Technologien

Leistungen

  • Beratung & Konzeption
  • Web & Screendesign
  • Responsive Webdesign
  • Template-Umsetzung
  • Individualentwicklung
  • Living-Styleguide

Technologien

  • HTML5/CSS3
  • LESS/SCSS
  • jQuery
  • Responsive Layout
  • Bootstrap

Eberhard Karls Universität Tübingen

Tübingen

Als eine der ältesten Universitäten Europas hat die Eberhard Karls Universität Tübingen seit dem Jahr 1477 ihren festen Platz in der internationalen Forschung und Lehre. Im Rahmen der dritten deutschen Hochschul-Exzellenzinitiative erhielt die Universität vor einigen Jahren außerdem den Exzellenzstatus.

uni-tuebingen.de

Zurück zur Projektübersicht

Sie suchen einen Partner für Ihr Webprojekt?

Wir unterstützen Sie gerne: In einer unverbindlichen Erstberatung geben wir Ihnen offen Feedback und zeigen Lösungen und Wege auf. Rufen Sie uns einfach an oder schreiben Sie uns.