Layoutvarianten entwickeln


Die Basis für den heutigen Workshop bildet folgende Vorlage, die ein basales Design der Medieninformatik Website abbildet. Zur Nutzung auf den Pfeil oben in der Titelleiste neben view only gehen und aus dem Dropdown Feld Duplicate to your Drafts auswählen. Dann kann mit der Vorlage im persönlichen Bereich in Figma gearbeitet werden.

Schritt 1:

Hier sollen nun für die Gestaltung der systematisch Card 64 Varianten gebildet werden und dargestellt werden. Plazieren Sie die Übersicht in einem eigenen Frame und exportieren Sie diesen als PNGs (1x) und laden Sie diese im Ilias hoch. Verwenden Sie beim Dateinamen bitte die folgende Nomenklatur:

  • sd-uebung-variantenbildung-card-NACHNAME.png

Schritt 2:

Erzeugen Sie aus der besten Variante ein Card Grid und platzieren Sie diese auf den Mockups, um zu überprüfen welche Variante im Gestaltungskontext am Besten funktioniert. Nutzen Sie dabei die Inhalte aus folgender Tabelle.

Exportieren Sie die Arbeitsflächen als PNGs (1x) und laden Sie diese im Ilias hoch. Verwenden Sie beim Dateinamen bitte die folgende Nomenklatur:

  • sd-uebung-variantenbildung-overview-NACHNAME.png

Hierzu gibt es ein kleines Video aus dem letzten Jahr: