Design Basics

Praktische Grundlagen der Gestaltung mit digitalen Medien
Bachelor Elektrotechnik, Bachelor Informatik, Bachelor Wirtschaftsingenieurwesen Elektrotechnik
Prof. Felix Hardmood Beck

1. Anwesenheitsliste
2. Besprechung der Ergebnisse der Hausaufgaben: Vogelfederzeichnungen:
   1. Scan der analogen Zeichnung, sowie eine *.svg-Datei der Vektor-Zeichnung an felix.beck@fh-muenster.de !?
   2. Zeichnung dreier Vogelfedern auf einem DIN A3 Blatt.
   3. Übersetzung der Feder in Zeichenprogramm Ihrer Wahl ⇒ Pfadtool und gegebenenfalls weitere Werkzeuge

• Download and install InkScape
• Install Axidraw
• Zeichnung von Feder mit AxiDraw Tool
  

1. Lineare Medien ≠ Non-lineare Medien: Normalerweise versteht man unter einem linearen Medium einen direkt-ausgestrahlten und unvermittelbar-empfangbaren Inhalt (z.B. Fernsehen, Radio, Film der in einer Ausstellung autoaktiv abgespielt wird). Hier muss man zu einem bestimmten Zeitpunkt einschalten/da sein, um eine dargestellte Geschichte von Anfang bis zum Ende zu konsumieren und zu verstehen. Non-lineare Medien hingegen lassen eine zeitversetzte Nutzung zu; hier kann man zu jeder Zeit ein- und wieder aussteigen.
   1. Spannungskurve¹⁾/Spannungsbogen im Storytelling (steigende Handlung/fallende Handlung)
      1. Einführung
         1. Setting: Zeit, Ort
         2. Protagonist (mit einem Ziel), Antagonist
         3. Einführung in Konfliktsituation (Konflikt, Problem = Hindernis für Zielsetzung)
      2. Hauptteil
         1. Reihe von Ereignissen, Aufbau der Spannung, Komplikationen, Hürden denen der Held ausgesetzt ist
         2. Emotionaler Höhepunkt: Zeitpunkt kurz vor der Erkenntnis, wie die Story enden könnte
         3. Abfall der Spannung
      3. Schlussteil
         1. Ende mit Auflösung des Konfliktes/Lösung des Problems

              Höhepunkt 
              .    Retardierendes Moment 
             . .   .
            .   . . . abklingend
           .         . 
          . steigend   .  Schlussteil 
       . .                 . .

Eine solche Art von Spannungsbogen lässt sich auch in einer indirekteren Form für klassische Medien oder Produktdesign darstellen. Erklären Sie diesen Gedankengang zu einer objekthaften Dramaturgie.

Es gibt viele verschiedene Möglichkeiten und Techniken um Animationen zu erzeugen. Oftmals entstehen Animationen auch durch die Kombination verschiedener Prozesse und Werkzeuge.

Welche Tools zur Erzeugung von Animationen kennen Sie?

• Adobe Animate zur Erstellung von HTML5- und Flash-Animationen (Kurs auf Youtube (Dauer ca. 3 Stunden))
• Piskel App – A free online editor for animated sprites & pixel art (https://www.piskelapp.com)
• Photoshop Puppet Warp Tool ⇒ Youtube Tutorial
• Adobe Character Animator
• Blender with Grease Pencil (Youtube Tutorial)
• After Effects (Special Effects und Animation)

Animationsarten ²⁾)

• Einzelbild-Animation
• Schlüsselbild-Animation
• Kombination aus Einzel- und Schlüsselbild-Animation)
• Pfad Animation: Beispiel 1 (Ball über Eck), Beispiel 2 (Pfad mithilfe einer Kurve), Beispiel 3 (Pfad und Rotation)

Gravel, Abu Dhabi, 2019
https://www.felix-beck.de/research_projects/gravel.html (© by NTSI Lab, Quinn He, Jack Zhang)

Media Table, Formation of Hamburg, Museum für die Geschichte von Hamburg, 2012
https://www.felix-beck.de/professional_projects/formation-of-hamburg.html (© by ART+COM Studios)

Museum of Infrastructure Development, 2018
https://www.felix-beck.de/professional_projects/museum-of-infrastructure-development.html

1. Schauen Sie zur Einleitung folgende Präsentation auf Youtube: Making Interactive Virtual Reality & Augmented Reality Prototypes from Paper (Michael Nebeling, Katy Madier, CHI '19: ACM CHI Conference on Human Factors in Computing Systems, Session: Look, Smell, Draw)
2. Lesen Sie nun den Blogartikel VR Paper Prototyping, Saara Kamppari-Miller, 2017
3. Basierend auf der Vorlage VR Sketch Sheets 2.0 (siehe Seite 3) erstellen Sie die Skizze Ihres Zimmer (mit möglichst vielen Details). Machen Sie ein Foto Ihrer Zeichnung und bearbeiten Sie dieses nach (Tonwert Korrektur ⇒ weiß=weiß!). Drucken Sie Ihr Bild auf DINA 3 aus und legen Sie dieses in Ihre Dokumentationsbox-Box.
4. Finden Sie für die Plattform Ihrer Wahl eine Möglichkeit Ihre Zeichnung als 360° Ansicht anzuzeigen. Bspw mithilfe von
   1. https://momento360.com/
   2. https://photo-sphere-viewer.js.org
   3. …
5. Finden Sie eine Möglichkeit Ihre Zeichnung als Stereoskopisches Bild auf einem HMD anzuschauen.