Layoutkonzept für das Cranach Digital Archive entwickeln

Bei dieser Übung entwickeln wir aus Scribbles systematische Layouts mit Hilfe von Figma. Diese passen wir für verschiedene Gerätetypen an und erstellen Varianten von Grob- und Feinlayout.

Einige Content Snippets haben wir in folgender Vorlage gesammelt. Zur Nutzung gehen sie auf den Pfeil oben in der Titelleiste neben view only und wählen aus dem Dropdown Feld Duplicate to your Drafts. Dann kann mit der Vorlage im persönlichen Bereich in Figma gearbeitet werden.

Wir brauchen Layouts für folgende Geräteklassen/ Viewportgrößen:

• Smartphone
• Tablet
• Desktop

Schritt 1: Materialanalyse

Wie ist der Content beschaffen? Wie ist das Mengengerüst? Welche Bilder und Texte stehen zur Verfügung? Wie sind die Bilder beschaffen? Welche Seitenverhältnisse haben sie? Wie sind die Texte beschaffen? Wie lang sind die Texte?

Schritt 2: Kommuninationssziele prüfen und Inspiration holen

Was sind die Kommuninationssziele? Wie soll das Design wirken? Was soll es bewirken? Was machen andere?

Schritt 3: Grundlayouts & Scribbles

Wir skizzieren verschiedene Layoutvarianten mit Stift und Papier. Dadurch sind wir schnell und verlieren uns nicht in Details oder technischen Finessen/ Problemen.

Schritt 4: Grundlayouts in Figma übertragen

• Spatial System festlegen: Welcher Systematik folgt ihr Größen- und Abstandskonzept?
• Mengentexte setzen und via Figma Mirror testen: Funktioniert die Größe der Copy?
• Grundlayout(s) setzen, prüfen und ggf. variieren: Welches Grundlayout funktioniert am Besten?
• Grundlayout(s) für verschiedene Geräteklassen adaptieren: Wie funktioniert das Layout bei verschiedenen Viewport Größen?

Schritt 5: Feinlayouts

Variieren und optimieren sie das Feinlayout:

• Ausrichtung
• Abstände
• Anordnungsvarianten
• etc.