Layouts für verschiedene Endgeräte // CDA Meisterwerke


Heute gestalten wir Cards für verschiedene Übersichts- und Ergebnisanzeigen des Cranach Digital Archives. Die Gestaltungsziele sind bereits auf der Seite zum diesjährigen Projekt dokumentiert (siehe Kommunikationsziele/ Leitplanken).

Als Datenbasis steht eine Google Tabelle zur Verfügung. Die URL wurde Ihnen bereits per E-Mail zugeschickt. Sie ist auch im Ilias hinterlegt.

Einige Gestaltungselemente sind bereits definiert. Alle Schriftgrößen und Abstände folgen der Renard 10 Serie. Das Farbschema kann auch invertiert werden, sprich: helle Schrift auf dunklem Grund.

Weitere Designanwendungen finden Sie auf den Such- und Trefferseiten des Cranach Digital Archives.


Schritt 1: Cards

Gestalten und entwickeln Sie die unten aufgeführten Card-Typen jeweils als hell-dunkel und dunkel-hell Variante. Nutzen Sie echte Daten für Ihre Layouts mit Hilfe des Google Sheets Link Plugins. Nutzen Sie als Iconset bitte die Material Icons hierzu gibt es ein Material Design Icons Plugin für Figma.

Typ 1: Slim Card

Enthält #img_src, #title und #repository. Die Card sollte so kompakt wie möglich sein.

Typ 2: Simple Card

Enthält #img_src, #title, #repository, #dating, #classification und «zu Favoriten hinzufügen».

Typ 3: Extended Card

Enthält #img_src, #title, #inventory_number , #classification, #involved_persons__name, #dating, #dimensions, #repository und «zu Favoriten hinzufügen».

Schritt 2: Übersicht Desktop, Tablet und Smartphone

Erzeugen Sie mit den Simple und Extended Cards je eine Übersichtsseite für die Viewports Desktop (1440x~), Tablet (834x~) und Smartphone (320x~). Fügen Sie der Übersicht den Titel «Cranach Digital Archive» und den Subtitle «Die Meisterwerke aus der Cranach Werkstatt»

Schritt 3: Weltkarte

Erzeugen Sie nun eine zweite Ansicht für den Desktop Viewport mit folgendem Subtitle «Die Meisterwerke und ihre Standorte». Platzieren Sie eine passende Anzahl der Slimcards auf der Weltkarte um die Verortung des jeweiligen Werks zu visualisieren. Entwickeln Sie sinnvolle Regeln zur Platzierung und ein Konzept zur Verknüpfung der Card mit dem Standort.