Redesign für den redaktionellen Bereich des Cranach Digital Archive


Lisa Sophie Charlotte Hildmann & Marvin Dominik Kessmann

Kontext
Cranach Digital Archive (CDA)
Modul
Screendesign
Semester
Wintersemester 2024/25
Studiengang
Medieninformatik Ba.

Im diesjährigen Projekt lag der Fokus auf der Neugestaltung des redaktionellen Teils des Cranach Digital Archive (CDA). Ziel war es, die Startseite und Navigation zu vereinfachen und die Inhaltsseiten lebendiger zu gestalten, während sie dem professionellen, klaren, einfachen, reduzierten, akzentuierten und zeitlosen Erscheinungsbild des Archivs entsprechen. Die Startseite bietet mehr gestalterische Freiheiten, um Neugier zu wecken, während der redaktionelle Teil bewusst weniger schematisch als die Such- und Artefaktseiten gestaltet ist. Alle Seiten unterstützen einen Wechsel zwischen Light und Dark Mode, wobei standardmäßig der Dark Mode aktiviert ist. Die überarbeitete Navigationsleiste ist auf das CDA-Logo, die Sprachwahl, den Farbmoduswechsel sowie die Hauptthemenbereiche reduziert. Sie bleibt dauerhaft am oberen Bildschirmrand sichtbar und scrollt mit. Während sie auf dem Desktop fest integriert ist, kann sie auf Tablets und Smartphones ausgeklappt werden, wobei die Themenbereiche horizontal (Tablet) oder vertikal (Smartphone) angeordnet sind. Die Startseite ist in zwei Hälften unterteilt, getrennt durch eine gelbe Linie, die auch als Gestaltungselement einen visuellen Akzent setzt. Die obere Hälfte enthält den Titel des Archivs, eine horizontal scrollbare Bildergalerie mit Werken von Cranach sowie Buttons, die direkt ins Archiv führen. Die untere Hälfte enthält Themenkärtchen, die zu den redaktionellen Inhaltsseiten führen. Jedes Kärtchen kombiniert ein Bild oder einen Trailer mit einem kurzen erklärenden Text und einem Pfeil zur entsprechenden Seite. Diese Elemente sind vorallem stilistisch von den Kärtchen der Artefaktseiten inspiriert. Unterhalb dieser Kärtchen befinden sich drei Informationskästen für Partner, Kontakt und Newsletter, gefolgt vom Footer. Auf dem Smartphone sind die Themenkärtchen vertikal untereinander angeordnet, auf dem Tablet stehen sie paarweise nebeneinander.

Die Inhaltsseiten verbinden Klarheit mit einer interaktiven Navigation. Eine Scrollbar am rechten Rand kann nach links gezogen werden, um ein Menü mit Zwischenüberschriften einzublenden. Beim ersten Aufrufen einer Seite fährt dieses Menü kurz aus, um einen Überblick zu geben, bevor es sich wieder zurückzieht. Gleichzeitig dient dies auch als Hinweis auf die Scrollbar als interaktives Element. Der Hintergrund passt sich dem Farbmodus an und zeigt entweder ein Bild oder eine Hintergrundfarbe, während sich darüber Textboxen befinden. Am Desktop gibt es zwei Darstellungsvarianten. In der ersten Variante erstreckt sich der Hintergrund über den gesamten Bildschirm, während die Textboxen auf der rechten Bildschirmhälfte scrollen. In der zweiten Variante ist der Hintergrund einfarbig, während rechts die Textboxen und links passende Bilder angezeigt werden, die sich beim Scrollen dynamisch verändern. Diese Gestaltung macht den redaktionellen Teil weniger schematisch und visuell ansprechender. Sollte eine Seite Bilder direkt im Fließtext integrieren, wie es beispielsweise bei den Seiten zu Martin Luther der Fall sein kann, werden diese in Form eines interaktiven Karussells innerhalb einer eigenen Textbox dargestellt. Auf dem Tablet und Smartphone bleiben die Bilder im Hintergrund erhalten. Beim Bildwechsel entsteht eine größere Lücke zwischen den Textboxen, sodass das Bild allein betrachtet werden kann, bevor die Textboxen sich wieder darüberlegen. Dies ermöglicht eine ansprechende visuelle Inszenierung, ohne die Lesbarkeit zu beeinträchtigen.

Der Fokus des überarbeiteten Designs liegt auf die Reduzierug von redundanten Navigationselementen, welche sich stilistisch an den Artefakt Seiten des CDA orientieren. Diese soll die Nutzerführung vorallem besser überschaubar halten und damit leichter zugänglich machen. Der redaktionelle Teil soll durch den größeren Fokus auf die Bilder vorallem lebendiger wirken ohne dabei zu viel Fokus von den eigentlichen Texten zu nehmen und somit die Klarheit oder Funktionalität nicht beeinträchtigen.