====== Design Basics ======

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

----

<WRAP center round box 100%> Start um 12 Uhr s.t. </WRAP>


===== Prelude & Housekeeping  =====

  * Anwesenheitsliste


===== Hausaufgaben zu heute  =====

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

<WRAP center round box 100%> Pause 5 min </WRAP>

===== Theorieteil & Übungen  =====

  * 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// ((Die Grundlagen des Gestalters, Roberta Bergmann, Haupt Verlag, Bern, 2016)):
  * Zeichen
  * Icon
  * Piktogramm
  * Symbol
  * Signet


===== Übung: 10 Sterne =====

Oft ist es schwer die Begriffe //Symbol// und //Zeichen// auseinanderzuhalten. Die nachfolgende Aufgabe ist angelehnt an Adrian Frutiger //Versuch einer Synthese//((Symbole Zeichen Wanderungen, Adrian Frutiger, Verlag Niggli AG, Sulgen Zürich, 2006)) verschiedene Stern Erscheinungen darzustellen und damit die zugehörigen Kategorien zu vermitteln.

{{:ba:design_basics:sose24:symbole_zeichen_versuch_einer_synthese_frutiger_1280px.jpg?direct&400|}}

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

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

<WRAP center round box 100%> Pause 5 min </WRAP>

===== Beispiele Generative Logos =====

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

  * vvvv
  * Processing
  * P5.JS
  * ChatGPT

===== Mini Übung P5.JS =====

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

{{:ba:design_basics:broken_screen_student_01.jpg?direct&150|}} {{:ba:design_basics:broken_screen_student_02.jpg?direct&150|}} {{:ba:design_basics:broken_screen_student_03.jpg?direct&150|}} {{:ba:design_basics:broken_screen_student_04.jpg?direct&150|}} {{:ba:design_basics:broken_screen_student_05.jpg?direct&150|}} {{:ba:design_basics:broken_screen_student_06.jpg?direct&150|}} {{:ba:design_basics:broken_screen_student_07.jpg?direct&150|}} {{:ba:design_basics:broken_screen_student_08.jpg?direct&150|}} {{:ba:design_basics:broken_screen_student_09.jpg?direct&150|}}

Es folgt eine kurze Vorstellung der erstellten Sketches.
===== Hausaufgaben bis zum nächsten Seminartreffen =====
  - Überarbeiten und verbessern Sie gegebenenfalls Ihr Icon aus der [[ba:sose24:minichallenges#mini-challenge_1|Mini-Challenge 1A]]
  - Steigen Sie ein in den [[https://www.youtube.com/watch?v=yPWkPOfnGsw|Coding Train]] von Daniel Shiffman((https://en.wikipedia.org/wiki/Daniel_Shiffman))
  - [[ba:sose24:minichallenges#mini-challenge_1|Mini-Challenge 1B]] (Generatives Logo)