This is an old revision of the document!

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)

Loading...

>> Go to this page.

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	Einführung in p5.js	–
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 und gemeinsame Besprechung von Aufgabe A1: Was bedeutet es, Buchstaben nicht nur zu setzen, sondern als gestaltbares Material zu verwenden? Welche Parameter erzeugen Wiedererkennbarkeit, Variation und eine erste visuelle Sprache?	Einführung Schrift und Typografie anhand von Indesign	Aufgabe A1 untersucht, wie aus Schrift, Form, Rhythmus und Variation eine visuelle Ausdrucksform entstehen kann. Im Mittelpunkt stehen Buchstaben als grafisches Material, der Umgang mit typografischen Parametern und die Entwicklung einer ersten kleinen visuellen Sprache in p5.js.
03	~~Mi., 08.04.2026~~	heute kein Kurs wg. Osterferien
04	Mi., 15.04.2026	Raum E-015	Block A2: Besprechung der Hausaufgaben und Zwischenstände zu Aufgabe A1 als Überleitung zu Aufgabe A2. Fokus auf Unterschied zwischen Effekt und System, Konsistenz und Variation, Lesbarkeit und Abstraktion. Vertiefungsimpuls zur Frage, wie aus typografischen Regeln, Entscheidungen und Parametern eine tragfähige visuelle Sprache für ein digitales Projekt entsteht und wie diese in A2 gezielt weiterentwickelt werden soll.	Format & Layout in Indesign	Aufgabe A2 vertieft die in A1 begonnene Arbeit zu einer konsistenteren und zugleich variablen visuellen Sprache. Im Mittelpunkt stehen der Unterschied zwischen Effekt und System, die Steuerung von Parametern sowie das Verhältnis von Lesbarkeit und Abstraktion.
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 und gemeinsame Besprechung von Aufgabe B1: Welche gestalterischen und funktionalen Entscheidungen machen eine Interaktion verständlich, erwartbar und benutzbar?	UI-Design	Aufgabe B1 untersucht, wie Bedienbarkeit und Interface-Logik aus klarer visueller und funktionaler Ordnung entstehen. Im Mittelpunkt stehen anklickbare Elemente, Zustände, Rückmeldungen und die Frage, wie Orientierung und Interaktion in p5.js verständlich gestaltet werden können.
06	Mi., 29.04.2026	Raum E-015	Block B2: Besprechung der UI-Zwischenstände und Rückblick auf Aufgabe B1 als Grundlage für Aufgabe B2. Fokus auf Verständlichkeit, Bedienbarkeit und grafische Kohärenz. Kurzer Impuls zur Reduktion im Interface-Design: Was ist notwendig, was ist überflüssig, und wie wird aus einzelnen Bedienelementen eine nachvollziehbare Interaktionslogik?	Einführung in Figma	Aufgabe B2 vertieft den Aufbau eines nutzbaren Interface-Prototyps durch mehrere Zustände, Navigation und konsistente Rückmeldungen. Im Mittelpunkt stehen Verständlichkeit, Reduktion und die gestalterische Kohärenz zwischen einzelnen Bedienelementen.
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 und gemeinsame Besprechung von Aufgabe C1: Wie wird aus grafischen Elementen ein System, das auf Eingaben reagiert, Ziele formuliert und Spielverhalten erzeugt?	Einführung Illustrator	Aufgabe C1 untersucht, wie Verhalten, Bewegung und einfache Spiellogik in einem interaktiven System entstehen. Im Mittelpunkt stehen Regeln, Kollisionen, Reaktionen, Ziele und erste Formen der Punktevergabe. Damit erschließt die Aufgabe zentrale Grundlagen digitaler Medien, da Anwendungen nicht nur gestaltet, sondern auch in ihrem zeitlichen und systemischen Verhalten entworfen werden.
08	Mi., 13.05.2026	Raum E-015	Block C2: Besprechung der Mikrospiele und Zwischenstände zu Aufgabe C1 als Ausgangspunkt für Aufgabe C2. Fokus auf Lesbarkeit der Spielidee, Verständlichkeit der Regeln, Feedback und Motivation. Kurzer Vertiefungsimpuls zu Balancing, Wiederholung und Komplexitätsreduktion: Welche Elemente braucht ein kleines Spiel wirklich, damit es nachvollziehbar und spielbar bleibt?	Einführung in TinkerCAD	Aufgabe C2 vertieft das in C1 entwickelte Spielsystem zu einem kleinen spielbaren Prototyp mit mehreren Zuständen und klarerem Feedback. Im Mittelpunkt stehen Game Over, Neustart, steigende Schwierigkeit, Balancing und die Lesbarkeit der Spielidee.
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 und gemeinsame Besprechung von Aufgabe D1: Wie lässt sich ein digitales Prinzip, eine Spielfunktion oder eine grafische Idee in eine physische Form, ein Objekt oder einen Controller übersetzen?	Einführung in Adobe Dimension, 3D Stager	Aufgabe D1 untersucht, wie ein digitales Zeichen in eine physische Form überführt werden kann. Im Mittelpunkt stehen Übersetzung, Reduktion, räumliches Denken und die Frage, wie Wiedererkennbarkeit auch im dreidimensionalen Objekt erhalten bleibt.
10	Mi., 27.05.2026	Raum E-015	Block D2: Besprechung der Entwürfe und Modelle zu Aufgabe D1 als Vorbereitung auf Aufgabe D2. Fokus auf Verhältnis von Spielmechanik, Bedienhandlung und physischer Form. Kurzer Vertiefungsimpuls zu prototypischem Denken: testen statt perfektionieren. Dabei wird geklärt, wie konstruktive, funktionale und gestalterische Entscheidungen in D2 gezielt weitergeführt werden.	Einführung Photoshop	Aufgabe D2 vertieft die Überführung eines digitalen Zeichens in ein physisches Objekt durch eine zusätzliche konstruktive oder funktionale Ebene. Im Mittelpunkt stehen Variation, technische Umsetzung und die Frage, wie ein formal reduziertes App-Icon durch Bewegung, Verbindung oder Materialergänzung erweitert werden kann.
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. Gemeinsame Besprechung der Projektaufgabe: Aus den bisherigen Mini-Challenges werden visuelle Sprache, Interface, Spiellogik und ggf. physische Komponente zu einem eigenständigen Vorhaben gebündelt. Projektteams bzw. Einzelarbeiten festlegen, Spielideen besprechen und Projektbriefing präzisieren.	Einführung in Miro	Finden Sie sich in Teams zusammen und entwickeln Sie ein erstes Konzept für Ihr Mini-Projekt: ein kleines Game in p5.js. Konkretisieren Sie Spielidee, Ziel, Grundmechanik, visuelle Richtung und mögliche Interaktion. Erstellen Sie ein Moodboard zur gestalterischen Ausrichtung sowie ein Storyboard mit gescribbelten Vorschaubildern zum geplanten Spielablauf, zu Screens, Situationen oder Interaktionen. Die Ergebnisse werden in der kommenden Woche im Seminar besprochen.
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. Die Tagesaufgabe wird gemeinsam verortet: Was muss bis zum nächsten Termin in einen wirklich spielbaren Zwischenstand überführt werden, welche Kernfunktionen haben Priorität und welche Entscheidungen können vorerst zurückgestellt werden?	Begleitete Projektarbeit	Entwickeln Sie auf Basis von Konzept, Moodboard und Storyboard einen ersten spielbaren Prototypen in p5.js. Setzen Sie zentrale Elemente Ihres Spiels um, etwa Grundmechanik, einfache Steuerung, erste visuelle Gestaltung und einen klar lesbaren Ablauf. Überarbeiten Sie bei Bedarf Storyboard und Konzept und halten Sie wichtige Iterationen und Zwischenstände mit Screenshots fest. 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. Die Tagesaufgabe wird konkret eingeführt: Wie führt man einen einfachen Test mit einer anderen Person durch, worauf sollte beobachtet werden und wie lassen sich die wichtigsten Erkenntnisse knapp, aber brauchbar dokumentieren?	Einführung Keynote	Überarbeiten Sie Ihr Mini-Projekt auf Grundlage der Besprechung und testen Sie das Spiel mit mindestens einer anderen Person. Dokumentieren Sie die wichtigsten Erkenntnisse aus dem Test und leiten Sie daraus konkrete Verbesserungen für Spielmechanik, Lesbarkeit, Interface, Tempo oder Feedback ab. Finalisieren und schärfen Sie außerdem Moodboard, Storyboard und Konzept, sodass die gestalterische und spielerische Richtung konsistent nachvollziehbar bleibt.
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. Die Tagesaufgabe wird gemeinsam strukturiert: Was gehört in eine überzeugende Abgabe, wie werden Dateien, Modelle und Dokumentationen sinnvoll geordnet, und wie lässt sich das Projekt in der Präsentation knapp, nachvollziehbar und anschaulich darstellen?	Begleitete Projektarbeit. Fokus auf Dokumentation und Präsentationsvorbereitung	Finalisieren Sie Ihr Game in p5.js und bereiten Sie die Präsentation Ihres Projekts vor. Ordnen Sie Ihre Materialien so, dass Konzeptentwicklung, Moodboard, Storyboard, Prototyping, Iterationen und Verbesserungen nachvollziehbar dargestellt werden können. Sammeln Sie dafür aussagekräftige Screenshots der Zwischenstände und des finalen Spiels und strukturieren Sie Ihre Dateien, Dokumentationen und Präsentationsinhalte.
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. Die Abschlussaufgabe wird im Seminarrahmen noch einmal gebündelt: Welche Bestandteile sind Teil der finalen Abgabe, wie werden Code, ggf. 3D-Modell, Dokumentation und Bildmaterial nachvollziehbar zusammengeführt und was lässt sich aus dem eigenen Prozess für weitere Projekte mitnehmen?		Abgabe des finalen Projekts mit Code, ggf. 3D-Modell, kurzer Dokumentation in Form eines Posters mit ausgewählten Screenshots.

Aufbau und Struktur des Kurses

Wöchentlich werden im seminaristischen Unterricht design-relevante Themen 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. Die Bearbeitung startet dabei meist während des Unterrichts und wird dann als Hausaufgabe fortgeführt. 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 (2D)
Thema B ⇒ Mini-Challenge 2 (2D)
Thema C ⇒ Mini-Challenge 3 (3D)
Thema D ⇒ Mini-Challenge 4 (4D)

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 Kursteilnehmerinnen 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 Kommilitoninnen, 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 Gruppenteilnehmerinnen 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 Teilnehmerin 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.

Creative Technologies Lab | dokuWiki

Table of Contents