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 2025
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 | Einführung in Themen/Inhalte | Aufgaben für den jeweiligen Tag | |
---|---|---|---|---|
01 | Do., 27.03.2025 | Raum E-015 | Einführung in den Kurs Autoaktive-, Reaktive- und Interaktive Medien, Mediendesign-Formate, Einordnung von UX, UI, XD Impuls Vortrag Digitale Werkzeuge und Anwendungen: P5.JS | – |
02 | Do., 03.04.2025 | Raum E-015 | Grundregeln Design Gestaltgesetze, Wahrnehmungspsychologie, Goldener Schnitt, Utilitas, Venustas, Firmitas (Vitruvius), Dieter Rams Regeln für Gutes Design Impuls Vortrag Digitale Werkzeuge und Anwendungen: Adobe Photoshop | Mini-Challenge 1 |
03 | Do., 10.04.2025 | Raum E-015 | Farbenlehre Farbmodelle (RGB, CMYK), Farbharmonien, Kontraste Impuls Vortrag Digitale Werkzeuge und Anwendungen: Adobe Illustrator | Mini-Challenge 2 |
04 | Do., 17.04.2025 | Raum E-015 | Typografie Schriftenwahl, Lesbarkeit Arial vs. Helvetica Impuls Vortrag Digitale Werkzeuge und Anwendungen: Adobe Indesign | Mini-Challenge 3A |
05 | Do., 24.04.2025 | Raum E-015 | Komposition und Layout Raster, Weißraum, visuelle Hierarchie Impuls Vortrag Digitale Werkzeuge und Anwendungen: xScope | Mini-Challenge 3B |
06 | – | – | ||
07 | Do., 08.05.2025 | Raum E-015 | Animation Impuls Vortrag Digitale Werkzeuge und Anwendungen: | Mini-Challenge 4A |
08 | Do., 15.05.2025 | vsl. im Coding Space (Labor Stalljohann) | Visual Programming, Generatives Design Impuls Vortrag Digitale Werkzeuge und Anwendungen: vvvv | Mini-Challenge 4B |
09 | Do., 22.05.2025 | Raum E-015 | Design Prozess 1/4 Design Thinking und kreative Prozesse Impuls Vortrag Digitale Werkzeuge und Anwendungen: Touchdesigner (Yuni) | Fertigstellung der Dokubox, Kurzzeit-Projekt (01): … |
10 | – | – | ||
11 | Do., 05.06.2025 | Raum E-015 | Design Prozess 2/4 Skizzieren und Ideenentwicklung… Impuls Vortrag Digitale Werkzeuge und Anwendungen: Adobe Substance 3D Stager | Kurzzeit-Projekt (02): … |
12 | Do., 12.06.2025 | Raum E-015 | Design Prozess 3/4 Iteratives Arbeiten und Feedbackprozesse… Impuls Vortrag Digitale Werkzeuge und Anwendungen: Adobe Aero | Kurzzeit-Projekt (03): … |
13 | – | – | ||
14 | Do., 26.06.2025 | Raum E-015 | Design Prozess 4/4 Präsentation und Dokumentation The Cognitive Style of Powerpoint | Kurzzeit-Projekt Präsentation (04a) & Kurzzeit-Projekt Dokumentation (4b) |
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.
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 Dokumentationsbox zu dokumentieren und in der jeweiligen Folgewoche im Kurs zu präsentieren.
Mini-Challenge 1
- Lesen Sie sich diese Übersicht zu den Gestaltgesetzen durch.
- Ihre Aufgabe ist es nun zwei P5.JS Sketche zu coden, die jeweils eines der Gesetze bestmöglich in Form von einem Bild oder einer animierten Sequenz visualisieren.
- 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.
- Die Ergebnisse werden beim nächsten mal der gesamten Gruppe vorgestellt (inkl Doku-Box) und gemeinsam besprochen. Die fertigen Code-snippets werden per email an Prof. Beck geschickt.
Mini-Challenge 2
- Schauen Sie sich die RGB-Arbeiten des Künstler Duos 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 (Beispielcode Carnovsky). Die unteren drei Beispiele sind screenshots von dem verlinkten P5.JS sketch.
- Ü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.
- Dokumentieren Sie Ihren Prozess mit Hilfe von Fotos, Skizzen und Screenshots. Die jeweiligen Ausdrucke wandern in die Dokumentationsbox und werden im nächsten Seminar neben den Ergebnissen des DIN A3 Plakates vorgestellt.
Mini-Challenge 3A
Modellieren Sie Ihren Namen in TinkerCAD in Form einer Namensskulptur. Wählen Sie dafür eine Schrift, die zu Ihnen passt – Sie vielleicht sogar repräsentiert. Gegebenenfalls müssen Sie hier einzelne Buchstaben als *.svg-Dateien importieren und diese extrahieren). Der Name soll dabei von oben nach unten lesbar sein – die Buchstaben also nicht in Leserichtung nebeneinander, sondern untereinander – und in einer Form, dass man die Skulptur um 360° drehen muss, um Ihren Namen komplett lesen zu können. Alle verwendeten Buchstaben sollten natürlich zur gleichen Schrift gehören. Die Versalhöhe sollte etwa 3-5 cm betragen. Die Höhe der Gesamtskulptur soll nicht höher sein als 15 cm. Das ganze soll später 3D-gedruckt werden. Versuchen Sie deswegen die Buchstaben möglichst intelligent aufeinander aufzubauen. Verwenden Sie nur Buchstaben, keine “Brückenelemente”.
Mini-Challenge 3B
3D-Drucken Sie Ihre Namensskulptur im MakerSpace, in einer Höhe von 15 cm. Bringen Sie das Ergebnis beim nächsten Mal mit zum Unterricht. Dokumentieren Sie Ihren Prozess durch Fotos und integrieren Sie Ihre Doku in die Dokubox.
Mini-Challenge 4A
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 Grundlagen von Animation durch.
Zur Erstellung der Animation können beliebige Tools eingesetzt werden, wie bspw die folgenden frei verfügbaren Online-Tool:
- https://flipanim.com (Frame-by-Frame-Zeichnung)
- https://piskelapp.com (Pixelanimation)
Abgabe:
- Die Animation soll als 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 Doku-Box
- Eine kurze schriftliche Reflexion (100–150 Wörter): Welche gestalterische Idee wurde verfolgt? Welche Entscheidungen waren notwendig?
Mini-Challenge 4B
- Lesen Sie sich die Beschreibung zu den 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 P5.JS Sketch zu coden, der die jeweilige Idee durch Bewegung, Formverhalten oder Interaktion deutlich visualisiert. Orientieren Sie sich an folgendem 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.
Kurzzeitprojekt-Gruppen (SoSe 2025)
Beachten Sie, daß es sich bei dem Kurzzeitprojekt um eine Gruppenarbeit handelt (pro Team zwei bis max. vier Studierende).
Stimmen Sie sich innerhalb Ihres Teams für die notwendigen Besprechungstermine ab. Erstellen Sie einen gemeinsamen Zeitplan für die Bearbeitungsschritte bis Ende der Bearbeitungsphase. Besprechen Sie in Ihrem Team die jeweiligen Interessengebiete im Feld Design? Entscheiden Sie als Gruppe worauf die einzelnen Gruppenteilnehmer*innen ihren Fokus legen möchten. Stimmen Sie sich ab, sodass sich alle Teamteilnehmer bestmöglich ergänzen und möglichst viel Lernen und Spaß am Projekt haben!
Gruppe | Projektthema | Studierende |
---|---|---|
Team Projekt 1 | Julian, Tom | |
Team Projekt 2 | Erik, Jannes, Konrad | |
Team Projekt 3 | Romi, Floriane |
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.