Design Basics

Praktische Grundlagen der Gestaltung mit digitalen Medien
Bachelor Elektrotechnik, Bachelor Informatik, Bachelor Wirtschaftsingenieurwesen Elektrotechnik
Prof. Felix Hardmood Beck

• Anwesenheitsliste

• Besprechung der Ergebnisse der Hausaufgaben: Ableitung von Icon aus analoger Kombinatorik Übung

• Die Chauvet-Höhle – Älteste Funde der künstlerischen Arbeit der Menschheit
  • Slides
  • Einblick in Doku
• Otl Aicher (Olympia 1972)
  • Zusammenfassung
  • Raster Aufgabe

• Semiotik: Lehre der Zeichen
• Semantik: Bedeutung von Zeichen
• Syntax: Beziehung von Zeichen untereinander
• Pragmatik: Situationsabhängige zwischenmenschliche Kommunikation zwischen Sendern und Empfängern

Beschreibungen aus Buch Die Grundlagen des Gestaltens ¹⁾:

• Zeichen
• Icon
• Piktogramm
• Symbol
• Signet

Oft ist es schwer die Begriffe Symbol und Zeichen auseinanderzuhalten. Die nachfolgende Aufgabe ist angelehnt an Adrian Frutiger Versuch einer Synthese²⁾ verschiedene Stern Erscheinungen darzustellen und damit die zugehörigen Kategorien zu vermitteln.

Die Studierenden zeichnen 10 verschiedene Darstellungen von Sternen. In der Gruppe werden die Darstellungen besprochen: Welche Darstellungen funktionieren besser als andere und warum?

1. Zeichnung
   1. Seestern ⇒ realistisch
   2. Sternbild des großen Wagen ⇒ schematisch
2. Symbol
   1. Siegel Salomons (Davidstern) ⇒ zum Symbol erhobene Zeichen oder Gegenstände
   2. Islam ⇒ Zum Symbol kombinierte Zeichen
3. Zeichen
   1. Schneeflocke (Meteorologie/Frost) ⇒ Konvention mit erkennbarem Gegenstand
   2. Asterisk ⇒ Reine Konvention, Verlust des Gegenständlichen
4. Signatur Zeichen
   1. Zeichen der Steinmetze ⇒ Markierung, Unterschrift, Besitz-Zeichen
5. Emblem Zeichen
   1. Föderation (am Bsp der EU) ⇒ Zeichen der Zugehörigkeit zu einer Gruppe, Familie, Staat
6. Marken Zeichen
   1. Mercedes Stern ⇒ Berufs-Zeichen, Wirtschaft
7. Signal
   1. Explosionsgefahr ⇒ Anweisung für Verkehr, Bedienung, etc.

• http://richardthe.com/medialab
• https://www.feld.studio/work/pigmentpol

• vvvv
• Processing
• P5.JS
• ChatGPT

Erstellen Sie mit Hilfe von ChatGPT einen P5.JS sketch, der Ihren Bildschirm aussehen lässt, als wenn dieser einen Hardware defekt hätte.

Es folgt eine kurze Vorstellung der erstellten Sketches.

1. Überarbeiten und verbessern Sie gegebenenfalls Ihr Icon aus der Mini-Challenge 1A
2. Steigen Sie ein in den Coding Train von Daniel Shiffman³⁾
3. Mini-Challenge 1B (Generatives Logo)