This is an old revision of the document!
Table of Contents
Design Basics | Praktische Grundlagen der Gestaltung mit digitalen Medien (Bachelor)
In diesem Kurs erhalten Studierende einen Überblick zu den Grundlagen der Gestaltung mit Digitalen Medien. Anhand von Vorträgen bekommen die Studierenden einen Überblick zu aktuellen Trends und den wichtigsten Designprinzipien- und prozessen. Es gibt Einführungen in digitale Anwendungen und Werkzeuge, sowie praktische Tipps, die bei der Bearbeitung konkreter Designaufgaben helfen. Teilnehmende Studierende werden ermutigt die eigenen kreativen Fähigkeiten zu entwickeln und gleichzeitig die praktischen Fertigkeiten im Bereich Design und Medienproduktion zu stärken. Dabei wird die Fähigkeit konstruktives Feedback zu geben und zu empfangen eingeübt und der praktische Umgang von Gestaltungsprinzipien anhand von Mini-Challenges erprobt. Ein Crashkurs in das Feld Design, der die Studierenden für zukünftige Projektarbeiten vorbereitet.
| Modulbezeichnung: | Praktische Grundlagen der Gestaltung mit digitalen Medien / Download Modulbeschreibung |
|---|---|
| Angebot für folgende Studiengänge: | Bachelor Elektrotechnik, Bachelor Informatik, Bachelor Wirtschaftsingenieurwesen Elektrotechnik. |
| Kategorie | Wahlpflicht (4. Semester) |
| Leistungspunkte (Credits): | 5 CP |
| Kurs Dauer | 16 Wochen |
| Kontaktzeit Stunden/Woche: | Seminaristischer Unterricht, Praktikum/Gruppenarbeit: 4SWS/Woche |
| Selbststudium Stunden/Semester: | 90 Std./Semester (= 6–7 Std/Woche) für Vor-/Nachbereitung, Projektarbeit, Dokumentation |
| Voraussetzung: | – |
- Termine im SoSe 2026
- Mini-Challenges im SoSe 2026
- Kurzzeitprojekt-Gruppen (SoSe 2026)
Termine im SoSe 2026
Bitte beachten Sie, dass die Inhalte dieser Webseite kontinuierlich ergänzt und angepasst werden und sich gegebenenfalls Termine verschieben und Abgabekriterien ändern können. Am Kurs teilnehmende Studierende werden dazu angehalten diese Seite regelmäßig zu besuchen und sich rechtzeitig über eventuelle Änderungen zu informieren.
| Datum | Ort | Seminaristischer Unterricht Impuls, Kontext, Analyse, Aufgabe einführen | Praktikum technischer Einstieg, erste Übungen, Start der Mini-Challenges | Aufgaben für den jeweiligen Tag | |
|---|---|---|---|---|---|
| 01 | Mi., 25.03.2026 | Raum E-015 | Kursauftakt. Einführung in Aufbau, Ziele und Arbeitsweise des Kurses. Überblick über die vier Leitfragen A–D: Wie entsteht visuelle Ausdrucksform? Wie entsteht Bedienbarkeit und Interface-Logik? Wie entsteht Verhalten, Dynamik oder Spiellogik? Wie entsteht physische Verkörperung und prototypische Umsetzung? Gemeinsame Einordnung des Kurzzeitprojekts als kleines p5.js-Game mit optionalem physischem Controller. | Einrichtung der Arbeitsumgebung. Einführung in p5.js, Editor, Canvas, Grundstruktur eines Sketches, einfache Shapes, Farben, Text und Export. Erste kleine Übung: visuelle Reaktion auf Maus oder Tastatur. | p5.js lokal oder im Webeditor einrichten. Kleinen Test-Sketch mit Form, Farbe und Text erstellen und zum nächsten Termin mitbringen. |
| 02 | Mi., 01.04.2026 | Raum E-015 | Block A1: Wie entsteht visuelle Ausdrucksform? Impuls zu Typografie als Form, Rhythmus, Muster und Variable. Analyse ausgewählter Beispiele aus generativer Typografie, experimenteller Schrift und digitalen Zeichen-Systemen. Einführung der Mini-Challenge: Entwicklung eines kleinen typografischen Generators in p5.js. | Technische Einführung in Textdarstellung in p5.js: text(), Fonts, Positionierung, Größen, Schleifen, Zufall, Variablen. Erste Übungen mit Buchstaben als grafischem Material. Start eines ersten generativen Typo-Sketches. | Den begonnenen Typo-Sketch zuhause ausbauen. Mindestens drei visuelle Varianten entwickeln, die auf demselben Grundprinzip basieren. |
| 03 | heute kein Kurs wg. Osterferien | ||||
| 04 | Mi., 15.04.2026 | Raum E-015 | Block A2: Besprechung der Hausaufgaben und Zwischenstände. Fokus auf Unterschied zwischen Effekt und System, Konsistenz und Variation, Lesbarkeit und Abstraktion. Kurzer Vertiefungsimpuls zur Frage, wie aus typografischen Regeln eine visuelle Sprache für ein digitales Projekt entstehen kann. | Vertiefung p5.js für den Typo-Generator: Animation, Parametersteuerung, Interaktivität über Maus oder Tastatur, Feinschliff und Struktur im Code. Arbeitsphase mit Betreuung. | Typo-Generator finalisieren und dokumentieren. Zusätzlich kurz notieren, welche Elemente daraus später für ein Game-Interface übernommen werden könnten. |
| 05 | Mi., 22.04.2026 | Raum E-015 | Block B1: Wie entsteht Bedienbarkeit und Interface-Logik? Impuls zu Interface als vermittelnder Schicht zwischen Mensch und System. Themen: Buttons, Zustände, Orientierung, Lesbarkeit, Hierarchie, Rückmeldung. Analyse einfacher Menü- und UI-Beispiele. Einführung der Mini-Challenge: Entwicklung eines kleinen klickbaren Interface-Moduls in p5.js. | Technische Einführung in klickbare Bereiche, Hover-Zustände, Variablen für States, einfache Buttons und Screen-Wechsel in p5.js. Erste Übungen: Startbutton, Zustandswechsel, Score-Anzeige oder Menüscreen. | Mindestens zwei Screen-Zustände anlegen, z. B. Startscreen und Spielscreen oder Menü und Auswahlscreen. Gestaltung aus Block A möglichst mit übernehmen. |
| 06 | Mi., 29.04.2026 | Raum E-015 | Block B2: Besprechung der UI-Zwischenstände. Fokus auf Verständlichkeit, Bedienbarkeit und grafische Kohärenz. Kurzer Impuls zur Reduktion im Interface-Design: Was ist notwendig, was ist überflüssig? Überleitung zur Frage, wie Interfaces in echte Interaktion und Spielverhalten übergehen. | Vertiefung der UI-Logik: mehrere Buttons, Zustandsverwaltung, einfache Navigation, Restart, Overlay oder Punktelogik im Interface. Arbeitsphase mit Betreuung zur Fertigstellung eines nutzbaren UI-Prototyps. | UI-Prototyp abschließen. Kurz festhalten, welche Eingaben und Zustände für ein späteres Spiel benötigt werden. |
| 07 | Mi., 06.05.2026 | Raum E-015 | Block C1: Wie entsteht Verhalten, Dynamik oder Spiellogik? Impuls zu Verhalten als Kern interaktiver Systeme. Themen: Regeln, Bewegung, Reaktion, Kollision, Ziel, Schwierigkeit, Punktelogik. Analyse kleiner Game-Mechaniken und Mikrospiele. Einführung der Mini-Challenge: Entwicklung einer einfachen spielbaren Mechanik in p5.js. | Technische Einführung in Bewegung, Geschwindigkeit, Richtung, Tastatursteuerung, Kollisionen, Trigger, einfache Zustandswechsel und Punktelogik. Erste Übungen mit bewegten Objekten und einfachen Regeln. | Eine einfache spielbare Grundmechanik zuhause ausarbeiten. Ziel: Es soll klar erkennbar sein, was gesteuert wird und was das Ziel des Spiels ist. |
| 08 | Mi., 13.05.2026 | Raum E-015 | Block C2: Besprechung der Mikrospiele und Zwischenstände. Fokus auf Lesbarkeit der Spielidee, Verständlichkeit der Regeln, Feedback und Motivation. Kurzer Vertiefungsimpuls zu Balancing, Wiederholung und Komplexitätsreduktion. | Vertiefung der Spiellogik: Game Over, Neustart, mehrere Zustände, steigender Schwierigkeitsgrad, Score-Systeme, visuelles Feedback. Arbeitsphase mit Betreuung zur Fertigstellung eines kleinen spielbaren Prototyps. | Spielmechanik finalisieren. Für das nächste Treffen ein kurzes Konzept mitbringen: Welche Form von physischem Input oder Controller könnte zur eigenen Spielidee passen? |
| 09 | Mi., 20.05.2026 | Raum E-015 | Block D1: Wie entsteht physische Verkörperung und prototypische Umsetzung? Impuls zu physischen Interfaces, Ergonomie, Materialität, Gehäusen und Bedienhandlungen. Analyse einfacher Controller und Eingabegeräte. Einführung der Mini-Challenge: Entwicklung eines ersten Controller- oder Gehäusekonzepts für das eigene Spiel. | Einführung in TinkerCAD und Grundprinzipien des 3D-Drucks: Körper, Booleans, Maßhaltigkeit, Wandstärken, Toleranzen, Steckverbindungen. Erste Übung: einfache druckbare Form mit Öffnung, Aufnahme oder Verbindungselement. | Ein erstes digitales Modell für ein einfaches Eingabeelement oder Controller-Bauteil erstellen. Zusätzlich kurz beschreiben, welche Funktion dieses Teil im Spiel übernehmen soll. |
| 10 | Mi., 27.05.2026 | Raum E-015 | Block D2: Besprechung der Entwürfe und Modelle. Fokus auf Verhältnis von Spielmechanik, Bedienhandlung und physischer Form. Kurzer Vertiefungsimpuls zu prototypischem Denken: testen statt perfektionieren. | Vertiefung in TinkerCAD und Design for Fabrication: Schraubverbindungen, Magnetintegration, bewegliche Teile, Druckorientierung, einfache Gehäuse-Logik. Arbeitsphase zur Finalisierung eines druckbaren Bauteils oder Controller-Prototyps. | 3D-Modell finalisieren und für den Druck vorbereiten. Optional Ausdruck oder Screenshot-Dokumentation mitbringen. |
| 11 | Mi., 03.06.2026 | Raum E-015 | Einführung in das Kurzzeitprojekt. Zusammenführung der Ergebnisse aus A–D. Impuls zu Scope, Reduktion und sinnvoller Projektgröße: kleines, klares und funktionierendes Game statt überladener Komplexität. Projektteams bzw. Einzelarbeiten festlegen, Spielideen besprechen und Projektbriefing präzisieren. | Technische Projektstart-Phase. Struktur eines kleinen Game-Projekts in p5.js, Ordnung im Code, Assets, Zustände und Arbeitsaufteilung. Beginn der Projektarbeit auf Basis vorhandener Mini-Challenges. | Projektidee schriftlich konkretisieren: Spielprinzip, visuelle Sprache, Interface, benötigte Inputs und geplanter Controller oder physische Komponente. |
| 12 | Mi., 10.06.2026 | Raum E-015 | Projektbesprechung I. Vorstellung und Diskussion der Konzepte, erste Zwischenstände und auftretende Probleme. Kurzer Impuls zu Iteration, Testing und klarer Nutzerführung im Spiel. | Begleitete Projektarbeit. Technische Betreuung bei Spiellogik, Interface, Feinschliff, Debugging und Integration einzelner Komponenten. | Projekt weiterentwickeln. Bis zum nächsten Termin soll ein spielbarer Zwischenstand vorliegen. |
| 13 | Mi., 17.06.2026 | Raum E-015 | Projektbesprechung II. Sichtung der spielbaren Zwischenstände. Fokus auf Funktion, Verständlichkeit, visuelle Kohärenz und Spielerfahrung. Kurzer Impuls zu Testbeobachtung und gezielter Verbesserung. | Begleitete Projektarbeit mit Fokus auf Integration: UI, Spielmechanik, visuelle Sprache und ggf. physischer Controller zusammenführen. | Projekt gezielt überarbeiten. Mindestens einen Test mit einer anderen Person durchführen und die wichtigsten Erkenntnisse notieren. |
| 14 | Mi., 24.06.2026 | Raum E-015 | Projektbesprechung III. Auswertung der Testläufe. Fokus auf letzte Anpassungen, Reduktion von Fehlern und Verbesserung des Gesamteindrucks. Kurzer Impuls zur Präsentation von Prototypen. | Finale Produktionsphase. Technische Unterstützung bei Bugfixing, Export, Druck oder Montage letzter Bauteile, Dokumentation und Präsentationsvorbereitung. | Projekt finalisieren und Präsentation vorbereiten. Alle relevanten Dateien, Modelle und Dokumentationen geordnet ablegen. |
| 15 | Mi., 01.07.2026 | Raum E-015 | Abschlusspräsentationen und gemeinsame Reflexion. Präsentation der Kurzzeitprojekte mit Fokus auf Prozess, Entscheidungen, Funktion und Übertragbarkeit der vier Leitfragen A–D in das Endergebnis. Gemeinsame Auswertung des Kurses. | Präsentation, Spieltests und Sichtung der Ergebnisse im Kurs. Dokumentation der Projekte und Abschlussfeedback. | Abgabe des finalen Projekts mit Code, ggf. 3D-Modell, kurzer Dokumentation und ausgewählten Screenshots oder Fotos. |
Aufbau und Struktur des Kurses
Jedes Kurstreffen gliedert sich in Praktikum (technische Umsetzung, Werkzeuge und erste angeleitete Anwendungen) und seminaristischen Unterricht (Einordnung, Reflexion, Besprechung und gestalterischen Orientierung). Die Bearbeitung startet dabei meist während des Unterrichts und wird dann als Hausaufgabe fortgeführt. So entsteht ein sinnvoller Rhythmus:
verstehen → ausprobieren → zuhause weiterentwickeln → im nächsten Termin besprechen → vertiefen.
Wöchentlich werden im Unterricht design-relevante Inhalte behandelt. In der ersten Semesterhälfte liegt dabei der Fokus auf vier Mini-Challenges. In deren Bearbeitung durchlaufen die Studierenden Komponenten aus 2D, 3D und 4D. Prozess und Ergebnisse werden in einer Dokumentationsbox archiviert und kurz zu Beginn des folgenden Seminars von den Studierenden dem gesamten Kurs vorgestellt.
- Thema A ⇒ Mini-Challenge 1 ⇒ Wie entsteht visuelle Ausdrucksform?
- Thema B ⇒ Mini-Challenge 2 ⇒ Wie entsteht Bedienbarkeit und Interface-Logik?
- Thema C ⇒ Mini-Challenge 3 ⇒ Wie entsteht Verhalten, Dynamik oder Spiellogik?
- Thema D ⇒ Mini-Challenge 4 ⇒ Wie entsteht physische Verkörperung und prototypische Umsetzung?
Zu Beginn der zweiten Semesterhälfte werden die Studierenden in Kleingruppen aufgeteilt/bilden Arbeitsgruppen. Diese Gruppen arbeiten dann bis zur Präsentation am Semesterende an einem Kurzzeit-Projekt. Das Thema des Kurzzeit-Projektes wird zu Beginn des Semesters bekannt gegeben. Die Bearbeitung am Kurzzeitprojekt vertieft das bisher Erlernte und verbindet die Themen A, B, C und D. Die wöchentlichen Fortschritte werden im Seminar vorgestellt und besprochen.
Lernziele
Ziel ist, die Studierenden zu befähigen, mit analogen und digitalen Werkzeugen und Entwurfsmethoden eigenständig umzugehen. Dabei lernen die Studierenden die eigene Arbeit zu reflektieren und die Ergebnisse zu diskutieren und zu präsentieren. Ein besonderer Fokus liegt auf der Verantwortung der/des Gestalters/Gestalterin für die Gesellschaft.
Die Studierenden…
- lernen Kreativmethoden, Gestaltungsprinzipien und -prozesse kennen, können diese beschreiben und selbstständig anwenden.
- können fachbezogene Prinzipien und Werkzeuge benennen und in eigenen Entwürfen anwenden.
- sind in der Lage eigene Lösungsansätze durch adäquate Mittel zu simulieren und zu präsentieren.
- lernen eigenständig Gestaltungsentscheidungen zu treffen und diese anhand von Kriterien nachvollziehbar zu begründen.
- können konstruktive Kritik begründet äußern, reflektieren und annehmen.
- können den eigenen Lernfortschritt reflektieren und diesen angemessen dokumentieren.
- lernen in Gruppen zu arbeiten und sich selbst in diese sinnvoll einzubringen.
Lerninhalte
Seminaristischer Unterricht/Praktikum/Gruppenarbeit (Mini Challenges)
- Zusammenfassung von praktischen Grundlagen der Gestaltung (visuelle Gesetzmäßigkeiten und Phänomene anhand von Beispielen)
- Systematisch aufeinander aufbauende theoretische und praktische Einheiten z. B. zu den Themen Logo-Entwicklung, Typografie, Raster, UI, UX, etc.
- Methodische Anwendung von Kreativitätstechniken zur Entwicklung gestalterischer Lösungsansätze
- Analyse- und Bewertungsmethoden für Gestaltungsansätze
- pragmatische Darstellungs-, Simulations-, Realisierungs- und Dokumentationsmethoden (2D, 3D, 4D-Darstellungen in Form von Bildmedien, Animationen und Präsentationen)
- Aufgabenbezogene Technologievermittlung
- Geführte und/oder selbstständige Übungseinheiten
Literaturempfehlung
Folgende Bücher liegen im Semesterapparat der Bibliothek am Campus Steinfurt aus:
- Data-Driven Graphic Design, Creative Coding for Visual Communication, Andrew Richardson, Bloomsbury Publishing, New York, 2016
- Design is Storytelling, Ellen Lupton, Cooper Hewitt, New York, 2017
- Designing Interactions, Bill Moggridge, MIT Press, Cambridge, 2007
- Ten Principles for Good Design: Dieter Rams, Cees W. De Jong, Prestel, Munich, 2017
- Research Methods for Product Design, Alex Milton, Paul Rodgers, Laurence King Publishing Ltd., London, 2013
- Universal Principles of Design, 150 Essential Tools for Architects, Artists, Designers, Developers, Engineers, Inventors, and Makers, William Lidwell, Kritina Holden, Jill Butler, Rockport Publishers, Beverly, 2015
- The Golden Ratio, The Divine Beauty of Mathematics, Gary B. Meisner, Race Point, New York, 2018
- The Manga Guide to Electricity, Kazuhiro Fujitaki, No Starch Press, San Francisco, 2009
Benotungsschema
Studierende müssen aus datenschutzrechtlichen Gründen bei prüfungsrelevanten Inhalten bitte immer den persönlichen FH-Account (FH e-mail) benutzen.
| I. | Kursteilnahme (Regelmäßige und aktive Teilnahme am Seminar) | 10% |
|---|---|---|
| Es wird erwartet, dass alle Kursteilnehmer*innen pünktlich und gut vorbereitet zum Kurs erscheinen, d.h. alle Aufgaben zum jeweiligen Termin bearbeitet haben, Theorieteile gelesen, gegebenenfalls Filme gesehen und die vorkommenden Themen reflektiert haben. Die Kursteilnahme wird sowohl auf Grundlage der Regelmäßigkeit als auch der Qualität der Beiträge bewertet (Feedback der Studierenden zu den Ergebnissen der Kommiliton*innen, Teilnahme an Diskussion, Regelmäßige und aktive Demonstration der Ergebnisse der Mini-Challenges und des Kurzzeit-Projektes, etc.). Im Seminar können Studierende stichprobenartig aufgefordert werden ihre individuellen Bearbeitungen vorzustellen bzw. am Klassendiskurs teilzunehmen. Mehr als zwei unentschuldigte Fehlzeiten resultieren in Abzug einer Note (-1) auf die Gesamtnote. | ||
| II. | Bearbeitung von Übungsaufgaben (Grad der Ausarbeitung und formale Qualität) | 50% |
| Eine intensive Auseinandersetzung zu den gestellten Aufgaben wird erwartet. Dabei liegt der Fokus einer praktischen Bearbeitung nicht ausschließlich auf dem Endergebnis, sondern gleichermaßen auf dem Prozess, der zu dem Ergebnis führte. Entwicklungsschritte/Arbeitsergebnisse zu den Mini-Challenges, sowie die Bearbeitung der Gruppenteilnehmer*innen am Kurzzeit-Projekt, werden von den Studierenden wöchentlich im Seminar vorgestellt. Dabei kommen Experiment und visueller Exploration, sowie Variantenreichtum eine besondere Rolle zuteil. | ||
| III. | Projektpräsentation und -dokumentation (Darstellung des Lernfortschrittes) | 40% |
| Projektpräsentation: Am Ende des Semesters wird in Form einer Präsentation (Note 10% der Gesamtnote) ein Überblick über den Verlauf und das Ergebnis des Kurzzeit-Projektes gegeben. Das Gelernte wird als Fazit reflektiert. Dabei stehen pro Person jeder Gruppe 5 Minuten Präsentationszeit zu Verfügung. (Beispiel für eine Zweier-Gruppe: 2 Personen = 10 Minuten, Beispiel bei Dreier Gruppe: 3 Personen = 15 Minuten). Die Präsentationsinhalte sollen so aufgeteilt werden, daß jede/r Teilnehmer*in 5 Minuten Sprechzeit übernimmt. Üben Sie Ihre Präsentation gut ein. Nach Ablauf der Zeit wird die Präsentation beendet. Überziehen ist nicht erlaubt. Am Ende der Präsentation gibt es pro Gruppe ±5 Minuten Zeit zur Beantwortung von Fragen durch den/die Lehrenden. Projektdokumentation: Zum Semesterende (Abgabedatum wird im Laufe des Kurses bekannt gegeben) geben die Studierenden Ihre Dokumentation in Form einer Dokumentations-Box (Note 20% der Gesamtnote) ab. In der Box werden die Ergebnisse der Mini-Challenges als Originalzeichnungen, Notizen, Ausdrucke, etc. in DIN A3 abgegeben. Benotet wird auf Basis der Vollständigkeit und der visuellen Qualität. Die Dokumentation des Kurzzeitprojektes erfolgt, wie im Kurs besprochen in Form der Abgabe der Präsentationsslides als PDF (Note 10% der Gesamtnote). Dabei muss das Kurstemplate (Keynote/Powerpoint/google Slides) verwendet werden. Die Vorlagedateien/Vorgaben zu Datengrößen/weitere Abgabekriterien werden gegen Mitte des Semesters zur Verfügung gestellt. | ||
| Total | 100% |
Sonstiges
Im Kurs werden verschiedene Software Pakete vorgestellt, die Im professionellen Arbeitsfeld des Medien-Designs häufig verwendet werden. Diese erfordern meist eine kostenpflichtige Lizenz. Studierende können auf Wunsch alternative Open Source Software Pakete verwenden. Trotzdem ist es hilfreich, wenn eine generelle Bereitschaft zur Installation von bestimmten DTP Programmen/Paketen besteht, wie bspw: Adobe Creative Cloud.


