Differences

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

--- teaching:ba:courses:design-basics:sose26:minichallenges [2026/03/22 13:15] – [Mini-Challenge C | Wie entsteht Verhalten, Dynamik oder Spiellogik?] Felix Hardmood Beck
+++ teaching:ba:courses:design-basics:sose26:minichallenges [2026/04/29 06:55] (current) – [Mini-Challenge C | Wie entsteht Verhalten, Dynamik oder Spiellogik?] Felix Hardmood Beck
@@ Line 10: / Line 10: @@
 ^ Aufgabe  ^ Gestaltungsübung  |
-| A1 | **Gestaltungselement Fläche**  \\  \\ – Verwenden Sie für diese Aufgabe [[extras:codikon:p5js:einfuehrung_in_p5js|P5.JS]] \\ – Wählen Sie [[extras:wissikon:typography_and_layout:typography:schriften_uebersicht|hier]] sich __eine__ Schrift aus. \\ – Wählen Sie sich __einen__ Buchstaben aus. \\ – Setzen Sie den Buchstaben interessant in ein quadratisches Format ein. Dabei darf der Buchstabe in der Größe, der Drehung und im Anschnitt variieren. Die verwendete Farbe muss entweder //schwarz auf weiß// oder //weiß auf schwarz// sein. \\ – Setzen Sie Ihre Ergebnisse in eine Gesamtkomposition von 5x5 Elementen zusammen. \\ – Drucken Sie Ihre Gesamtkomposition auf DIN A3 aus und bringen Sie diese beim nächsten mal mit in den Unterricht.|
+| A1 | **Gestaltungselement Fläche**  \\  \\ – Verwenden Sie für diese Aufgabe [[extras:codikon:p5js:einfuehrung_in_p5js|P5.JS]] \\ – Wählen Sie [[extras:wissikon:typography_and_layout:typography:schriften_uebersicht|hier]] sich __eine__ Schrift aus. \\ – Wählen Sie sich __einen__ Buchstaben aus. \\ – Setzen Sie den Buchstaben interessant in ein quadratisches Format ein. Dabei darf der Buchstabe in der Größe, der Drehung und im Anschnitt variieren. Die verwendete Farbe muss entweder //schwarz auf weiß// oder //weiß auf schwarz// sein. \\ – Setzen Sie Ihre Ergebnisse in eine Gesamtkomposition von 5x5 Elementen zusammen. \\ – Drucken Sie Ihre Gesamtkomposition auf DIN A3 aus und bringen Sie diese beim nächsten mal mit in den Unterricht. \\ \\ Zur Inspiration: \\ {{:teaching:ba:courses:design-basics:sose2026:bsp_5x5_01.png?direct&200|}}|
-| A2 | **Bewegungspfeile** \\ \\  – Verwenden Sie für diese Aufgabe ein Layoutprogramm, wie bspw [[https://en.wikipedia.org/wiki/Adobe_InDesign|Indesign]], [[https://en.wikipedia.org/wiki/Affinity_Publisher|Affinity Publisher]] oder [[https://en.wikipedia.org/wiki/Scribus|Scribus]]  \\ – Aufbauend auf der letzten Übung, nehmen Sie nun anstatt eines Buchstaben ein Schriftzeichen mit Pfeilbezug (z.B. → ← ↑ ↓ ↔ ↕ ↗ ↘ ↙ ↖). Der Pfeil soll nun in der Gesamtkomposition eine durchgehende Bewegung darstellen.  |
+| A2 | **Bewegungspfeile** \\ \\  – Verwenden Sie für diese Aufgabe ein Layoutprogramm, wie bspw [[https://en.wikipedia.org/wiki/Adobe_InDesign|Indesign]], [[https://en.wikipedia.org/wiki/Affinity_Publisher|Affinity Publisher]] oder [[https://en.wikipedia.org/wiki/Scribus|Scribus]]  \\ – Aufbauend auf der letzten Übung, nehmen Sie nun anstatt eines Buchstaben ein Schriftzeichen mit Pfeilbezug (z.B. → ← ↑ ↓ ↔ ↕ ↗ ↘ ↙ ↖). Der Pfeil soll nun in der Gesamtkomposition eine durchgehende Bewegung darstellen.  \\ \\ Zur Inspiration: \\ {{:teaching:ba:courses:design-basics:sose26:bsp_5x5_pfeil.png?direct&200|}} |
@@ Line 22: / Line 22: @@
 ^ Aufgabe ^ Gestaltungsübung ^
-| B1 | **Easy Interface** \\ \\ – Kennen Sie die Unterschiede und Bedeutung von [[extras:wissikon:media-design:user-interface-design|UI]], [[extras:wissikon:media-design:user-experience-design|UX]] und [[extras:wissikon:media-design:interaction-design|IxD]]\\ – Verwenden Sie für diese Aufgabe P5.JS. \\ – Bauen Sie auf Ihrer Gestaltung aus Aufgabe A1 auf. Nutzen Sie den dort gewählten Buchstaben, die Schrift und die Schwarz-Weiß-Gestaltung erneut. \\ – Entwickeln Sie für Ihren bisherigen Sketch eine einfache Benutzeroberfläche, mit der Varianten Ihrer Gestaltung erzeugt werden können. Als Interface-Elemente müssen mindestens ein //Button//, ein //Slider// und ein //Toggle Switch// eingesetzt werden. Alle Interface-Elemente dürfen ebenfalls nur in Schwarz und Weiß gestaltet sein. Die Bedienelemente sollen so eingesetzt werden, dass sich im Sketch sichtbare Varianten erzeugen lassen, zum Beispiel durch Veränderung von Größe, Position, Drehung, Anschnitt oder Kontrast. Die Oberfläche soll klar lesbar, logisch angeordnet und ohne Erklärung bedienbar sein. Es soll sofort erkennbar sein, was angeklickt, verschoben oder ein- und ausgeschaltet werden kann. Für die Gestaltung der Interface-Elemente darf nicht auf vorhandene Browser- oder Standard-UI-Elemente zurückgegriffen werden. Jegliche Elemente (Button, Slider und Toggle Switch, etc.) müssen vollständig selbst gestaltet und aus einfachen geometrischen Formen in P5.JS aufgebaut werden. Ziel ist es, nicht nur Bedienlogik zu verstehen, sondern auch die visuelle und formale Gestaltung von Interfaces selbst zu entwickeln. \\ – Die im Sketch erzeugten Varianten sollen als Bilder exportiert werden können. |
+| B1 | **Easy Interface** \\ \\ – Kennen Sie die Unterschiede und Bedeutung von [[extras:wissikon:media-design:user-interface-design|UI]], [[extras:wissikon:media-design:user-experience-design|UX]] und [[extras:wissikon:media-design:interaction-design|IxD]]\\ – Verwenden Sie für diese Aufgabe P5.JS. \\ – Bauen Sie auf Ihrer Gestaltung aus Aufgabe A1 auf. Nutzen Sie den dort gewählten Buchstaben, die Schrift und die Schwarz-Weiß-Gestaltung erneut. \\ – Entwickeln Sie für Ihren bisherigen Sketch eine einfache Benutzeroberfläche, mit der Varianten Ihrer Gestaltung erzeugt werden können. Als Interface-Elemente müssen mindestens ein //Button//, ein //Slider// und ein //Toggle Switch// eingesetzt werden. Alle Interface-Elemente dürfen ebenfalls nur in Schwarz und Weiß gestaltet sein. Die Bedienelemente sollen so eingesetzt werden, dass sich im Sketch sichtbare Varianten erzeugen lassen, zum Beispiel durch Veränderung von Größe, Position, Drehung, Anschnitt oder Kontrast. Die Oberfläche soll klar lesbar, logisch angeordnet und ohne Erklärung bedienbar sein. Es soll sofort erkennbar sein, was angeklickt, verschoben oder ein- und ausgeschaltet werden kann. Für die Gestaltung der Interface-Elemente darf nicht auf vorhandene Browser- oder Standard-UI-Elemente zurückgegriffen werden. Jegliche Elemente (Button, Slider und Toggle Switch, etc.) müssen vollständig selbst gestaltet und aus einfachen geometrischen Formen in P5.JS aufgebaut werden. Ziel ist es, nicht nur Bedienlogik zu verstehen, sondern auch die visuelle und formale Gestaltung von Interfaces selbst zu entwickeln. \\ – Die im Sketch erzeugten Varianten sollen als Bilder exportiert werden können.  \\ \\ Zur Inspiration: \\ {{:teaching:ba:courses:design-basics:sose26:bsp_interface-sketch.png?direct&200|}} {{:teaching:ba:courses:design-basics:sose26:bsp_interface-sketch_1.png?direct&200|}} |
-| B2 | **Visuelle Steuerung und Variantenbildung** \\ \\  – Entwickeln Sie Ihre Benutzeroberfläche aus Aufgabe B1 weiter zu einem kleinen Gestaltungssystem. Erweitern Sie Ihren Sketch so, dass mit dem Interface mindestens drei klar unterscheidbare Bildvarianten oder Kompositionen erzeugt und gezielt gespeichert bzw. wieder aufgerufen werden können. \\ Zusätzlich zu Button, Slider und Toggle Switch sollen die Bedienelemente nun so zusammenwirken, dass nicht nur Einzelwerte verändert werden, sondern unterschiedliche visuelle Zustände entstehen, zum Beispiel //ruhig, dynamisch oder verdichtet.// \\ – Die Benutzeroberfläche soll weiterhin vollständig selbst in P5.JS gestaltet werden und ausschließlich aus einfachen geometrischen Formen bestehen. Alle Interface-Elemente bleiben auf Schwarz und Weiß beschränkt. \\ – Ziel ist es, ein konsistentes visuelles und funktionales Interface zu entwickeln, das nicht nur einzelne Parameter verändert, sondern ein kleines System zur Steuerung gestalterischer Entscheidungen bildet. \\ – Die erzeugten Varianten sollen als Bilder exportiert und in einer nachvollziehbaren Serie präsentiert werden können.  |
+| B2 | **Visuelle Steuerung und Variantenbildung** \\ \\  – Entwickeln Sie Ihre Benutzeroberfläche aus Aufgabe B1 weiter zu einem kleinen Gestaltungssystem. Erweitern Sie Ihren Sketch so, dass mit dem Interface mindestens drei klar unterscheidbare Bildvarianten oder Kompositionen erzeugt und gezielt gespeichert bzw. wieder aufgerufen werden können. \\ Zusätzlich zu Button, Slider und Toggle Switch sollen die Bedienelemente nun so zusammenwirken, dass nicht nur Einzelwerte verändert werden, sondern unterschiedliche visuelle Zustände entstehen, zum Beispiel //ruhig, dynamisch oder verdichtet.// \\ – Die Benutzeroberfläche soll weiterhin vollständig selbst in P5.JS gestaltet werden und ausschließlich aus einfachen geometrischen Formen bestehen. Alle Interface-Elemente bleiben auf Schwarz und Weiß beschränkt. \\ – Ziel ist es, ein konsistentes visuelles und funktionales Interface zu entwickeln, das nicht nur einzelne Parameter verändert, sondern ein kleines System zur Steuerung gestalterischer Entscheidungen bildet. \\ – Die erzeugten Varianten sollen als Bilder exportiert und in einer nachvollziehbaren Serie präsentiert werden können.  \\ \\ Zur Inspiration: \\ {{:teaching:ba:courses:design-basics:sose26:interface_test_bsp-a.png?direct&200|}} {{:teaching:ba:courses:design-basics:sose26:interface_test_BSP-B2.png?direct&200|}} {{:teaching:ba:courses:design-basics:sose26:interface_test_BSP-B1.png?direct&200|}} |
 -----
@@ Line 33: / Line 33: @@
 ^ Aufgabe ^ Gestaltungsübung ^
-| C1 | **Verhalten** \\ \\ Lesen Sie sich die [[extras:wissikon:design-development:gestalt-rules|Gestalt Gesetze]] und die [[extras:wissikon:design-development:grundlagen_der_animation#die_12_prinzipien_der_animation|12 Prinzipien der Animation]] durch und wenden Sie eines oder mehrere dieser Gesetzmäßigkeiten in dieser Aufgabe an. \\ – Entwickeln Sie auf Basis von P5.JS ein kleines Spiel, bei dem sich Ihr Buchstabe über die Fläche bewegt und auf Eingaben reagiert. Ziel ist es, andere Elemente zu sammeln oder Hindernissen auszuweichen. \\ – Ihr zuvor verwendeter Buchstabe soll im Spiel der [[extras:wissikon:alle-moeglichen-begriffe:protagonist|Protagonist]] sein. Was oder wer könnte die Rolle des Antagonisten einnehmen? \\ – Das Spiel soll nur in schwarz/weiß gestaltet sein. Das System soll mindestens drei Zustände besitzen: Start, Spiel läuft und Game Over. \\ – Sichtbar werden sollen Regeln wie Kollision, Punktevergabe, Verlustbedingung und Neustart. \\ – Im Mittelpunkt stehen Bewegung, Trefferlogik, Auslöser und Reaktionen. |
+| C1 | **Verhalten** \\ \\ Lesen Sie sich die [[extras:wissikon:design-development:gestalt-rules|Gestalt Gesetze]] und die [[extras:wissikon:design-development:grundlagen_der_animation#die_12_prinzipien_der_animation|12 Prinzipien der Animation]] durch und wenden Sie eines oder mehrere dieser Gesetzmäßigkeiten in dieser Aufgabe an. \\ – Entwickeln Sie auf Basis von P5.JS ein kleines Spiel, bei dem sich Ihr Buchstabe über die Fläche bewegt und auf Eingaben reagiert. Ziel ist es, andere Elemente zu sammeln oder Hindernissen auszuweichen. \\ – Ihr zuvor verwendeter Buchstabe soll im Spiel der [[extras:wissikon:alle-moeglichen-begriffe:protagonist|Protagonist]] sein. Was oder wer könnte die Rolle des Antagonisten einnehmen? \\ – Das Spiel soll nur in schwarz/weiß gestaltet sein. Das System soll mindestens drei Zustände besitzen: Start, Spiel läuft und Game Over. \\ – Bauen Sie einen "Full-Screen Modus" ein. Beispielsweise kann einen Tastaturkürzel das Browserfenster auf 100% Screengröße setzen und den Browserrahmen verstecken. Wir werden die Ergebnisse in der nächsten Woche in einer Videoprojektion austesten. \\ – Sichtbar werden sollen Regeln wie Kollision, Punktevergabe, Verlustbedingung und Neustart. \\ – Im Mittelpunkt stehen Bewegung, Trefferlogik, Auslöser und Reaktionen.  \\ \\ Zur Inspiration: \\ {{:teaching:ba:courses:design-basics:sose26:mini_typo-game_01.png?nolink&200|}} {{:teaching:ba:courses:design-basics:sose26:mini_typo-game_03.png?nolink&200|}} {{:teaching:ba:courses:design-basics:sose26:mini_typo-game_02.png?nolink&200|}} |
-| C2 | **App-Icon** \\ \\ – Finalisieren Sie das Mini-Game aus Aufgabe C1.  \\ – Entwickeln Sie ein [[extras:wissikon:semantik:icon|App-Icon]] für dieses Game. \\ – Überlegen Sie zunächst, wofür die App steht und welches Zeichen, Objekt, Symbol oder welcher Buchstabe diesen Inhalt möglichst klar darstellen kann. \\ – Reduzieren Sie Ihre Idee auf eine einfache und prägnante Form, die auch in kleiner Darstellung gut erkennbar bleibt. \\ – Gestalten Sie Ihr Icon in einem quadratischen Format und nur in Schwarz und Weiß. \\ – Entwickeln Sie mindestens drei unterschiedliche Varianten. Variieren Sie dabei zum Beispiel Proportion, Anschnitt, Flächenverteilung, Figur-Grund-Beziehung oder formale Reduktion. Prüfen Sie Ihre Entwürfe auch in sehr kleiner Darstellung. Entfernen oder vereinfachen Sie Elemente, die zu klein, zu unruhig oder schwer lesbar sind. \\ – Wählen Sie eine Variante aus und überarbeiten Sie diese zu einer klaren finalen Version. \\ – Legen Sie zusätzlich eine kleine Übersicht Ihrer Varianten an, damit Ihr Gestaltungsprozess nachvollziehbar bleibt. \\ – Bringen Sie Ihre finale Version und die Variantenübersicht zum nächsten Termin mit. |
+| C2 | **App-Icon** \\ \\ – Finalisieren Sie das Mini-Game aus Aufgabe C1.  \\ – Entwickeln Sie ein [[extras:wissikon:semantik:icon|App-Icon]] für dieses Game. \\ – Überlegen Sie zunächst, wofür die App steht und welches Zeichen, Objekt, Symbol oder welcher Buchstabe diesen Inhalt möglichst klar darstellen kann. \\ – Reduzieren Sie Ihre Idee auf eine einfache und prägnante Form, die auch in kleiner Darstellung gut erkennbar bleibt. \\ – Gestalten Sie Ihr Icon in einem quadratischen Format und nur in Schwarz und Weiß. \\ – Entwickeln Sie mindestens drei unterschiedliche Varianten. Variieren Sie dabei zum Beispiel Proportion, Anschnitt, Flächenverteilung, Figur-Grund-Beziehung oder formale Reduktion. Prüfen Sie Ihre Entwürfe auch in sehr kleiner Darstellung. Entfernen oder vereinfachen Sie Elemente, die zu klein, zu unruhig oder schwer lesbar sind. \\ – Wählen Sie eine Variante aus und überarbeiten Sie diese zu einer klaren finalen Version. \\ – Legen Sie zusätzlich eine kleine Übersicht Ihrer Varianten an, damit Ihr Gestaltungsprozess nachvollziehbar bleibt. \\ – Bringen Sie Ihre finale Version und die Variantenübersicht zum nächsten Termin mit.  \\ \\ Zur Inspiration: \\ {{:teaching:ba:courses:design-basics:sose26:bsp_app-icon.png?nolink&200|}}|
@@ Line 45: / Line 45: @@
 ^ Aufgabe ^ Gestaltungsübung ^
 | D1 | **App-Icon als 3D-Objekt** \\ \\ – Entwickeln Sie auf Grundlage Ihres zuvor gestalteten App-Icons ein einfaches dreidimensionales Objekt in TinkerCAD. \\ – Überlegen Sie, wie sich die zweidimensionale Form des Icons in Höhe, Tiefe, Relief und Volumen übersetzen lässt. \\ – Reduzieren Sie die Gestaltung so, dass eine klare, druckbare und formal verständliche 3D-Version entsteht. Arbeiten Sie mit einfachen Grundformen und kombinieren, subtrahieren oder skalieren Sie diese in TinkerCAD zu einem präzisen Objekt. Achten Sie darauf, dass das Modell für den 3D-Druck geeignet ist, also keine zu dünnen, instabilen oder unnötig komplexen Elemente enthält. Erstellen Sie mindestens eine erste Testversion Ihres Modells und prüfen Sie, wie gut das ursprüngliche Icon in die räumliche Form übertragen wurde. \\ – Bereiten Sie das Objekt für den 3D-Druck vor und drucken Sie es aus. \\ – Bringen Sie das gedruckte Objekt zusammen mit einer Abbildung des ursprünglichen Icons zum nächsten Termin mit. |
-| D2 | … |
+| D2 | – Bauen Sie auf Ihrem in D1 entwickelten 3D-gedruckten App-Icon auf. Entwickeln Sie nun eine zweite, weiterführende Variante Ihres Objekts. Diese Variante soll mindestens ein zusätzliches konstruktives oder funktionales Element enthalten, das über eine einfache statische Form hinausgeht. Möglich sind zum Beispiel ein bewegliches Teil, eine schraubbare Verbindung, ein steckbares Element, eine drehbare Komponente oder die Integration eines eingedruckten beziehungsweise eingesetzten Magneten. Ziel ist es, das bisherige Objekt nicht nur formal, sondern auch konstruktiv weiterzuentwickeln. Achten Sie darauf, dass die neue Variante weiterhin auf Ihrem ursprünglichen App-Icon basiert und dessen Form oder Idee erkennbar bleibt. Planen Sie das Objekt in TinkerCAD so, dass die zusätzlichen Elemente technisch sinnvoll aufgebaut und für den 3D-Druck geeignet sind. Berücksichtigen Sie dabei Maße, Toleranzen, Wandstärken, Bewegungsfreiheit, Verbindungen und gegebenenfalls die Position weiterer Bauteile wie Magneten. Drucken Sie die weiterentwickelte Variante aus und testen Sie, ob das bewegliche, schraubbare oder besondere Element wie geplant funktioniert. \\ – Dokumentieren Sie die Unterschiede zwischen der ersten und der zweiten Version und halten Sie fest, was sich durch die neue konstruktive Idee verändert hat.|