Creative Technologies Lab | dokuWiki

Repository of academic adventures, experimental technology, accidental brilliance, and collaborative nerdery.

User Tools

Site Tools


teaching:ba:create:ct102:semester-schedule:10-11-26

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Next revision
Previous revision
teaching:ba:create:ct102:semester-schedule:10-11-26 [2026/11/09 19:55] – created Leonie Winkelmannteaching:ba:create:ct102:semester-schedule:10-11-26 [2026/11/10 09:57] (current) – Leonie Winkelmann
Line 1: Line 1:
-====== Praktikum: Typography II – Schrift als Form ======+====== Grundlagen Digitale Medien ====== 
 + 
 +Creative Technologies – Bachelor-Kurs 
 +Prof. Felix Beck, Leonie Winkelmann\\ 
 +WiSe 2026-27 
 + 
 +----- 
 + 
 + 
 +====== Praktikum: Typografie II – Schrift als Form ======
  
  
Line 10: Line 19:
   - **Barrierefreie Typografie:** Öffnungen, Binnenraum, Abstand, Unterscheidbarkeit   - **Barrierefreie Typografie:** Öffnungen, Binnenraum, Abstand, Unterscheidbarkeit
  
-Danach: Weg wählen, Tools (Glyphs, FontStruct, Figma, KI im Vergleich) und erster Test.+Danach: Weg wählen, optional mit Tools (Glyphs, FontStruct, Figma, KI im Vergleich) und erster Test.
  
 ===== Aufgabe zum nächsten Mal ===== ===== Aufgabe zum nächsten Mal =====
