Differences

This shows you the differences between two versions of the page.

--- teaching:ba:courses:design-basics:sose25:minichallenges [2025/07/06 06:31] – ↷ Links adapted because of a move operation Felix Hardmood Beck
+++ teaching:ba:courses:design-basics:sose25:minichallenges [2025/07/06 10:05] (current) – ↷ Links adapted because of a move operation Felix Hardmood Beck
@@ Line 1: / Line 1: @@
 ===== Mini-Challenges =====
-Im Rahmen der ersten Semesterhälfte des Bachelor Kurses //Design Basics// bearbeiten die Studierenden vier designrelevante Mini-Challenges, die sich an den Dimensionen 2D, 3D und 4D orientieren. Je nach der im Kurs zu Verfügung stehenden Zeit werden die Aufgaben im seminaristischen Unterricht begonnen und von den Studierenden als Hausaufgabe eigenständig fortgesetzt. Die Studierenden haben die Verantwortung die Ergebnisse und Prozesse in Form der //[[teaching:ba:courses:design-basics:dokumentationsbox|Dokumentationsbox]]// zu dokumentieren und in der jeweiligen Folgewoche im Kurs zu präsentieren.
+Im Rahmen der ersten Semesterhälfte des Bachelor Kurses //Design Basics// bearbeiten die Studierenden vier designrelevante Mini-Challenges, die sich an den Dimensionen 2D, 3D und 4D orientieren. Je nach der im Kurs zu Verfügung stehenden Zeit werden die Aufgaben im seminaristischen Unterricht begonnen und von den Studierenden als Hausaufgabe eigenständig fortgesetzt. Die Studierenden haben die Verantwortung die Ergebnisse und Prozesse in Form der //[[teaching:ba:courses:design-basics:aufgaben:dokumentationsbox|Dokumentationsbox]]// zu dokumentieren und in der jeweiligen Folgewoche im Kurs zu präsentieren.
@@ Line 8: / Line 8: @@
 ==== Mini-Challenge 1 ====
