Im Rahmen des Moduls “Screendesign” sollten wir für das Projekt 2024 ein Redesign des redaktionellen Bereichs der Cranach Digital Archive vornehmen. Zweck des Projekts war es ein zeitgemäßes und moderneres Gestaltungs- und Interaktionskonzept zu entwickeln, das eine klare, verständliche, spannende, aber dennoch unaufdringliche Designsprache verkörpert. Dabei sollte das bestehende Design des Archivs analysiert werden und darauf aufbauen. Zu gestalten waren die Startseite, die Navigation sowie mindestens drei Inhaltsseiten. Es sollte der Desktop-First-Ansatz verfolgt werden, aber auch andere Geräteklassen wie Tablet oder Mobile waren zu beachten. Auch berücksichtigt werden sollte die Barrierefreiheit mit der Option eines barrierefreien Modus. Außerdem war die Harmonisierung mit der Suche und den Artefakt-Seiten wichtig. Die Zielgruppen sind im wesentlichen professionelle Nutzer:innen, wie z.B. Kunsthistoriker:innen, aber auch mehr und mehr interessierte Laien.
Für die Umsetzung haben wir uns zunächst das bestehende Design angeschaut und die Verbesserungsmöglichkeiten und Schwachstellen analysiert. Wir kamen zu dem Entschluss, dass die Website zu langweilig wirkt und mehr Spannung benötigt. Um die Startseite lebendiger, moderner und interessanter zu gestalten, haben wir uns entschieden die Startseite schwarz zu entwerfen, um mehr Kontrast und somit mehr Spannung zu erzeugen. Das breite Bild zu Beginn soll überraschen und neugierig machen die Seite zu erkunden.
Wir haben die rechte Spalte entfernt und die Elemente woanders platziert, um die Seite einheitlicher zu machen für ein harmonischeres Bild und reduzierte Komplexität, mit gleichbleibenden Kacheln. Statt strikt untereinander und im “zick-zack”, wurde der Platz ohne die rechte Spalte genutzt, um die Kacheln nebeneinander anzuordnen für eine bessere Übersicht.
Der Newsletter und der Kontakt wurden in den Footer gesetzt, um alles kompakt und eindeutig an einer Stelle zu haben und die Homepage, die vorerst Interesse wecken soll, zu minimalisieren. Uns fiel auf, dass eine eindeutige “Über Uns” Navigation fehlt, weswegen ein Banner erstellt wurde, welches auch die Haupt-Statistiken präsentiert.
Zur Minimalisierung wurden die Suchreiter („Entdecke die Gemälde“, „Archivalien“, „Literatur“) in der Seite ersetzt mit einer einzelnen Suche in der Menüleiste, diese wurde vergrößert und enthält das cda_ Logo. Auch die Interaktionsanimation ist der Suche nachempfunden, um beide Teile der Website zu verbinden.
Hinsichtlich der Navigation wurde die Schrift vergrößert für eine einfachere Bedienung, und erweitert um einen Barrierefreien-Modus-Button sowie den Reiter “Grafik”, um auf das anstehende Update des Archivs vorzubereiten.
Im Unterschied zu der Startseite sind die Inhaltsseiten weiß gestaltet und mehr zurückhaltend, um weniger Spannung zu erzeugen und um mit der Suche und den Artefakt Seiten zu harmonisieren.
Die Inhaltsseiten starten im Komplement zur Startseite ebenfalls mit einem breiten Titelbild und gegebenenfalls gibt es einen Einleitungstext. Alle Inhaltsseiten sind so aufgebaut, dass links der Text steht und in der rechten Spalte die Suche und die dazugehörigen Bilder. Hier nimmt der Text, also der Hauptinhalt der Seite 2/3 dieser ein und das restliche 1/3 ist Design und Usability Features.
Wir haben den Text der Lucas Cranach Seite in Sinnabschnitte aufgeteilt und mithilfe der Suche kann der Nutzer nach Stichworten im Text suchen und bei der Inhaltsnavigation kann man leicht zu den jeweiligen Blöcken springen.
Die Inhaltsseiten sind schlicht, aber trotzdem lebendig und interaktiv gestaltet. Hierfür existiert die Leiste mit Indikatoren, diese zieht sich mit einer Linie durch den gesamten Text und hat interaktive, aufmerksamkeitserregende Punkte, die bei jedem Sinnabschnitt aufleuchten. So soll der Leser „an die Hand genommen werden“ und ein Journey durch den Text haben.
Für die Adaptability verschiedener Geräteklassen wurde ein System genutzt. Beispiel: Desktopdesign, mit einer Breite von 1920px, zum Tablet mit 1024px Breite, sind Abstände skaliert mit *0,53 wodurch ein harmonisches Layout besteht. Bedienelemente sowie Text sind mit einer Mindestgröße bestimmt, um Bedienbarkeit und Lesbarkeit zu gewährleisten, genaueres hierzu im Styleguide.
DesktopPrototyp: https://www.figma.com/proto/HHn8IQXhEdGyMOYRzit8RF/Projekt_firstFile?node-id=803-1801&t=w94J9aXouYasmsbB-1&scaling=min-zoom&content-scaling=fixed&page-id=0%3A1
TabletPrototyp: https://www.figma.com/proto/HHn8IQXhEdGyMOYRzit8RF/Projekt_firstFile?node-id=739-2221&t=W4v4fgDjk8hSyEZr-1
MobilePrototyp: https://www.figma.com/proto/HHn8IQXhEdGyMOYRzit8RF/Projekt_firstFile?node-id=683-3149&t=W4v4fgDjk8hSyEZr-1
