Heute entwickeln wir in 2er Teams Layouts für die Projektvorstellung im Medieninformatik Blog. Dazu gehen wir in folgenden Schritten vor:
Hier ein paar Beispiele, deren Content wir für die Layouts inspizieren:
Bei den Inhalten fehlen noch ein paar Stammdaten, die sich bislang im Mengentext verstecken. Diese sollten irgendwo als Liste oder Tabelle hervorgehoben werden. Diese sind:
Es empfiehlt sich den Content ggf. etwas zu systematisieren und in eine Tabelle zu überführen.
Bearbeitungszeit: 30 Minuten
Wie funktioniert der gestalterische Rahmen der Medieninformatik Website. Leider gibt es keinen Styleguide, zumindest nicht für die Website. Es gibt jedoch einen basalen Styleguide, der sich auf Poster, Präsentationen und im Kern auch auf die Website anwenden lässt. Einige Gestaltungslemente sind bereits definiert. Alle Schriftgrößen und Abstände folgen der Renard 10 Serie.
Weiterhin sollten ein paar Seiten auf deren Layoutregeln (die es hoffentlich gibt) hin untersucht werden. Wir interessieren uns heute nur für große Viewports >=1200px.
Dokumentieren Sie Erkenntnisse, Beispiele und Fragen Ihrer Exploration, auf folgendem Miro Board.
Bearbeitungszeit: 30 Minuten
Scribbeln Sie nun mögliche Layouts (Pen & Paper) für den Content. Versuchen Sie schnell aber ausreichend genau zu sein und entwickeln Sie so 9 verschiedene Layout Varianten. Idealerweise erzeugen Sie Scribbles von Content Blöcken, z.B. Header, Stammdaten, Einleitung, Kombination Bild & Text, etc. Laden Sie die Scribbles auf das Miroboard.
Bearbeitungszeit: 30 Minuten
Setzen Sie nun die besten, bzw. erfolgsversprechendsten Layouts in Figma um. Erzeugen Sie dafür passende Rastersysteme. Nutzen Sie folgende Layoutvorlage als Basis:
Stellen Sie Ihre (besten) Layouts kurz vor.