Im Rahmen des Screendesign-Projekts 2024 wurde ein Redesign für den redaktionellen Bereich des Cranach Digital Archive (CDA) entwickelt. Das CDA ist ein Forschungsprojekt, das seit 2009 die umfassende digitale Erschließung und Dokumentation der Werke von Lucas Cranach dem Älteren, seiner Söhne und seiner Werkstatt zum Ziel hat. Das CDA bietet hochauflösende Bilddaten, wissenschaftliche Analysen und kuratorische Informationen und richtet sich dabei nicht nur an das Fachpublikum sondern auch interessierte Laien.
Die Aufgabe bestand darin, ein Gestaltungs- und Interaktionskonzept zu entwickeln, das eine klare, geradlinige und interessante, aber zugleich zurückhaltende Designsprache verfolgt, wie sie im Kontext von Kunst, Kultur und Museen üblich ist. Das Konzept sollte für WIMP-fähige Computer optimiert sein, aber auch auf Touchgeräten funktionieren. Im Mittelpunkt sollten die Inhalte und die Kunst stehen, während das Design selbst diese unterstützt, ohne zu dominieren. Zugänglichkeit und der Fokus auf die Inhalte sind Kernkonzept des Redesigns.
Die Startseite bildet den Einstiegspunkt in die Welt des CDA. Das große Hero-Bild eines Cranach Werkes begrüßt den Nutzer beim Besuchen der Seite um sofort den künstlerischen Kontext zu kommunizieren. Zudem sind die wichtigsten Einstiegspunkte (Gemälde, Archivalien, Literatur) sofort prominent platziert damit der User so einfach wie möglich zum Hauptcontent der Seite gelangt. Um die Navigation und das Scannen der Inhalte zu erleichtern wurde die Hierarchie und Darstellung der Inhalte unter dem Hero durch Content-Blöcke optimiert. Diese sorgen in Kombination mit dem großzügigen Weissraum für eine aufgeräumte Übersicht und schnelle Orientierung und lassen den User durch die Karussel Funktion bereits Inhalte der Seite entdecken ohne die Startseite zu verlassen.
Im Mittelpunkt der Inhaltsseite (hier anhand gekürzter Versionen) steht das Hero Image, das als großes visuelles Element zwischen der oberen Menüleiste und dem restlichen Inhalt platziert wurde, um eine markante Abgrenzung zu schaffen. Anfangs befindet sich die Navigation unterhalb des Hero Images, wird jedoch beim Herunterscrollen oben am Bildschirm fixiert. So können Besucher jederzeit problemlos zwischen den verschiedenen Abschnitten wechseln. Besonderes Augenmerk liegt auf der Interaktivität der Navigation. Wenn der Mauszeiger darüber schwebt, vergrößert sich die Schrift und unterhalb des Textes erscheint eine orangefarbene Linie, die darauf hinweist, dass die Elemente anklickbar sind. Beim Anklicken wird der entsprechende Abschnitt direkt angesteuert, was die Bedienung intuitiv und zeitsparend gestaltet. Die Inhalte sind in klar abgegrenzten Containern organisiert, was für eine hohe Übersichtlichkeit sorgt und den Text strukturiert präsentiert. Mit dem „Weiterlesen“-Button können die Nutzer selbst entscheiden, wann sie den restlichen Artikel einblenden möchten. Die Bilder auf der rechten und linken Seite verleihen der Seite zudem eine dynamische Ausstrahlung und unterstützen den Informationsfluss. Ein weiterer Vorteil des Layouts ist der Button, der unten rechts positioniert ist und den Besucher schnell wieder zum Seitenanfang bringt. Zusätzlich steht ein integrierter Lesemodus zur Verfügung, der den Text vergrößert und somit die Lesbarkeit weiter verbessert.
Aufgrund der eingeschränkten Bildschirmgröße des Smartphones erfolgten beim designen der mobilen Seite (hier anhand einer gekürzten Version) andere Herangehensweisen und Prioritäten, dennoch wurde darauf geachtet die Logik, Übersichtlichkeit und Farbakzente des Desktop Designs zu berücksichtigen. Die Mobile Startseite bietet ähnlich wie die Desktop Version ein Headerbild. Auch hier sind die drei Hauptkategorien einfach ersichtlich. Um die Mobile Seite so Orientierungsfreundlich wie möglich zu gestalten ist oben rechts ein Hamburger Menü angebracht das Zugang zu weiteren Menüpunkten inklusive Dropdown, Einstellungen wie Darkmode und Sprache sowie Suche bietet. Die Content-Ansicht besteht bei der Mobilversion aus vertikal angeordneten schwarzen Karten um die Inhalte klar und einfach voneinander abzugrenzen. Schwarz und Weiss bilden beim Text einen guten Kontrast um eine bessere Lesbarkeit zu ermöglichen. Zudem markieren die dunklen Bereiche die Touch-Interaktion, bei denen durch die Karten der jeweiligen Kategorie geswiped werden kann.
Die mobilen Inhaltsseiten (hier exemplarisch die gekürzte Forschungsseite) zeichnen sich durch eine große Schrift aus, die das Lesen angenehmer macht. Zudem sind die einzelnen Kapitel sauber durch Bilder und Buttons getrennt. Neben dem Hamburger Menü befindet sich eine Navigationsleiste die aufgeklappt werden kann um direkt die Kapitel des Textes zu sehen und mit drücken auf diese ohne mühseliges scrollen direkt dorthin zu gelangen.
