Das Cranach Digital Archiv (CDA) beinhaltet digitale Kopien Gemälden Lucas Cranachs des Älteren, seiner Werkstatt und seinen Nachfolgern. Im Rahmen des Screendesign Projekts, sollte der bestehende Prototyp um die Funktion des Vergleichs mehrere Bilder erweitert werden. Hierbei sollte auf das bestehende Designkonzept aufgebaut werden. Die ausgearbeiteten Entwürfe richten sich nach der Vorlage der bereitgestellten Figma-Datei. Das Design wurde abweichend zur Vorlage, durchgängig in einem dunklen Stil gehalten, um ein einheitliches Gesamtbild zu schaffen. Die Abstände folgen der Renard 10 Serie.
Die Symbole und der Text im Header sind dynamisch gestaltet. Je nach Zustand werden für den Nutzer relevante Informationen angezeigt. Hierdurch soll ein Überladen der Ansicht verhindert werden.
Um das Expertenpublikum anzusprechen, ist das Design und das Layout schlicht und zeitlos. Der gewählte Mobile First Ansatz ermöglicht ein reduziertes Bedienkonzept, welches sich sowohl auf Touchdevices (Tablets) als auch auf WIMP-fähigen Computern umsetzen lässt. Das Design lässt sich ohne große Abweichungen auf unterschiedlichen Displays darstellen. Abhängig vom DPI Verhältnis, wird auf kleineren Displays das Design lediglich um etwa 125 Prozent vergrößert dargestellt, um ein uneingeschränktes Nutzerlebnis zu ermöglichen
Die Ansicht des Archivs wurde um ein Favoriten Symbol, genauer ein Bookmark-Icon, für die angezeigten Objekte erweitert. Der Nutzer hat die Möglichkeit durch Anwählen des Symbols, ein Gemälde mit allen Zuständen in seinem persönlichen Archiv zu speichern. Alternativ kann die Übersichtseite des Artefakts geöffnet und nur einzelne Zustände dieses Artefakts gespeichert werden.
Im persönlichen Archiv kann der Nutzer die gespeicherten Artefakte sichten. Um die Ansicht nicht zu überladen, sind die Zustände zunächst noch zu einem Werk zusammengefügt. Der Textbereich wurde gegenüber dem Gesamtarchiv reduziert, um eine größere Anzahl an Werken darstellen und dadurch dem Nutzer einen besseren Gesamtüberblick bieten zu können. Die Werke können, wie im Gesamt-Archiv, durch eine Suchleiste gefiltert werden. Durch unterschiedliche Varianten des Favoriten-Symbols, ist es dem Nutzer ersichtlich, ob er alle oder nur einige Zustände eines Werkes markiert hat. Wenn ein Werk ausgewählt wird, wechselt der Nutzer zu einer Detailansicht, in welcher die favorisierten Zustände dargestellt werden. Außerdem ist es durch Scrollen möglich, die verschiedenen Werke in ihrer Detailansicht zu begutachten. Des Weiteren wird die Möglichkeit geboten, weitere Zustände hinzuzufügen. Durch Anklicken eines Werkes, einer Variante, legt sich das Gemälde in einer Pop-Up-Ansicht über die komplette Seite. Dies ermöglicht eine schnelle Sichtung des Werkes.
Die einzelnen Elemente können durch Markieren des Vergleich-Symbols zu einem Vergleich hinzugefügt werden. Dieser Vergleich kann gestartet werden, wenn mindestens zwei Elemente ausgewählt wurden. Der Hauptanwendungsfall soll der Vergleich von mehreren Zuständen eines Werkes sein. Eine Auswahl unterschiedlicher Werke ist jedoch ebenfalls möglich.
Wird der Vergleich gestartet, füllt die Ansicht den Großteil des Bildschirms und es werden einige Einstellungs-/Vergleichsmöglichkeiten in einem Footer angeboten. Beim Aktivieren einer Einstellung wird dies durch ein Füllen des dazugehörigen Symbols mit unserer Akzentfarbe dargestellt. Falls mehr als zwei Artefakte/Varianten zum Vergleich markiert worden sind, kann der Nutzer die Anzahl der anzuzeigenden Werke beliebig variieren. Beim Direktvergleich zweier Artefakte kann das Größenverhältnis nach Wunsch angepasst werden.
Die Artefakte können vergrößert und der Bildausschnitt verändert werden. Dies ist individuell oder für beide im selben Ausmaß möglich. Während des Zoom- oder dem Verschiebevorgang, wird dem Nutzer zur besseren Orientierung, temporär der Ausschnitt im Verhältnis zum Original eingeblendet. Ein Hinzufügen weitere Artefakte ist ebenfalls aus der Vergleichsansicht heraus möglich.
Die Icons wurden teils selbstständig erzeigt, teils ausfolgender Quelle entnommen: https://material.io/resources/icons/?style=baseline
