Differences

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

--- teaching:ba:courses:design-basics:sose26:29_04_26 [2026/04/24 07:16] – Leonie Winkelmann
+++ teaching:ba:courses:design-basics:sose26:29_04_26 [2026/04/30 06:49] (current) – Leonie Winkelmann
@@ Line 4: / Line 4: @@
 Sommersemester 2026
-==== Teil 1. / seminaristischer Unterricht ====
+===== Teil 1. / seminaristischer Unterricht =====
-...
+Impuls zur Reduktion im Interface-Design und Anpassung an die jeweiligen Gegebenheiten, die die Hardware definiert. Was ist notwendig, was ist überflüssig, und wie wird aus einzelnen Bedienelementen eine nachvollziehbare Interaktionslogik?
-==== Teil 2. / Praktikum ====
+Besprechung der Ergebnisse der Hausaufgaben:
+  * Fokus auf Verständlichkeit,
+  * Bedienbarkeit und
+  * grafische Kohärenz.
+==== Hausaufgaben zur nächsten Woche: 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|}} |
+===== Teil 2. / Praktikum =====
 . Recap
-  * Wireframing
+  * [[extras:wissikon:media-design:wireframing|Wireframing]]
+  * [[extras:wissikon:media-design:user-experience-design|UX]]/[[extras:wissikon:media-design:user-interface-design|UI]] Design
+  * [[https://www.youtube.com/watch?v=T4Upf_B9RLQ|Entshittyficator]]
+. 10 Grafikdesign-Regeln (anwendbar auf UX/UI Design)
+  * 1 Grid + Arrangement
+  * 2 White Space + Clarity
+  * 3 Balance + Weight + Harmony
+  * 4 Contrast
+  * 5 Unity + Consistency
+  * 6 Typography + Readability
+  * 7 Repetition + Pattern
+  * 8 Alignment + Structure
+  * 9 Hierarchy
+  * 10 Space
+. Übungs-Game: [[https://cantunsee.space|Can't unsee]]
+. [[extras:wissikon:design-development:grundlagen_der_animation|Animationsprinzipien]]
+  * Squash and Stretch
+  * Anticipation
+  * Staging
+  * Straight Ahead Action and Pose to Pose
+  * Follow Through and Overlapping Action
+  * Slow In and Slow Out
+  * Arc
+  * Secondary Action
+  * Timing
+  * Exaggeration
+  * Solid Drawing
+  * Appeal
+. Einführung in [[https://www.figma.com/de-de/|Figma]]
+**<color #00a2e8>[[https://fh-muenster.sciebo.de/s/zkZdMfMyN34KT8r|zu den Präsentationen]]</color>**