-  - Lesen Sie sich diese [[wissikon:to_sort:gestalt-rules|Übersicht zu den Gestaltgesetzen]] durch.
+  - Lesen Sie sich diese [[extras:wissikon:design-development:gestalt-rules|Übersicht zu den Gestaltgesetzen]] durch.
   - Ihre Aufgabe ist es nun __zwei__ [[https://editor.p5js.org|P5.JS]] Sketche zu coden, die jeweils eines der Gesetze bestmöglich in Form von einem Bild oder einer animierten Sequenz visualisieren. \\ {{:teaching:ba:courses:design-basics:moving_circles.gif?direct&200|}}
   - Starten Sie mit der Erstellung des ersten Blattes für Ihre Doku-Box. Wie kann das aussehen? Machen Sie screenshots ihrer Arbeiten. Reicht ein Screenshot, um eine Animation zu zeigen? Was fällt Ihnen als Lösung ein? Fragen Sie jemanden ein Foto von Ihnen bei der Arbeit zu machen (//Over-the-shoulder-shot// mit dem Computer-Bildschirm im Hintergrund auf dem ihre Arbeit zu sehen ist). Achten Sie auf gute Belichtung und einen passenden Bildausschnitt.
@@ Line 17: / Line 17: @@
 ==== Mini-Challenge 2 ====
-  - Schauen Sie sich die [[https://www.carnovsky.com/RGB.htm|RGB-Arbeiten]] des Künstler Duos [[https://www.carnovsky.com/works.htm|Carnovsky]] an. Ihre Aufgabe ist es ein DIN A3 Plakat mit einer Multi-Layer-Komposition zu erstellen, in der sich verschiedene Motive überlagern. Sie können die Farben CMY und/oder RGB für einzelnen Farblayer benutzen. Verwenden Sie für die Bearbeitung eine Software Ihrer Wahl – beispielsweise Photoshop, Gimp, Affinity Photo oder auch diesmal wieder p5.js ([[code:p5js:carnovsky|Beispielcode Carnovsky]]). Die unteren drei Beispiele sind screenshots von dem verlinkten P5.JS sketch. \\ {{:teaching:ba:courses:design-basics:carnovsky_p5js_bsp-screenshot_01.png?direct&120|}} {{:teaching:ba:courses:design-basics:carnovsky_p5js_bsp-screenshot_02.png?direct&120|}} {{:teaching:ba:courses:design-basics:carnovsky_p5js_bsp-screenshot_03.png?direct&120|}}
+  - Schauen Sie sich die [[https://www.carnovsky.com/RGB.htm|RGB-Arbeiten]] des Künstler Duos [[https://www.carnovsky.com/works.htm|Carnovsky]] an. Ihre Aufgabe ist es ein DIN A3 Plakat mit einer Multi-Layer-Komposition zu erstellen, in der sich verschiedene Motive überlagern. Sie können die Farben CMY und/oder RGB für einzelnen Farblayer benutzen. Verwenden Sie für die Bearbeitung eine Software Ihrer Wahl – beispielsweise Photoshop, Gimp, Affinity Photo oder auch diesmal wieder p5.js ([[extras:codikon:p5js:carnovsky|Beispielcode Carnovsky]]). Die unteren drei Beispiele sind screenshots von dem verlinkten P5.JS sketch. \\ {{:teaching:ba:courses:design-basics:carnovsky_p5js_bsp-screenshot_01.png?direct&120|}} {{:teaching:ba:courses:design-basics:carnovsky_p5js_bsp-screenshot_02.png?direct&120|}} {{:teaching:ba:courses:design-basics:carnovsky_p5js_bsp-screenshot_03.png?direct&120|}}
   - Überlegen Sie sich eine Geschichte zu den drei ausgewählten Bildinhalten. Wie passen diese zusammen? Funktioniert jede Farbe mit jedem Bildinhalt, oder ist ein bestimmter Bildinhalt an eine bestimmte Farbe gekoppelt? (Bspw. ein blauer Ozean, ein gelber Fisch, eine rote Plastikflasche).
   - Arbeiten Sie an Ihrer Bildcollage. Optimieren Sie Position, Größe, Details der einzelnen Bilder, sodass die Aussage Ihrer "Geschichte" deutlicher wird.
@@ Line 46: / Line 46: @@
 Diese Übung dient als Einstieg in zentrale Konzepte, die später bei der Nutzung von Programmen wie TouchDesigner oder vvvv interaktiv und in Echtzeit weitergedacht werden – etwa Formgenerierung, Bewegungslogik, Transformation im Raum und visuelles Storytelling.
-**24 Frames of Motion**: Sie sollen eine Animation gestalten, die aus 24 Einzelbildern besteht und exakt eine Sekunde lang sein soll. Ob abstrakt oder narrativ, rhythmisch oder chaotisch – Ziel ist es, eine einfache visuelle Idee in eine präzise zeitliche Abfolge zu übersetzen. Im Fokus stehen Grundprinzipien wie Timing, Transformation, Bewegung und Komposition. Die Animation soll ohne erklärenden Text funktionieren – die visuelle Bewegung steht im Zentrum. Lesen Sie sich zur Bearbeitung der Aufgabe die //[[wissikon:to_sort:grundlagen_der_animation|Grundlagen von Animation]]// durch.
+**24 Frames of Motion**: Sie sollen eine Animation gestalten, die aus 24 Einzelbildern besteht und exakt eine Sekunde lang sein soll. Ob abstrakt oder narrativ, rhythmisch oder chaotisch – Ziel ist es, eine einfache visuelle Idee in eine präzise zeitliche Abfolge zu übersetzen. Im Fokus stehen Grundprinzipien wie Timing, Transformation, Bewegung und Komposition. Die Animation soll ohne erklärenden Text funktionieren – die visuelle Bewegung steht im Zentrum. Lesen Sie sich zur Bearbeitung der Aufgabe die //[[extras:wissikon:design-development:grundlagen_der_animation|Grundlagen von Animation]]// durch.
 Zur Erstellung der Animation können beliebige Tools eingesetzt werden, wie bspw die folgenden frei verfügbaren Online-Tool:
@@ Line 53: / Line 53: @@
 Abgabe:
-  * Die Animation soll als [[wissikon:to_sort:animated-gif|animiertes-gif]] oder Video-Datei (max. 5 MB) vor der nächsten Unterrichtseinheit per email an Prof Beck geschickt werden.
+  * Die Animation soll als [[extras:wissikon:media-design:animated-gif|animiertes-gif]] oder Video-Datei (max. 5 MB) vor der nächsten Unterrichtseinheit per email an Prof Beck geschickt werden.
-  * Erstellen Sie eine entsprechende Seite für Ihre [[teaching:ba:courses:design-basics:dokumentationsbox|Doku-Box]]
+  * Erstellen Sie eine entsprechende Seite für Ihre [[teaching:ba:courses:design-basics:aufgaben:dokumentationsbox|Doku-Box]]
   * Eine kurze schriftliche Reflexion (100–150 Wörter): Welche gestalterische Idee wurde verfolgt? Welche Entscheidungen waren notwendig?
@@ Line 60: / Line 60: @@
 ==== Mini-Challenge 4B ====
-  * Lesen Sie sich die Beschreibung zu den [[wissikon:to_sort:grundlagen_der_animation#die_12_prinzipien_der_animation|12 Prinzipien der Animation nach Disney]] aufmerksam durch.
+  * Lesen Sie sich die Beschreibung zu den [[extras:wissikon:design-development:grundlagen_der_animation#die_12_prinzipien_der_animation|12 Prinzipien der Animation nach Disney]] aufmerksam durch.
-  * Wählen Sie __zwei__ Prinzipien aus, die Sie besonders interessant oder gestalterisch relevant finden. Ihre Aufgabe ist es nun, für jedes der beiden Prinzipien einen eigenen [[https://editor.p5js.org|P5.JS]] Sketch zu coden, der die jeweilige Idee durch Bewegung, Formverhalten oder Interaktion deutlich visualisiert. Orientieren Sie sich an folgendem [[code:p5js:slow-in_slow-out|Beispiel Slow In & Slow Out]] \\
+  * Wählen Sie __zwei__ Prinzipien aus, die Sie besonders interessant oder gestalterisch relevant finden. Ihre Aufgabe ist es nun, für jedes der beiden Prinzipien einen eigenen [[https://editor.p5js.org|P5.JS]] Sketch zu coden, der die jeweilige Idee durch Bewegung, Formverhalten oder Interaktion deutlich visualisiert. Orientieren Sie sich an folgendem [[extras:codikon:p5js:slow-in_slow-out|Beispiel Slow In & Slow Out]] \\
   * Ihre Ergebnisse (Sketche + Doku) werden in der kommenden Sitzung der Gruppe vorgestellt. Senden Sie Ihre P5.JS-Code-Snippets zusätzlich per E-Mail an Prof. Beck.