Line 17: Line 26:
   * Schrift benennen   * Schrift benennen
   * Nutzungkontext benennen   * Nutzungkontext benennen
 +
 +===== Links =====
 +
 +  * Barrierefreie Schriften: [[https://fonts.google.com/specimen/Inter?preview.layout=grid&query=inter|Inter]], [[https://fonts.google.com/specimen/Atkinson+Hyperlegible?preview.layout=grid&preview.script=Latn|Atkinson]]
 +  * Variable Fonts: [[https://v-fonts.com]]
 +  * Nasa Landscape Generator: [[https://science.nasa.gov/gallery/your-name-in-landsat-gallery/]]
 +
 +-----
 +
 +====== Seminaristischer Unterricht ======
 +
 +  * Referat heute fällt aus => verschoben auf kommende Woche.
 +  * Video Auszüge aus [[extras:wissikon:books:designing-interactions|Designing Interactions]], Autor [[extras:wissikon:media-design:bill-moggridge|Bill Moggridge]]
 +    * **Bill Atkinson** ist ein US-amerikanischer Softwareentwickler, der die frühen grafischen Benutzeroberflächen von Apple wesentlich mitprägte. Er entwickelte die Grafikbibliothek QuickDraw, das Zeichenprogramm MacPaint und das Autorensystem HyperCard. Seine Arbeit machte Computer als visuelle Werkzeuge zugänglich: Bilder konnten unmittelbar bearbeitet und interaktive Anwendungen aus miteinander verknüpften Karten aufgebaut werden. Damit verband Atkinson technische Entwicklung mit der Frage, wie Menschen digitale Inhalte selbst gestalten können.
 +    * **Paul Bradley** war ein US-amerikanischer Industriedesigner, der bei Matrix Design und später bei IDEO an der Gestaltung von Computer-Eingabegeräten arbeitete. Bekannt wurde insbesondere sein Beitrag zur ergonomischen Microsoft-Maus von 1987, deren Form anhand zahlreicher Modelle und Nutzungstests entwickelt wurde. Gemeinsam mit Lawrence Lam gestaltete er außerdem die „3-D Mouse“ für Logitech von 1991. Seine Arbeit verdeutlicht, dass Mensch-Computer-Interaktion auch durch die körperliche Handhabung, Form und Präzision eines Eingabegeräts bestimmt wird.
 +    * **Bill Verplank** ist ein US-amerikanischer Interaktionsdesigner und Ingenieur mit Schwerpunkt auf menschlichen Wahrnehmungs- und Handlungsmöglichkeiten. Er arbeitete unter anderem bei Xerox sowie mit Bill Moggridge bei IDTwo und IDEO und gehört zu den prägenden Wegbereitern des Interaction Design. Sein Erklärungsmodell betrachtet drei Fragen: Wie handeln Menschen, welche sinnlichen Rückmeldungen erhalten sie und wie verstehen sie ein System? Bekannt ist Verplank außerdem dafür, solche Zusammenhänge während des Erklärens mit einfachen Skizzen sichtbar zu machen.
 +    * **Cordell Ratzlaff** ist ein US-amerikanischer Interface- und User-Experience-Designer, der bei Apple die Human Interface Group für das Macintosh-Betriebssystem leitete. Mit seinem Team prägte er die Entwicklung der Benutzeroberfläche von Mac OS X und ihrer als „Aqua“ bekannten Gestaltung. Dabei verbanden sich visuelle Metaphern, transparente und glänzende Oberflächen sowie Animationen zu einer neuen Bedienerfahrung. Seine Arbeit zeigt, wie Erscheinungsbild und zeitliches Verhalten einer Oberfläche gemeinsam die Wahrnehmung und Nutzung eines digitalen Systems beeinflussen.
 +
 +
 +==== Besprechung der Aufgabe Easy Interface ====
 +
 +  * Basierend auf Aufgabe 3A (gewählte Schrift + Buchstabe + Schwarz-Weiß-Gestaltung) eine Bedienlogik zu entwickeln und diese zur Erzeugung von gestalterischer Varianz zu benutzen => Veränderung von Größe, Position, Drehung, Anschnitt, Kontrast
 +    * Integration von
 +      * Button,
 +      * Slider
 +      * Toggle Switch
 +    * Vorstellung der Skizzen und Scribbles
 +    * Besprechung im Kurs: Ist die Oberfläche klar lesbar? Logische Anordnung? Ohne Erklärung bedienbar?
 +
 +==== Aufgabe zur kommenden Woche: Visual Control & Variations ====
 +
 +  * Verwenden Sie für diese Aufgabe P5.JS.
 +  * Entwickeln Sie Ihre Benutzeroberfläche aus der vorherigen Aufgabe weiter zu einem kleinen Gestaltungssystem. Erweitern Sie Ihren Sketch so, dass mit dem Interface mindestens drei klar unterscheidbare Bildvarianten oder Kompositionen erzeugt und gezielt gespeichert bzw. wieder aufgerufen werden können.
 +  * Zusätzlich zu Button, Slider und Toggle Switch sollen die Bedienelemente nun so zusammenwirken, dass nicht nur Einzelwerte verändert werden, sondern unterschiedliche visuelle Zustände entstehen, zum Beispiel //ruhig, dynamisch oder verdichtet.//
 +  * Die Benutzeroberfläche soll weiterhin vollständig selbst in P5.JS gestaltet werden und ausschließlich aus einfachen geometrischen Formen bestehen. Alle Interface-Elemente bleiben auf Schwarz und Weiß beschränkt.
 +  * Ziel ist es, ein konsistentes visuelles und funktionales Interface zu entwickeln, das nicht nur einzelne Parameter verändert, sondern ein kleines System zur Steuerung gestalterischer Entscheidungen bildet.
 +  * Die erzeugten Varianten sollen als Bilder exportiert und in einer nachvollziehbaren Serie präsentiert werden können.
 +  * Für die Dokubox: Haltet durch Skizzen, Scribbles, Diagramme oder kurze Aufzeichnungen fest, welche Regeln und Parameter euer System bestimmen sollen. Dokumentiert anschließend unterschiedliche Parameterkombinationen und Zwischenstände. Druckt eine Auswahl charakteristischer visueller Zustände aus und notiert jeweils, welche Parameter zu diesem Ergebnis geführt haben. Ergänzt den Link zum p5.js-Sketch.
  
  
/var/www/vhosts/ct-lab.info/wiki.ct-lab.info/data/attic/teaching/ba/create/ct102/semester-schedule/10-11-26.1794254132.txt.gz · Last modified: by Leonie Winkelmann